Crafting a Visual Narrative

Homepage Design

• Eye-catching Introduction: Capture attention with a visually appealing homepage that provides a snapshot of your skills and experience.

• Testimonials: Consider featuring brief testimonials or endorsements from colleagues, clients, or mentors to build credibility.

Technology Highlights

• Skill Cloud: Showcase your proficiency in key technologies through an engaging visual representation, such as a skill cloud or tag cloud.

• Achievement Showcase: Highlight notable achievements and milestones prominently on your homepage.

Visual Appeal

• Interactive Elements: Incorporate interactive elements, such as animations or dynamic graphics, to enhance visual appeal and user engagement.

• Portfolio Timeline: Create a visual timeline showcasing the evolution of your skills and major projects over time.

Showcasing Diverse Projects

Versatility is Key

• Project Categories: Organize your projects into categories, highlighting diverse skills and areas of expertise.

• Impact Metrics: Include quantifiable metrics showcasing the impact of your projects, such as improved efficiency or increased user engagement.

Provide Context

• Problem-Solution Overview: Clearly articulate the problem each project aimed to solve and how your solution addressed it.

• User Stories: Integrate user stories or testimonials to provide a human perspective on the impact of your work.

• Project Challenges Blog: Dedicate a section to blog about the challenges faced in various projects and the innovative solutions implemented.

Visuals Matter

• Interactive Demos: If applicable, include interactive demos or walkthroughs to allow visitors to experience your projects firsthand.

• Before-and-After Visuals: Include visuals illustrating the challenges faced, emphasizing the transformation achieved through your solutions.

Highlighting Problem-Solving Skills

Core of Development

• Scenario-Based Solutions: Describe real-world scenarios where your problem-solving skills made a significant impact.

• Interactive Challenges: Integrate coding challenges or puzzles that demonstrate your approach to problem-solving.

• Problem-Solving Blog Series: Develop a blog series focusing on different aspects of problem-solving in software development.

Discuss Challenges

• Technical Deep Dives: Provide in-depth technical analyses of specific challenges encountered in your projects and the innovative solutions devised.

• Lessons Learned Section: Dedicate a section to reflect on lessons learned from challenges and how they shaped your growth.

Case Studies

• In-Depth Analysis: Expand on specific projects with comprehensive case studies, detailing decision-making processes, challenges, and iterative improvements.

• Problem-Solving Frameworks: Illustrate the frameworks or methodologies you employ when tackling complex problems.

Providing Code Samples

Transparency Through Code

• GitHub Integration: Showcase your commitment to transparency by seamlessly integrating links to your GitHub repositories or specific code samples.

• Coding Style Guide: Provide a coding style guide within your portfolio, showcasing your commitment to clean and maintainable code.

Organized Code

• Code Documentation: Emphasize well-documented code with comments, explaining key sections and providing insights into your coding practices.

• Interactive Code Demos: Embed interactive code demos to allow visitors to explore your coding skills in real-time.

GitHub Contributions

• Open Source Involvement: If relevant, highlight your contributions to open-source projects, demonstrating collaboration and community engagement.

• Code Review Highlights: Showcase instances where you contributed to or received positive feedback on code reviews.

Incorporating Feedback and Iteration

Dynamic Portfolio

• Evolution Timeline: Showcase the evolution of your skills and projects over time, emphasizing continuous learning and improvement.

• Feedback Integration: Feature instances where you received feedback and how you incorporated it into your work, demonstrating adaptability.

Show Growth

• Learning Journey Blog: Include a blog section discussing your learning journey, documenting challenges faced, and lessons learned.

• Continuous Improvement Metrics: Highlight metrics that demonstrate your commitment to continuous improvement, such as certifications, courses, or new skills acquired.

Conclusion

In conclusion, a standout portfolio is not merely a compilation of projects; it's a holistic representation of your skills, problem-solving prowess, and growth as a developer. By incorporating testimonials, interactive elements, diverse project displays, and transparent code samples, you transform your portfolio into a compelling narrative that resonates with potential employers.

MyDevPage: Create a Portfolio Website Instantly

MyDevPage allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time building a portfolio website from scratch or customizing expensive templates.

MyDevPage handles everything:

• Portfolio Creation

• SEO

• Analytics

• Customization

• Custom Domain

• Contact Form

• App Router

• Server Actions

• Route Handlers

• Client and Server Components

In this article, we will be covering Server Actions.

What are Server Actions

A Server Action is simply an asynchronous function that runs on the server whenever a form is submitted. It allows you to run the code directly on the server. This way, you don't have to make a separate backend or API and don't need to send requests to the API. You can communicate with a database directly in a Server Action.

You can use it in both client and server components.

Using Server Actions

Using Server Actions in Server Components

Simply make an asynchronous function inside a server component. Add the "use server" directive inside the function (at the top). Then attach an action property to the form element.

The Server Action receives a formData object as an argument that lets you access the values of the input fields. After this, you can perform validation and store information directly in a database. No need to create an API endpoint.

// server component

export const Form = () => {
  const createPost = async (formData) => {
    "use server"
    const title = formData.get("title")
    const description = formData.get("description")

    // store the post in the database directly
  }

  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Submit</button>
    </form>
  )
}

Using Server Actions in Client Components

Since a client component is rendered on the client, you cannot create Server Actions in a client component. But what you can do is, you can create a new file and add the use server directive at the top of the file. Now any function you create inside of that file will be considered a Server Action. Then you can import those Server Actions into a client component.

"use server"

export const createPost = async (formData) => {
  const title = formData.get("title")
  const description = formData.get("description")

  // store the post in the database directly
}

Now you can import this Server Action in a client component.

// client component
"use client"

import { createPost } from './actions'

export const Form = () => {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Submit</button>
    </form>
  )
}

Showing a Loading State

Now you might be wondering, how can we show a loading state because the function is being executed on the server.

To do this you can create a separate client component for your button. Inside of this component, you can use the useFormStatus hook. It tells you whether the Server Action has finished executing or is still being executed.

Note: You can only use the useFormStatus hook inside of a form. That's why you have to create a separate component for your button and place it inside the form.

"use client"

import { useFormStatus } from "react-dom"

export const Button = ({ children }) => {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {children} {pending && "Loading..."}
    </button>
  )
}

Now we can use it inside the form.

// client component
"use client"

import { createPost } from './actions'
import { Button } from './Button'

export const Form = () => {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <Button>Submit</Button>
    </form>
  )
}

Handling Errors and Success State

Now to show errors and success messages to the user, we can make use of the useFormState hook. It accepts a Server Action and an Initial State as an argument. It returns the New State and a copy of the Server action.

// client component
"use client"

import { createPost } from './actions'
import { Button } from './Button'
import { useFormState } from "react-dom"
import { useEffect } from 'react'

export const Form = () => {
  const [createPostState, createPostAction] = useFormState(createPost, {
    error: null,
    success: false
  })

  useEffect(() => {
    if (createPostState.success) {
      alert("Post created!")
    }

    if (createPostState.error) {
      alert(createPostState.error)
    }
  }, [createPostState])

  return (
    <form action={createPostAction}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <Button>Submit</Button>
    </form>
  )
}

When using the useFormState hook. Your Server Action will receive an extra argument prevState. So you can modify your server action like this:

"use server"

export const createPost = async (prevState, formData) => {
  const title = formData.get("title")
  const description = formData.get("description")

  if (!title) {
    return { error: "Enter the title!", success: false }
  }

  if (!description) {
    return { error: "Enter the description!", success: false }
  }

  // store the post in the database directly
  return { error: null, success: true }
}

Conclusion

Server Actions in Next.Js 14 is an amazing feature. It makes development faster since you don't need a separate backend or API. From creating Server Actions to using them in different scenarios, this guide has provided a comprehensive overview of using Next.Js 14 Server Actions. To learn more about Next.Js 14 and Server Actions, read their official documentation.

• Next.Js 14 Documentation

• Server Actions Documentation

MyDevPage: Create a Portfolio Website Instantly

MyDevPage allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time building a portfolio website from scratch or customizing expensive templates.

MyDevPage handles everything:

• Portfolio Creation

• SEO

• Analytics

• Customization

• Custom Domain

• Contact Form

Since the release of Next.js 13 and then Next.js 14, there have been a lot of changes. We now have the:

• App Router

• Client and Server components

• Route Handlers

• Server Actions

Combining these new features with Supabase will speed up the development process and will help you build things faster. So in this article, we will learn how to integrate Supabase with your Next.Js 14 project.

Setting up a Next.Js Project

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Using Supabase in the Project

Now to use Supabase in the project we have to follow the following steps:

Installing the Supabase Libraries

Next, we have to install the required libraries to work with Supabase.

npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

Setting the Environment Variables

Create a new file named .env.local in the root of your project and paste your Supabase Project URL and Anon Key.

You can get this information by going to the supabase project dashboard then on the left side click settings and then click on API.

NEXT_PUBLIC_SUPABASE_URL=PROJECT_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=ANON_KEY

Using Supabase in Client Components

To use Supabase in client components, call the createClientComponentClient function to create a Supabase client. You can then use this client to perform operations.

"use client"

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { useState, useEffect } from "react"

export const ClientComponent = () => {
  const supabase = createClientComponentClient()
  const [users, setUsers] = useState([])

  const getUsers = async () => {
    const { data, error } = await supabase.from("users").select("*")
    setUsers(data)
  }

  useEffect(() => {
    getUsers()
  }, [])

  return <h2>This is a client component</h2>
}

Using Supabase in Server Components

To use Supabase in server components, call the cookies function and then call the createServerComponentClient function and pass the cookies object to create a Supabase client. You can then use this client to perform operations.

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const ServerComponent = async () => {
  const cookieStore = cookies()
  const supabase = createServerComponentClient({
    cookies: () => cookieStore
  })

  const { data, error} = await supabase.from("users").select("*");

  return <h2>This is a server component</h2>
}

Using Supabase in Server Actions

To use Supabase in server actions, call the createServerActionClient function and pass the cookies function to create a Supabase client. You can then use this client to perform operations.

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const Form = () => {
  const addPost = async (formData: FormData) => {
    "use server"

    const title = formData.get("title") as string
    const description = formData.get("description") as string

    const supabase = createServerActionClient({
      cookies
    })

    const { data, error } = await supabase.from("posts").insert({
      title,
      description
    })
  }

  return (
    <form action={addPost}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Submit</button>
    </form>
  )
}

Using Supabase in Route Handlers

To use Supabase in route handlers, call the cookies function and then call the createRouteHandlerClient function and pass the cookies object to create a Supabase client. You can then use this client to perform operations.

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const GET = async (request: Request) => {
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore })

  const { data, error} = await supabase.from("users").select("*")

  return Response.json(data)
}

Supabase Authentication

Next, we will learn how to authenticate users and add authorization using Supabase.

Creating a Middleware

When using the Supabase client on the server, you must perform extra steps to ensure the user's auth session remains active. Since the user's session is tracked in a cookie, we need to read this cookie and update it if necessary.

Next.js Server Components allow us to read a cookie but not write back to it. Middleware on the other hand allows us to both read and write to cookies.

Create a new file named middleware.ts in the src folder (if you have one) or in the root of your project. And paste the following code:

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()

  const supabase = createMiddlewareClient({ req, res })

  // Refresh session if expired - required for Server Components
  await supabase.auth.getSession()

  return res
}

API Route for Code Exchange

Supabase requires us to set up a Code Exchange route, to exchange an auth code for the user's session, which is set as a cookie for future requests made to Supabase.

Create a new folder named auth inside the app folder, inside of this create another folder callback and then create a route.ts file and paste the following code

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

import type { NextRequest } from "next/server"

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const cookieStore = cookies()
    const supabase = createRouteHandlerClient({
      cookies: () => cookieStore
    })
    await supabase.auth.exchangeCodeForSession(code)
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(`http://localhost:3000/`)
}

Sign Up a User

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const SignUp = () => {
  const signUp = async (formData: FormData) => {
    "use server"

    const name = formData.get("name") as string
    const email = formData.get("email") as string
    const password = formData.get("password") as string

    const supabase = createServerActionClient({
      cookies
    })

    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: {
          name
        },
        emailRedirectTo: `http://localhost:3000/auth/callback`
      }
    })
  }

  return (
    <form action={signUp}>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  )
}

Log In a User

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const LogIn = () => {
  const logIn = async (formData: FormData) => {
    "use server"

    const email = formData.get("email") as string
    const password = formData.get("password") as string

    const supabase = createServerActionClient({
      cookies
    })

    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password
    })
  }

  return (
    <form action={logIn}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  )
}

Log Out a User

"use client"

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"

export const LogOut = () => {
  const supabase = createClientComponentClient()

  const logOut = async () => {
    await supabase.auth.signOut()
  }

  return <button onClick={logOut}>LogOut</button>
}

Get the Logged In User

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { redirect } from "next/navigation"

export const Profile = async () => {
  const cookieStore = cookies()
  const supabase = createServerComponentClient({
    cookies: () => cookieStore
  })

  const {
    data: { session }
  } = await supabase.auth.getSession()  

  if (!session) {
    redirect("/login")
  }

  const user = session.user

  return <h2>User Profile</h2>
}

Conclusion

Next.Js 14 and Supabase is a powerful combination and it allows us to build things faster. From setting up a Next.js project to initializing the Supabase client, fetching data, and implementing user authentication, this guide has provided a comprehensive overview of using Supabase with Next.Js 14. To learn more about Next.Js 14 and Supabase, read their official documentation.

• Next.Js 14 Documentation

• Supabase Documentation

MyDevPage: Create a Portfolio Website in Minutes

MyDevPage allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time in building a portfolio website from scratch or customizing expensive templates.

MyDevPage handles everything:

• Creating a portfolio

• SEO

• Analytics

• Customization

• Custom Domain

• Contact Form

1. User Onboarding and Account Verification

2. Password Resets and Account Recovery

3. Notification and Alerts

4. Communication and Updates

5. Marketing and Promotions

6. Support and Customer Service

In this article, we will dive into sending emails using Next.js 14, Resend and React-Email. We will leverage the latest Next.js features, such as the app directory and server actions.

Setting up Resend

Before we can start using Resend in our app, first you have to create an account on Resend. After creating the account, you have to verify your domain name and the email address you will be using to send emails.
Once that's done, go to the API Keys page and create a new api key.

Copy an existing API key or click Create Api Key to create a new one.

Setting Up Your Next.js Project

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Next, we have to install the packages for sending emails.

npm i resend react-email @react-email/components @react-email/render

Let's talk about the packages we just installed:

• resend: It is the service that we will be using to send emails

• react-email: It allows us to create email templates using React Js.

• @react-email/render: For converting react js based templates to an html string.

Creating a Simple Form

Let's now create a simple form where the user can enter his name, email and message. And when it is submitted we will send the detail to the entered email.

export default function Form() {
  return (
    <form>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" cols={30} rows={10}></textarea>
      <button type="submit">Send</button>
    </form>
  )
}

Creating an Email Template

Now let's create an email template using React Js.

import { Html, Heading, Text } from "@react-email/components"
const EmailTemplate = ({
  name,
  email,
  message
}: {
  name: string
  email: string
  message: string
}) => {
  return (
    <Html lang="en">
      <Heading as="h1">New Form Submission</Heading>
      <Text>You just submitted a form. Here are the details:</Text>
      <Text>Name: {name}</Text>
      <Text>Email: {email}</Text>
      <Text>Message: {message}</Text>
    </Html>
  )
}
export default EmailTemplate

Creating Server Action

Server action is the latest feature of Next.js 14. It is an asynchronous function that runs on the server. We can use it to handle form submissions and to handle email logic on the server. So when you submit a form the function will start running on a server. In this case, you don't have to create API routes to handle any sensitive logic, like communicating with the database.
Create a file named actions.ts in the src folder (if you have) or the root of your project.

"use server"
import { Resend } from "resend"
import EmailTemplate from "./components/EmailTemplate"
interface State {
  error: string | null
  success: boolean
}
export const sendEmail = async (prevState: State, formData: FormData) => {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string
  try {
    const resend = new Resend(process.env.RESEND_API_KEY)
    await resend.emails.send({
      from: "Shahmir <shahmir@mydevpa.ge>",
      to: email,
      subject: "Form Submission",
      react: EmailTemplate({ name, email, message })
    })
    return {
      error: null,
      success: true
    }
  } catch (error) {
    console.log(error)
    return {
      error: (error as Error).message,
      success: false
    }
  }
}

Create a .env.local file in the root of your project and paste the Resend API key you created earlier.
The sendEmail function is a server action. It receives the previous state and the formData, that gives you access to the values of the form. Then it uses resend to send the email to the provided email address. In the from field, make sure to use an email that you verified on your Resend account.
In some cases, the react property might not work and you might receive an error while sending emails. In that case you can convert the React component into an HTML string.

"use server"
import { Resend } from "resend"
import EmailTemplate from "./components/EmailTemplate"
import { render } from "@react-email/render"
interface State {
  error: string | null
  success: boolean
}
export const sendEmail = async (prevState: State, formData: FormData) => {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string
  try {
    const resend = new Resend(process.env.RESEND_API_KEY)
    await resend.emails.send({
      from: "Shahmir <shahmir@mydevpa.ge>",
      to: email,
      subject: "Form Submission",
      html: render(EmailTemplate({ name, email, message }))
    })
    return {
      error: null,
      success: true
    }
  } catch (error) {
    console.log(error)
    return {
      error: (error as Error).message,
      success: false
    }
  }
}

Using Server Action with the Form

Now let's use the server action we created above with our form component.

"use client"
import { sendEmail } from "@/actions"
import { useEffect } from "react"
import { useFormState } from "react-dom"
export default function Form() {
  const [sendEmailState, sendEmailAction] = useFormState(sendEmail, {
    error: null,
    success: false
  })
  useEffect(() => {
    if (sendEmailState.success) {
      alert("Email sent!")
    }
    if (sendEmailState.error) {
      alert("Error sending email!")
    }
  }, [sendEmailState])
  return (
    <form action={sendEmailAction}>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" cols={30} rows={10}></textarea>
      <button type="submit">Send</button>
    </form>
  )
}

We are using the useFormState hook. It accepts the action and the initial state and returns the new state and the action function that we can attach with our form.
In the end we added an action property to our form and gave it the server action function.
Now when you submit the form you should receive an email.

Conclusion

This article aimed to help you quickly get started with sending emails. The Resend and React-Email libraries make it so easy to achieve this. To learn more about Resend and React-Email read their official documentation.

• Resend Documentation

• React-Email Documentation

MyDevPage: Create a Portfolio Website Instantly

MyDevPa.ge allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time in building a portfolio website from scratch or customizing expensive templates.
MyDevPa.ge handles everything:

• Creating a portfolio

• SEO

• Analytics

• Customization

• Custom Domain

• Contact Form

What is a Singly Linked List?

A Singly Linked List is a linear data structure that allows us to store data in a linear way. It is a collection of nodes where each node points to the next node.

Every node contains two crucial things:

1. Data (integer, string, boolean, etc)

2. Pointer (points to the next node)

A singly linked list has two pointers of its own:

1. head (points to the first node)

2. tail (points to the last node)

The pointer of the last node always points to null since there is no node after it.

Implementation in Javascript

Now that we know what is a singly linked list and what it looks like, let's code it using JavaScript. We will be using object-oriented programming to implement it and we will use the ES6 Class syntax.

We will need two classes:

1. Node (represents the structure of the node)

2. SinglyLinkedList (represents the structure and also includes the major operations)

Node Class

As we discussed above, a node contains two things:

• Data (number, string, boolean, etc)

• Pointer (points to the next node)

The pointer initially points to null.

class Node {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

Singly Linked List Class

A singly linked list will have:

1. head pointer (points to the first node)

2. tail pointer (points to the last node)

3. length (number of nodes in the list)

class SinglyLinkedList {
  constructor() {
    this.head = null
    this.tail = null
    this.length = 0
  }
}

Basic Operations

A singly linked list can perform the following operations:

• push (insert at the end)

• pop (remove from the end)

• shift (remove from the start)

• unshift (insert at the start)

• get (get a node at a particular index)

• set (change the value of a node at a particular index)

• insert (insert at a particular index)

• remove (remove from a particular index)

Now we will implement all these operations into the SinglyLinkedList class.

Push

Push will insert a new node at the end.

  push(value) {
    const node = new Node(value)

    if (!this.length) {
      this.head = node
      this.tail = node
    } else {
      this.tail.next = node
      this.tail = node
    }
    this.length++
    return this
  }

Pop

Pop will remove a node from the end.

  pop() {
    let currentNode = this.head
    if (this.length <= 1) {
      this.head = null
      this.tail = null
    } else {
      while (!currentNode?.next?.next) {
        currentNode = currentNode.next
      }
      currentNode.next = null
      this.tail = currentNode
    }
    this.length--
    return this
  }

Shift

Shift will remove a node from the start.

  shift() {
    if (this.length <= 1) {
      this.head = null
      this.tail = null
    } else {
      this.head = this.head.next
    }
    this.length--
    return this
  }

Unshift

Unshift will insert a new node at the start

  unshift(value) {
    const node = new Node(value)
    if (!this.length) {
      this.tail = node
    } else {
      node.next = this.head
    }
    this.head = node

    this.length++
    return this
  }

Get

Get a node's value from a particular index.

  get(index) {
    if (index < 0 || index >= this.length) return undefined
    let currentNode = this.head
    for (let i = 1; i <= index; i++) {
      currentNode = currentNode.next
    }
    return currentNode.value
  }

Set

Change the node's value at a particular index.

  set(index, value) {
    if (index < 0 || index >= this.length) return
    let currentNode = this.head
    for (let i = 1; i <= index; i++) {
      currentNode = currentNode.next
    }
    currentNode.value = value
    return this
  }

Insert

Insert a new node at a particular index.

  insert(index, value) {
    if (index < 0 || index > this.length) return this
    const node = new Node(value)
    if (index === 0) return this.unshift(value)
    if (index === this.length) return this.push(value)
    let currentNode = this.head
    for (let i = 1; i <= index - 1; i++) {
      currentNode = currentNode.next
    }
    const nextNode = currentNode.next
    currentNode.next = node
    node.next = nextNode
    this.length++
    return this
  }

Remove

Remove a node at a particular index.

  remove(index) {
    if (index < 0 || index >= this.length) return
    if (index === 0) return this.shift()
    if (index === this.length - 1) return this.pop()
    let currentNode = this.head
    for (let i = 1; i <= index - 1; i++) {
      currentNode = currentNode.next
    }
    currentNode.next = currentNode.next.next
    this.length--
    return this
  }

Time Complexity

Now that we have implemented all the basic operations that a singly linked list can perform, let's talk about the time complexity of each of them:

• push: O(1)

• pop: O(n)

• shift: O(1)

• unshift: O(1)

• get: O(n)

• set: O(n)

• insert: O(n)

• remove: O(n)

Pros and Cons of a Singly Linked List

Pros

A singly linked list is useful when you want to frequently insert or remove elements because it takes constant time.

Cons

A singly linked list is not efficient when it comes to accessing the elements because there are no indices assigned to the elements. So you have to visit each node starting from the first node until you find the target node.

RepairRadar is an open-source platform that connects mechanics with vehicle owners. Mechanics can register themselves and set up their profiles. Customers can sign in and find nearby mechanics through an interactive map. Customers can contact different mechanics and request appointments. Mechanics can approve or reject those appointments depending on their schedule. Customers can also leave ratings and review once their work is done.

🚩Problem

A lot of times when people are traveling and they face vehicle problems. It's hard to find a mechanic nearby. The shops are far away or people don't know where the shops are and they don't know how to contact a mechanic. Even if they do find a mechanic, the mechanic might be quite busy with other vehicles and people will have to wait hours for their turn.

💡Solution

This is where I came up with the idea of RepairRadar. A way to connect mechanics with customers. Both can communicate easily and schedule appointments. Leave reviews and ratings so other customers can have a better idea of which mechanic to choose.

👷Reason for Building RepairRadar

• To complete the project. I leave most of the projects incomplete.

• To learn AWS Amplify. I was looking to learn a new technology.

• To improve my portfolio.

• Of course for the swags and prizes .🤣

🔥Features

Authentication

Customers and Mechanics can register themselves.

Customer Features

Find Mechanics

Customers can find mechanics through the map and visit their profiles.

Book Appointment

Customers can choose a time and write a description to request an appointment.

Add Review

Once the work is done and marked as completed by the mechanic, the customer can add a review.

Chat

Customer can start a chat with the mechanic.

Mechanic Features

Onboarding

Mechanics will set up their profiles by uploading a profile picture and giving their shop location.

Profile

Mechanics can view their profiles.

Edit Profile

Mechanics can edit their profiles.

Appointments

Mechanics can accept or reject the appointments requested by different customers. Once the work is done, the mechanics can also mark the appointments as completed.

👨‍💻Tech Stack

1. ReactJs - For building the Frontend.

2. Amplify UI - For building the UI.

3. Typescript - For type checking and writing better code.

4. Leaflet - For adding maps.

5. AWS Amplify - For the backend (Authentication, Database, File Storage, UI Components).

6. Vercel - For deployment.

🧱Folder Structure

-- components
    -- Chat
        -- ChatItem.tsx
        -- Message.tsx
    -- LocationPickerMap
        -- index.tsx
        -- LocationMarker.tsx
    -- Sidebar
        -- index.tsx
        -- SidebarItem.tsx
    -- AddReviewModal.tsx
    -- AppointmentItem.tsx
    -- AppointmentRequestModal.tsx
    -- AppointmentsSection.tsx
    -- Header.tsx
    -- LayoutItem.tsx
    -- Map.tsx
    -- Review.tsx
    -- ReviewViewModal.tsx
-- context
    -- AuthContext.tsx
-- hooks
    -- useImagePicker.tsx
    -- usePickLocation.tsx
-- hoc
    -- withAuth.tsx
    -- withNoAuth.tsx
-- layouts
    -- AuthLayout.tsx
    -- ChatLayout.tsx
    -- CustomerLayout.tsx
    -- Layout.tsx
    -- MechanicLayout.tsx
    -- UserLayout.tsx
-- pages
    -- customer
        -- FindMechanicsPage
        -- AppointmentsPage.tsx
        -- CustomerProfilePage.tsx
        -- MechanicProfilePage.tsx
    -- mechanic
        -- AppointmentsPage.tsx
        -- DashboardPage.tsx
        -- MechanicProfilePage.tsx
        -- MechanicProfileEditPage.tsx
    -- ChatPage.tsx
    -- EmailVerificationPage.tsx
    -- LandingPage.tsx
    -- LogInPage.tsx
    -- OnboardingPage.tsx
    -- SignUpPage.tsx
-- routes
    -- authRoutes.tsx
    -- customerRoutes.tsx
    -- index.tsx
    -- mechanicRoutes.tsx
-- types
    -- error.types.ts
    -- map.types.ts
    -- user.types.ts
-- utils
    -- user.utils.ts
-- index.css
-- main.tsx

❤️Usage of AWS Amplify

I used AWS Amplify for the following features:

1. Authentication

2. Database

3. File Storage

4. Generating UI Components

1- Authentication

I set up authentication using aws cognito and also set up some additional attributes as they were needed for this kind of multi-role application where we have mechanics and customers.

2- Database

I set up different Data Models for the storage of Users, Appointments, Reviews, Chats, and Messages.

3- Storage

I made a public S3 bucket for storing profile pictures of mechanics.

4- UI Components

I also used AWS Amplify for generating ReactJs UI components from a Figma file.

😕Difficulties

1. I was new to AWS Amplify so it took me around 10 days to learn and experiment with the different services of AWS Amplify.

2. I am not good at design. So I had to search a lot to find design inspirations.

3. Lack of time. I work as a freelancer so managing the time was a bit hard for me.

🤖Future Enhancement

These are some features that I was looking to add but did not get enough time. But these can definitely be added in the future.

1. Dark Mode.

2. Mechanics can add services and Customers can choose a particular service while booking an appointment.

3. In-app payments. Customers can pay directly through the app.

4. Analytics and Reporting.

🔗Useful Links

Live Preview: https://repairradar.shahmirfaisal.com/

Github Repo: https://github.com/shahmirfaisal/RepairRadar

🧑About Me

I'm Shahmir Faisal, currently pursuing my Bachelor's in Computer Engineering. I've been in the world of coding for 4 years now. I'm a web developer and my current stack consists of React, React Native, Next, Node, Express, and MongoDB. But now I will also include AWS Amplify🔥.

Sorry, but I thought I should do some promotion as well :(

I work as a web developer tutor and have taught a lot of students in the past year on Fiverr. Feel free to reach out to me.

🎇Conclusion

I have learned a lot of things by participating in this hackathon. It was a bit tough for me but still made an amazing app. Thank you Hashnode and AWS Amplify for organizing this amazing hackathon.

If you are unaware of SOLID, you can read the first article where I gave a brief introduction to SOLID. In this article, we will be covering the Interface Segregation Principle.

What is Interface Segregation Principle?

It states that the client should not be forced to implement an interface that it doesn't use.

Now, this definition doesn't really make any sense. So let's simplify this.

In simple words, the classes in your code or any other entity in your code should not be dependent on methods that they cannot use.

Example

Let's clear the concept with the help of an example.

Consider you are building a movie streaming app and you have 2 kinds of users: free users and premium users.

Premium users can watch both the trailer as well as the movie. However, free users can only watch the trailer.

Naive Solution

We can code this app something like this:

class User {
  constructor(name) {
    this.name = name;
  }

  watchTrailer() {
    console.log("Watching trailer...");
  }

  watchMovie() {
    console.log("Watching movie...");
  }
}

class PremiumUser extends User {}

class FreeUser extends User {
  watchMovie() {
    return null;
  }
}

Here, we created a User class with a name property and watchTrailer and watchMovie methods. Then we have 2 children: PremiumUser and FreeUser.

Inside of FreeUser, we override the watchMovie method and here it returns null which means it does nothing so free users cannot watch a movie.

What's wrong with this solution?

In our solution, FreeUser is depending on the watchMovie method but it cannot use that method because we are returning null. We can still call that method but it does nothing meaningful.

And here we are violating the Interface Segregation Principle because our FreeUser class is depending on a method that it doesn't use.

Better Solution

class User {
  constructor(name) {
    this.name = name;
  }

  watchTrailer() {
    console.log("Watching trailer...");
  }
}

class PremiumUser extends User {
  watchMovie() {
    console.log("Watching movie...");
  }
}

class FreeUser extends User {}

In this solution, we only put the common methods in the parent class, in our case it is just the watchTrailer method because every user can watch the trailer. And then PremiumUser has its own watchMovie method. Now any of our class is not depending on any method that it cannot use. FreeUser is now independent of the watchMovie method.

Hence, we are not violating the principle anymore because each of the class only has those things that it can use.

So that's it. Comment below if you have any questions. Will see you in the next article covering the Dependency Inversion Principle.

Follow me on:
Twitter
LinkedIn
Github

If you are unaware of SOLID, you can read the first article where I gave a brief introduction to SOLID. In this article, we will be covering the Liskov Substitution Principle.

What is Liskov Substitution Principle?

It states that an object of the parent class should be replaceable with the object of the child class without breaking the application.

You might have heard this definition in some other places or maybe it's your first time but anyways, it sounds confusing.

In simple words, if you have a parent and a child class and you are using an object of parent class somewhere in your code. If you replace that object of the parent class with the object of the child class, everything should still work the same without giving any errors or unexpected output.

Example

Let's clear this concept with the help of an example.

Consider we have a Rectangle class as a parent and a Square class as the child.

Naive Solution

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }

  set width(value) {
    this._width = value;
  }
  set height(value) {
    this._height = value;
  }

  get width() {
    return this._width;
  }
  get height() {
    return this._height;
  }

  get area() {
    return this._width * this._height;
  }
}

class Square extends Rectangle {
  constructor(width, height) {
    if (width !== height) {
      throw new Error("Width and Height should be same!");
    }

    super(width, height);
  }

  set width(value) {
    this._width = value;
    this._height = value;
  }
  set height(value) {
    this._width = value;
    this._height = value;
  }
}

Here we have 2 properties _width and _height and we are using getters and setters for accessing and modifying the values. Now in the Square class, we are overriding the setters because we want to have the same width and height.

Now if we try to use them:

const calculateObjectArea = (object) => {
  object.height = 20;
  return object.area;
};

const rc = new Rectangle(10, 10);

console.log(calculateObjectArea(rc));
// Output: 200

Here, we have a function calculateObjectArea that changes the height to 20 and then calculates the area. So basically in our case, the output will be 200 (10 * 20).

Now, what if we pass a square to that function instead of a rectangle with the same width and height?

const calculateObjectArea = (object) => {
  object.height = 20;
  return object.area;
};

const rc = new Rectangle(10, 10);
const sq = new Square(10, 10);

console.log(calculateObjectArea(sq));
// Output: 400

According to the principle, if we replace the object of the parent class with the object of the child class we should still get the expected output. But here we will get 400 instead of 200. It means we are violating the Liskov Substitution Principle.

Better Solution

class Shape {
  get area() {
    return this._width * this._height;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this._width = width;
    this._height = height;
  }

  get width() {
    return this._width;
  }
  get height() {
    return this._height;
  }

  set width(value) {
    this._width = value;
  }
  set height(value) {
    this._height = value;
  }
}

class Square extends Shape {
  constructor(width, height) {
    if (width !== height) {
      throw new Error("Width and Height should be same!");
    }
    super();
    this._width = width;
    this._height = height;
  }

  get width() {
    return this._width;
  }
  get height() {
    return this._height;
  }

  set width(value) {
    this._width = value;
    this._height = value;
  }
  set height(value) {
    this._width = value;
    this._height = value;
  }
}

Here we put all the common things in one base class Shape (in our case it is just the area). And then in Rectangle and Square we are having different setters and getters. Now the Square class is completely independent of the Rectangle class.

So whenever you are using inheritance and when you replace one object with another one and your code behaves unexpectedly, try to split your code into multiple classes and put only common things in the base class.

So that's it. Comment below if you have any questions. Will see you in the next article covering the Interface Segregation Principle.

Follow me on:
Twitter
LinkedIn
Github

Polle is an open-source platform where you can create polls, share them to get votes, and finally analyze them in the dashboard. See the number of votes on each answer, votes on each day, votes from different devices, and much more!

🚩 The Problem

Now, we know there are already a lot of poll makers in the market. They lack in one big thing, analytics and that's where Polle can help you. I used some of the poll makers out there and came to know that they don't have great analytics like we don't know from where the votes are coming, when are we getting the most votes, how many votes we got today, yesterday, or the day before yesterday, are we getting votes from mobile, desktop or tablet.

💡 The Idea

That's where I came up with the idea of Polle. It not only lets you build and share polls but also provides user-friendly charts for analyzing the polls. I was thinking to build such kind of app way before this hackathon. But when I heard about this hackathon, I was very motivated to build it.

Here are some reasons why I built Polle for this hackathon:

• To complete the entire project. I usually leave my projects incomplete in the middle. This hackathon really pushed me towards completing the entire project.
• To learn something new. This project helped me learn some new technologies like PlanetScale and Prisma.
• And of course for the swags and prizes 🤣.

🔥 Features

1. Landing Page

Not a feature though. But tried my best to build a nice-looking landing page.

2. Authentication

I added authentication using JWT and Cookies.

3. Dashboard

The dashboard shows an overview of the polls, votes and votes on the current day.

4. Poll Creation

Users can not only create polls, but they can also customize and configure them. Users can:

1. Add a question and multiple answers. Also added drag/drop functionality to change the position of answers.
2. Pick a theme color for the poll.
3. Show a custom "thanks message" that the audience will see after submitting the vote.
4. Show or hide results. If results are hidden, the audience can't see the results after voting.
5. Enable or disable the poll anytime. The audience can't vote if the poll is disabled.

5. Polls Page

6. Analytics

The analytics page shows:

1. Number of votes on each answer.
2. Number of notes on each day.
3. Votes from different devices like desktop, mobile, and tablet.

7. The Poll

This is the Poll page where users can vote and can also see the results if allowed by the creator.

There are some other features and pages as well. Make sure to explore them.

👨‍💻 Tech Stack

1. Next.js - For building the entire App.
2. Material-UI - For building the UI.
3. SASS - CSS preprocessor.
4. Chart.js - For adding charts to the dashboard.
5. Context API - For managing state.
6. Prisma - For working with the database.
7. PlanetScale - As a database.
8. JWT - For authentication.
9. Axios - For consuming the API.
10. Bcrypt - For hashing passwords.
11. React-Beautiful-DnD - For drag/drop feature.
12. Vercel - For deployment.

I built the entire app using Next.js along with some other packages and deployed the app on Vercel.

🧱 Project Structure

-- components
    -- AnalyticsBox
    -- DashboardLayout
    -- Features
    -- Footer
    -- Header
    -- Hero
    -- HomeLayout
    -- Navbar
    -- Poll
    -- PollCustomize
    -- PollItem
    -- PollMaker
    -- PollManager
    -- PollSettings
    -- Seo
    -- SharePoll
-- context
    -- PollContext
    -- UserContext
-- lib
    -- getUser
    -- prisma
-- pages
    -- api
        -- auth
        -- polls
        -- votes
    -- dashboard
        -- analytics
        -- edit-poll
        -- create-poll
        -- index
        -- polls
    -- poll
    -- _app
    -- _document
    -- index
    -- login
    -- signup
-- prisma
    -- schema.prisma
-- src
-- styles
-- utils

😵‍💫 Process of Creation

As this was the first time I was working with PlanetScale and Prisma, so I had to cover some basic stuff before creating the project. I read this blog post on PlanetScale by Camila Ramos which gave me an overview of Prisma and PlanetScale. Then started reading the official docs of Prisma and PlanetScale. Once I covered the basics, then the next step:

npx create-next-app polle

Installed Prisma, set up PlanetScale, and created the schema. I started off by implementing authentication, then CRUD operations on the poll, then implemented analytics by using chart.js, and at the end built this cool logo: Which is nothing but a copy of an emoji from Notion 🤣. I just changed its color using Figma 😊. I'm not a designer so I had to do this 😔. I also created an open-graph image using Canva:

😕 Difficulties

Here are some difficulties that I faced during the development process:

1. As I'm not a designer, It was a bit hard for me to come up with a nice-looking UI.
2. I struggled with the analytics part. As I had never worked with charts before so adding charts and gathering data for them was hard for me.

🤖 Future Enhancements

These are some features that I thought of adding but was unable to do so. However, I will definitely add them in the future:

1. Dark mode.
2. Add images in the poll.
3. Add a description in the poll.
4. Ability to embed the polls in websites using iframe or some other technique.

🔗 Links

Live Preview: polle.shahmir.me
Github Repo: github.com/shahmirfaisal/polle

🧑 About Me

I'm Shahmir Faisal, currently pursuing my Bachelor's in Computer Engineering. I've been in the world of coding for 3 years now. I'm a web developer and my current stack consists of React, Next, Node, Express, and MongoDB. But now I will also include Prisma and PlanetScale 🔥.

🎇 Conclusion

In the end, I want to say thanks to Hashnode and PlanetScale for organizing such a great hackathon where we can learn and show our skills by building cool projects.

If you are unaware of SOLID, you can read the first article where I gave a brief introduction to SOLID. In this article, we will be covering the Open-Closed Principle.

What is the Open-Closed Principle?

The Open-Closed principle states that entities are open for extension but closed for modifications. Now, this definition obviously doesn't make sense to anyone. So let's understand it by some alternative and simpler definitions:

• You can create new entities but you cannot change the existing ones.
• You can add new code (that will work with the old code) but you cannot change the old code.

Here, the word entity refers to an object, class, or function or in other words a set of instructions grouped together. So basically, you cannot change the existing set of instructions but you can add new ones. Let's understand it with an example:

Example

Consider we have a set of users and we want to sort them in different ways and in different orders.

const users = [
  {
    name: "Shahmir",
    age: 19,
  },
  {
    name: "Faisal",
    age: 18,
  },
  {
    name: "Usman",
    age: 20,
  },
];

Here each user has a name and an age property and we want to sort these using name and age and in ascending and descending order.

Naive Solution

We can sort them using a function like this:

const sortUsers = (users, sortBy, order) => {
  switch (sortBy) {
    case "name":
      switch (order) {
        case "asc":
          users = users.sort((user1, user2) =>
            user1.name < user2.name ? -1 : 1
          );
          break;

        case "desc":
          users = users.sort((user1, user2) =>
            user1.name > user2.name ? -1 : 1
          );
          break;
      }
      break;

    case "age":
      switch (order) {
        case "asc":
          users = users.sort((user1, user2) => user1.age - user2.age);
          break;

        case "desc":
          users = users.sort((user1, user2) => user2.age - user1.age);
          break;
      }
      break;
  }

  return users;
};

This function takes the users, orderBy(name/age) and order(ascending/descending) as arguments. And uses a bunch of switch statements to sort them in different ways using the sort function. Now, this solution works but it's violating the Open-Closed principle.

Why is it Violating the Open-Closed Principle?

The above solution is violating the Open-Closed principle and it is not the best way to perform this task. What if we have first name and last name and we want to sort using these in ascending/descending order. We need to modify our existing entity(sortUsers function) and add more switch statements to make it work and the principle states that we should not modify existing entities.

Better Solution

Instead of changing the existing entity, we want to be able to add new ones. So let's change the above code to make it work better.

class SortUserName {
  constructors(users) {
    this.users = users;
  }

  ascending() {
    return users.sort((user1, user2) => (user1.name < user2.name ? -1 : 1));
  }

  descending() {
    return users.sort((user1, user2) => (user1.name > user2.name ? -1 : 1));
  }
}

class SortUserAge {
  constructors(users) {
    this.users = users;
  }

  ascending() {
    return users.sort((user1, user2) => user1.age - user2.age);
  }

  descending() {
    return users.sort((user1, user2) => user2.age - user1.age);
  }
}

In the above code, we created 2 classes one for sorting through name and the other for sorting through age. And both of them have ascending and descending functions for sorting in different orders. Now, this code is a lot better than the previous one.

Why is it a Better Solution?

If we want to sort them using first name or last name, all we need to do is to create new classes for them and this is what Open-Closed principle says(create new entities).

Here's how we can use the newly created classes:

const sort = new SortUserAge(users);
console.log(sort.ascending());

Now, we don't need to modify any existing code. Whenever we need to change how we are sorting the users, we can just create a new class for it without changing any existing classes.

So that's it. Comment below if you have any questions. Will see you in the next article covering the Liskov Substitution principle.

Follow me on:
Twitter
LinkedIn
Github

What are the SOLID Design Principles?

SOLID is a set of object-oriented design principles allowing you to write understandable and maintainable code. It makes sure that changing one part of your code doesn't impact other parts. SOLID is an acronym for 5 key design principles:

1. S - Single Responsibility principle
2. O - Open-Closed principle
3. L - Liskov Substitution principle
4. I - Interface Segregation principle
5. D - Dependency Inversion principle

In this series, we will cover all these 5 principles. We will cover the first one in this article.

Single Responsibility principle

The Single Responsibility Principle states that a class should have only one responsibility means that it should have only one reason to change or in other words, it should have only one job.
If your class has multiple responsibilities, it's better to split it into multiple classes to avoid the violation of single responsibility.

Example

Consider we're building an application to manage the students and their courses.

Naive Solution

We might have a class like this:

class Student {
  constructor(name) {
    this.name = name;
    this.courses = [];
  }

  enrollCourse(course) {
    this.courses.push(course);
    this.notify(course);
  }

  notify(course) {
    console.log(`${this.name}, you have successfully enrolled ${course}.`);
  }
}

const Shahmir = new Student("Shahmir");
Shahmir.enrollCourse("Physics");

// Output
// Shahmir, you have successfully enrolled Physics.

Here we have 2 properties, the name, and courses of the student. Then a function enrollCourse for adding courses and uses the notify function to notify the student about that course.
Now the solution looks good, isn't it? However, it's violating the single responsibility principle.

Why's it Violating the Single Responsibility?

If you carefully look at the above example, it has 2 responsibilities:

1. Enrolling Courses
2. Notifying Students about the new enrolled course

The class has 2 reasons to change:

1. if we want to change how we're enrolling in the course
2. if we want to change how we notify the user

Here are the problems with the notify function:

1. What if we want to send an email or a push notification to notify the student instead of just printing the message in the console? We need to come back and make changes to the class.
2. What if we have 10 different classes and we want the notify functionality in them? We need to write the function 10 times.
3. And what if we want to change the function again? We need to make changes in 10 different places.

Better Solution

Why not just take that function out of the class? This will make the class use the single responsibility principle and we will be able to use that function wherever we want. And whenever we want to make changes, we will only change one part of the code without affecting the other parts.

function notify(message) {
  console.log(message);
  // we can also email or send a push notification
}

class Student {
  constructor(name) {
    this.name = name;
    this.courses = [];
  }

  enrollCourse(course) {
    this.courses.push(course);
    notify(`${this.name}, you have successfully enrolled ${course}.`);
  }
}

const Shahmir = new Student("Shahmir");
Shahmir.enrollCourse("Physics");

// Output
// Shahmir, you have successfully enrolled Physics.

Now the class has only one responsibility and that is to enroll the courses. The notify function is separate from the class.
So that's it. Will see you in the next article covering the open-closed principle.

Follow me on:
Twitter
LinkedIn
Github

Scope determines the accessibility of variables in JavaScript. It means where you can access a particular variable in your code. In Javascript, we have 2 types of scope:

1. Global Scope
2. Local Scope

Global Scope

Whenever you declare a variable outside of any function, then it is in the global scope and the variable is called global variable. Global variables can be accessed from anywhere in the code. Example:

var x = 10;

Local Scope

Whenever you declare a variable inside of a function, then it is in the local scope and the variable is called local variable. Local variables can only be accessed inside of the function they are declared in. Example:

function localScope() {
  var x = 10;
}

localScope();

But how does javascript allow global variables to be accessed from anywhere and restrict local variables from getting access outside of the function they are declared in? It happens because of Lexical Environment.

What is Lexical Environment?

A lexical environment consists of 2 things:

1. Local Memory Space
2. A reference to the Lexical Environment of parent

Local Memory Space means the memory space (where variables are stored) of a function or global scope if you are outside of any function. Reference means it has access to the lexical environment of the parent.

Let's understand it with some simple examples.

Example 1

var x = 10;

function printX() {
  console.log(x);
}

printX();

// Output
10

Here, we created a variable x and assigned 10 to it then we are calling a function that prints the value of x. Now, when we call the function it outputs 10 but we don't actually have x inside the function, we have it in the global scope. How does it access x from the global scope?

The answer is simple, it's because of the lexical environment.

When we try to print x inside of the function, the javascript engine tries to find it in the lexical environment of the function which consists of local memory and a reference to the lexical environment of the parent. When it fails to find it in the local memory of function then it will move to the lexical environment of the parent (global scope in this case) using the reference. Which again consists of local memory and a reference to the lexical environment of its parent. The engine will find x in the memory of the global scope and will print it.

Example 2

function createX() {
  var x = 10;
}
createX();
console.log(x);

Uncaught ReferenceError: x is not defined

We get an error, but why?
When we try to access x in the global scope, the javascript engine tries to find it in the lexical environment. X is not defined in the memory space of global scope (it is actually in the local memory space of createX). So it moves to the lexical environment of its parent. We don't have any parent of global scope, so it means x does not exist. That's why we get that error.

Example 3

var x = 10;

function outer() {
  function inner() {
    console.log(x);
  }
  inner();
}

outer();

// Output
10

Here we have an outer function and then an inner function inside of it which tries to access x. When we call inner, the javascript engine tries to find x in its lexical environment. It fails to find it in the local memory space of inner, so using the reference to the lexical environment of the parent, it moves to the lexical environment of outer, still, x is not in the local memory space of outer, again using the reference, the engine moves to the lexical environment of its parent (global scope). And there we have x in the memory. So it prints the value x in the console.

Scope Chain

The way Javascript Engine moves from one lexical environment to another to find the variable is called scope chain.

Helpful Resources

• https://youtu.be/uH-tVP8MUs8
• https://amnsingh.medium.com/lexical-environment-the-hidden-part-to-understand-closures-71d60efac0e0
• https://dev.to/abdulazizcode/scope-lexical-environment-4pdd

Lottie is a JSON-file format for adding animations to your web and mobile applications. Lottie animations are eye-catching and can communicate messages more effectively than images and text. They make the overall user experience a lot more enjoyable. Lottie animations work on the web, iOS, Android, Windows, and React Native, so no matter what device or browser your audience uses, they'll be able to view them.
Examples:

LottieFiles

LottieFiles is an amazing website where you will find tons of free animations created by designers. And we'll be using their animations for our project. Head over to this page where you will find all the amazing animations. Pick any animation. For our purpose, we'll be using this one:

Below you will find the ''Lottie Animation URL". This is the URL of the JSON file of this animation. Copy it. But how can we use it?

Using Lottie Animations

LottiFiles has an npm package named as @lottiefiles/lottie-player. You can either import it from CDN or can install it.

CDN

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/tgs-player.js"></script>

NPM

npm i @lottiefiles/lottie-player

import "@lottiefiles/lottie-player";

Usage

Add the element lottie-player and set the src property to a URL pointing to the JSON file which you copied earlier.

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" ></lottie-player>

It accepts some other properties as well which you can use to control the behaviour of the animation:

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" autoplay loop controls background="transparent" speed="1" ></lottie-player>

You can play around with these properties here.
That's it!

Authentication

Handling authentication and authorization in your next.js app can be a bit tricky. There are so many options when it comes to adding auth like NextAuth, Auth0, Firebase, etc. And these are pretty easy to start with. But sometimes you might need to build your own authentication feature to suit our web app needs rather than using these pre-built solutions. So in this article, we'll be building our own authentication feature using jwt, cookies, and mongodb.

Let's Get Started

First, you need to have node.js installed on your machine. You can get it from their official website. Next, create an empty next.js project by running the following command:

npx create-next-app next-custom-auth --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Now we need the following packages for our app:

• axios

• cookies-next

• jsonwebtoken

• mongoose

Install the packages:

npm i axios cookies-next jsonwebtoken mongoose

Setting Up MongoDB

Create a '.env.local' file in the root of your project and add the environment variable for mongodb uri.

Now create a 'lib' folder in the root of your project, inside of that create a 'dbConnect.js'. Add the following code in it:

// lib/dbConnect.js

import mongoose from "mongoose";

async function dbConnect() {
  return await mongoose.connect(process.env.MONGODB_URI);
}

export default dbConnect;

Here, we're creating an asynchronous function that uses mongoose to connect to the MongoDB database. We will call this function whenever we need to perform database operations.

Building the UI

Now let's build the UI for the home, signup, and signin page.

Layout Component

Create a 'components' directory in the root of the project and then add a 'Layout.js' file.

// components/Layout.js

import Link from "next/link";

export default function Layout({ children }) {
  return (
    <>
      <nav>
        <Link href="/">
          <a>Home Page</a>
        </Link>

        <Link href="/signup">
          <a>SignUp</a>
        </Link>

        <Link href="/signin">
          <a>SignIn</a>
        </Link>
      </nav>

      <section>{children}</section>
    </>
  );
}

We will use this component for all of our pages. It adds a navigation bar and renders its children.

Home Page

Inside of your 'index.js' file in the pages directory add the following code:

// pages/index.js

import Layout from "../components/Layout";

export default function HomePage(props) {

  const signoutHandler = () => {
      // logic for signout
  };

  return (
    <Layout>
      <h1>Home Page</h1>
      <p>
        This is the home page and it is protected. Only authenticated users can
        access this page.
      </p>

      <p>
        <strong>Name</strong>: name
      </p>
      <p>
        <strong>Email</strong>: email
      </p>

      <button onClick={signoutHandler}>Sign out</button>
    </Layout>
  );
}

It will look like this:

SignUp Page

Create a 'signup.js' file in the 'pages' directory and add the following code:

// pages/signup.js

import Layout from "../components/Layout";
import { useState } from "react";

export default function SignupPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signupHandler = async (e) => {
    e.preventDefault();
    // signup logic
  };

  return (
    <Layout>
      <h1>SignUp</h1>

      <p>Only unauthenticated users can access this page.</p>

      <form onSubmit={signupHandler}>
        <input
          type="text"
          placeholder="Name"
          onChange={(e) => setName(e.target.value)}
          value={name}
        />
        <input
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          value={email}
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
        <button>SignUp</button>
      </form>
    </Layout>
  );
}

It will look like this:

SignIn Page

Create a 'signin.js' file in the pages directory and add the following code:

// pages/signin.js

import Layout from "../components/Layout";
import { useState } from "react";

export default function SigninPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signinHandler = async (e) => {
    e.preventDefault();
    // Signin logic
  };

  return (
    <Layout>
      <h1>SignIn</h1>

      <p>Only unauthenticated users can access this page.</p>

      <form onSubmit={signinHandler}>
        <input
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          value={email}
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
        <button>SignIn</button>
      </form>
    </Layout>
  );
}

It will look like this:

I've added some CSS but I'm not going to show it here because styling isn't the focus of this article.

Creating the User Model

Create a 'models' directory at the root of the project. Inside, add a 'user.js' file and add the following code:

// models/user.js

import mongoose from "mongoose";

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String,
});

export default mongoose.models.User || mongoose.model("User", UserSchema);

Here, we're creating a User schema using mongoose. It has the name, email, and password properties. Finally, we're creating a model and exporting it.

Building the API

Now we will work on the API. To begin, first, let's create a directory name 'api' in the 'pages' directory where we will add all of our endpoints.

Signup Endpoint

Create a 'signup.js' file in the 'api' directory and add the following code:

// pages/api/signup.js

import dbConnect from "../../lib/dbConnect";
import User from "../../models/user";
import jwt from "jsonwebtoken";
import { setCookies } from "cookies-next";

export default async function handler(req, res) {
  await dbConnect();

  const { name, email, password } = req.body;

  if (req.method === "POST") {
    const userExist = await User.findOne({ email });

    if (userExist)
      return res.status(422).json({ message: "Email already in use!" });

    const user = new User({ name, email, password });
    await user.save();

    const token = jwt.sign({ userId: user._id }, process.env.TOKEN_SECRET, {
      expiresIn: "1d",
    });

    setCookies("token", token, {
      req,
      res,
      maxAge: 60 * 60 * 24, // 1 day
      path: "/",
    });

    res.status(201).json(user);
  } else {
    res.status(424).json({ message: "Invalid method!" });
  }
}

Here, we created a handler function. Inside, we're using the dbConnect function to connect the database and destructed the properties from req.body. After that, we're only accepting POST requests. Then, we're validating the email and saving the user. We're creating a jsonwebtoken and storing it in a cookie using the setCookies method. The maxAge means it will expire after 24 hours. Make sure to add the TOKEN_SECRET in your .env.local file that you can use for creating jwts.

You can learn more about cookies-next from here.

SignIn Endpoint

Create a 'signin.js' file in the 'api' directory and add the following code:

// pages/api/signin.js

import dbConnect from "../../lib/dbConnect";
import User from "../../models/user";
import jwt from "jsonwebtoken";
import { setCookies } from "cookies-next";

export default async function handler(req, res) {
  await dbConnect();

  const { email, password } = req.body;

  if (req.method === "POST") {
    const user = await User.findOne({ email, password });

    if (!user)
      return res.status(422).json({ message: "Wrong email or password!" });

    const token = jwt.sign({ userId: user._id }, process.env.TOKEN_SECRET, {
      expiresIn: "1d",
    });

    setCookies("token", token, {
      req,
      res,
      maxAge: 60 * 60 * 24, // 1 day
      path: "/",
    });

    res.status(200).json(user);
  } else {
    res.status(424).json({ message: "Invalid method!" });
  }
}

It is very similar to the signup endpoint. Here, we're accepting the email and password of a user and validating it before letting the user to signin.

Connecting the API with Frontend

Now head over to the 'signup.js' file in the 'pages' directory and add the following code in the signupHandler function:

// pages/signup.js

const signupHandler = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post("/api/signup", {
        name,
        email,
        password,
      });

      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

Here we're using axios to send an HTTP request to the signup endpoint along with the name, email, and password of the user. Once the user signs up, we're redirecting to the home page using the router object provided by next.js.

You can import router and axios like so:

import axios from "axios";
import { useRouter } from "next/router";

// inside of the component
const router = useRouter();

Now head over to the 'signin.js' file in the 'pages' directory and add the following code in the signinHandler function:

// pages/signin.js

 const signinHandler = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post("/api/signin", {
        email,
        password,
      });

      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

Here we're sending an HTTP request to the signin endpoint along with the email and password of the user. Once the user signs in, we're redirecting to the home page.

Now open the 'index.js' file in the 'pages' directory and add this code in signoutHandler function:

// pages/index.js

const signoutHandler = () => {
    removeCookies("token");
    router.push("/signin");
  };

It removes the 'token' cookie to signout the user.

Fetching User Data

Now we need to verify whether the user is signed in or not to restrict the home page from being accessed by an unauthenticated user.

Create a file 'getUser.js' in the 'lib' directory and add the following code:

// lib/getUser.js

import { getCookie } from "cookies-next";
import jwt from "jsonwebtoken";
import User from "../models/user";

export default async function getUser(req, res) {
  const token = getCookie("token", { req, res });

  try {
    const data = jwt.verify(token, process.env.TOKEN_SECRET);
    let user = await User.findById(data.userId);
    user = JSON.parse(JSON.stringify(user));
    return user;
  } catch (error) {
    return null;
  }
}

We will use the getUser function to verify the user. It takes in the req and res object and fetches the cookie. Then it verifies the token using the jwt.verify method. Then it fetches the user from the database using its id.
Remember, we stored the user's id in the token early in our article.
Then there's some serializing and parsing. What's that? Here, we're serializing and parsing the user document, it's because the _id of a document is of type ObjectId and we need to convert it into a string. You can avoid it and run the code to see what's going to happen. After that, we finally returned the user. If we don't have any user we will simply return null.

Now add this code in the 'index.js' file in your 'pages' directory:

// pages/index.js

export async function getServerSideProps({ req, res }) {
  await dbConnect();
  const user = await getUser(req, res);
  if (!user) {
    return {
      redirect: {
        permanent: false,
        destination: "/signin",
      },
      props: {},
    };
  }
  return {
    props: {
      user,
    },
  };
}

Here we're using server-side rendering to fetch the user data. If there's no user, we'll simply redirect to the 'signin' page otherwise we're good to go. You can the user data that we're returning as props in your component.

Now we need to make sure that only unauthenticated users can access the signin and signup pages. For both of the pages add the following code:

// pages/signup.js and pages/signin.js

export async function getServerSideProps({ req, res }) {
  await dbConnect();

  const user = await getUser(req, res);
  if (user) {
    return {
      redirect: {
        permanent: false,
        destination: "/",
      },
      props: {},
    };
  }
  return {
    props: {},
  };
}

If the user is available we will redirect to the home page.
That's it!

Conclusion

Adding authentication from scratch can be a bit spiny but you can go through this article to quickly understand how to do it. One thing which we missed was password hashing. You can do that by using the bcrypt package. The main goal was to build using jwt, cookies, and mongodb.

Here's the:
Live version of the app.
Source code.

Follow me on twitter.