Real world applications aren’t just about showing data on a screen. They solve real problems, work with real users, and handle situations that don’t always go as planned. This is where many developers struggle.

When I review junior developers’ résumés, I notice a common pattern: the projects section is often filled with beginner apps that look very similar. In today’s job market, this is usually not enough. Employers want to see that you can build something useful, something people would actually use.

The goal of this article is to help you move past simple Hello World projects like todo apps, calculators, and basic CRUD applications. By the end, you’ll understand how to approach building real applications that solve real problems and feel closer to what is built in the real world.

You might be wondering why you should listen to me.

Over the last 10 years, I’ve spent a lot of time building, breaking, and rebuilding software. I have experimented, failed many times, and eventually built applications that thousands of people use every day. A few weeks ago, I launched one of my own SaaS products and watched real users use it at scale, with over a thousand active users during peak hours, without the system crashing.

I’m sharing this because I’ve been where you are now.

If you continue reading, you will:

• Learn from real experience building applications used by real users

• Learn what not to do, based on years of mistakes and lessons

• Learn what actually works and what helps you stand out as a junior developer

• Clear up common misconceptions that slow people down

This article is not about theory. It’s about building real things.

To drive this point home, we’ll build a real world application that solves a real problem and is used by real people. Along the way, you’ll learn how to come up with real application ideas, how to build them with simple tools, and how to serve them to many users.

If this sounds like something you’re up for, then let’s get started.

Table of Contents

1. You Probably Think You Don’t Know Enough

2. How to Find Real World Application Ideas

3. What Are We Going to Build

4. Prerequisites

5. Step 1: Setting Up the Backend

6. Step 2: Adding Background Removal to the Backend

7. Step 3: Building the Frontend

   • Running and Testing the Application Locally

8. Step 4: Putting the Backend on the Internet

   • Deploying the Backend on Cloud Run

   • Updating the Frontend to Use the Live Backend

9. Step 5: Making the Backend and Frontend Work Together CORS

10. Step 6: Putting the Frontend on the Internet

11. Final Thoughts What You Just Built Matters

You Probably Think You Don't Know Enough

Before we begin, I want to clear up the most common misconception beginners have.

Many developers believe they don’t know enough to start building real world applications. They think they need to learn more JavaScript, more Python, or another framework before they are ready. Some even think learning React is the final step that will suddenly make everything click.

This belief is very common, but it’s not true.

If you know how to write HTML, CSS, and a simple loop or function in any programming language, you already have most of what it takes to build a real world application. This tutorial is proof of that.

That’s why I am writing this article. Not to tell you to learn more first, but to show you how far you can go with what you already know.

How to Find Real World Application Ideas

One question beginners ask a lot is, “What kind of apps should I build?”

This is rarely talked about, but it matters more than most people think.

A simple rule is this: build things that already exist.

Look at the apps you use every day, especially the simple ones. Tools that do one thing well. If you find yourself using an app often, that app is solving a real problem.

For example, people use background removers to clean up images. They use URL shorteners to share links. They use notes apps to save quick thoughts. None of these ideas are new, but they are real.

You don’t need to invent something original. You need to understand a problem and build a working solution for it.

When you replicate real tools, you naturally learn how real applications are structured. You also end up with projects that make sense on a résumé, because they solve problems people recognize.

That’s exactly what we are going to do in this tutorial.

What Are We Going to Build?

I’ll tell you now, it is not going to be another Hello World application. We’re going to be building a background remover web application.

This is the kind of tool people actually use. Designers use it for images, content creators use it for thumbnails, and developers build similar features into real products. It works with real files, real data, and real results.

If you want to see the final result before we start building, you can try the working app here: https://iamspruce.github.io/background-remover/

We’ll build this app using simple tools on purpose. Plain HTML, CSS, and JavaScript for the frontend, and Python for the backend. No heavy frameworks and no complicated setup.

Before we continue, let me clear up another common misconception.

Many developers believe that for an application to be taken seriously, it must be built with complex frameworks. In my experience building applications for clients around the world over the last 10 years, not a single client has ever asked me what framework I used.

They only cared about one thing: Did it work, and did it solve their problem?

Users won’t care how your app is built. They care that it works. If HTML, CSS, and JavaScript can solve the problem, there’s no reason to wait months just to learn a new framework.

Now that we understand why we’re building this app and what problem it solves, it’s time to start writing code.

Prerequisites

Before we start writing code, let’s quickly talk about what you need.

This tutorial is not for absolute beginners, but it’s also not super advanced. If you’ve built small things before and you want to build something that actually feels real, you’re in the right place.

What You Should Already Know

You should be comfortable with:

• Basic HTML: You know what inputs, buttons, images, and divs do.

• Basic CSS: You can style a page and make it look presentable.

• Basic JavaScript: You know how to listen for a button click and send a request using fetch.

That’s enough to follow along.

You don’t need React or any other frontend framework.

Backend Knowledge

For the backend, you don’t need to be a Python expert.

You just need to understand that:

• Python can run a server

• A server can receive requests

• A server can send back responses

Everything else will be explained as we go.

Tools You Need

Make sure you have these installed:

• Python 3.9 or newer

• Git

• A code editor like VS Code

• A browser

No Docker knowledge or cloud experience required.

GitHub Account (Important)

We’ll deploy the backend directly from GitHub, so you’ll need a GitHub account.

If you’ve never pushed a project to GitHub or hosted one before, I’ve already written a beginner-friendly guide you can follow first.

Read that article, then come back here.

A Quick Mindset Check

This is not a copy-paste tutorial. You will see real errors. Things may break. That’s normal. That’s how real applications are built.

Now that we’re clear on what you need, let’s start writing code.

We’ll begin with the backend. This is an important decision, so let’s explain it properly.

Step 1: Setting Up the Backend

What Is a Backend and Why Do We Need One?

A backend is a program that runs on a server and does the heavy work for an application.

In our case, the heavy work is image processing. Removing a background from an image requires libraries that can’t run inside the browser. Browsers are designed for safety and user interaction, not for this kind of processing.

That’s why we need a backend.

The backend will:

• Receive an image from the user

• Remove the background

• Send the processed image back

The frontend will simply talk to this backend later.

Keeping Things Simple on Purpose

Because this might be your first real project, we’re going to keep the backend as simple as possible.

• One programming language (Python)

• One backend file

• No complex folder structure

• No advanced concepts

This is intentional. Real world applications don’t have to start out complex. They typically start small and grow.

Project Structure

Create a new folder called:

background-remover

Inside it, create a folder for the backend:

background-remover/
  backend/

Move into the backend folder:

cd background-remover/backend

Now create a virtual environment:

python -m venv env

A virtual environment keeps this project’s dependencies separate from everything else on your computer. This is standard practice and something you’ll see in real projects.

Now activate it:

macOS or Linux:

source env/bin/activate

Windows:

env\Scripts\activate

Now create a folder for your application code:

mkdir api

Your structure should now look like this:

background-remover/
  backend/
    env/
    api/

At this stage, nothing looks impressive yet. That’s normal.

Installing FastAPI

We’ll use FastAPI to build the backend API.

Install it together with Uvicorn, which is the server that runs our app:

pip install fastapi uvicorn

FastAPI allows us to define endpoints clearly and with very little code, which is perfect for us.

Creating the First Backend File

Inside the api folder, create a file called main.py.

Add the following code:

from fastapi import FastAPI

app = FastAPI()

@app.get("/health")
def health():
    return {"status": "ok"}

Let’s pause and understand what this does.

• We created a FastAPI application

• We added a /health endpoint

• This endpoint simply returns a message

Before building real features, developers always confirm that their server actually runs. That is exactly what this endpoint is for.

Running the Server

From inside the backend folder, start the server:

uvicorn api.main:app --reload

Now open a new terminal and run:

curl http://localhost:8000/health

You should see:

{"status":"ok"}

This is an important moment.

You now have:

• A running backend server

• A real HTTP endpoint

• A response coming from your own code

This is how real backend services start.

Why We Did This First

At this point, you might wonder why we didn’t jump straight into background removal.

The reason is simple: if the server doesn’t run, nothing else matters.

By starting with a health endpoint, we removed uncertainty. We know the server works. Everything we add next is built on top of something we already know is working.

Now that the foundation is in place, we can move on to the real feature.

Step 2: Adding Background Removal to the Backend

Before we write any code here, we need to clear up an important misconception.

A Common Misconception About Machine Learning

When people hear “background removal,” they often think machine learning is too advanced for them.

In real world development, this is almost never how it works.

You aren’t expected to build machine learning models yourself. You use libraries created by others and focus on integrating them correctly.

That is exactly what we’re doing here.

Installing the Background Removal Library

Install the required packages:

pip install rembg pillow onnxruntime

• rembg handles the background removal

• pillow helps us work with images

For our purposes here, you don’t need to understand how these libraries work internally. You only need to know how to use them.

Adding the Background Removal Endpoint

Now update main.py so it looks like this:

from fastapi import FastAPI, UploadFile, File
from rembg import remove
from PIL import Image
import io

app = FastAPI()

@app.get("/health")
def health():
    return {"status": "ok"}

@app.post("/remove-bg")
async def remove_bg(file: UploadFile = File(...)):
    image_bytes = await file.read()
    image = Image.open(io.BytesIO(image_bytes))

    output = remove(image)

    buffer = io.BytesIO()
    output.save(buffer, format="PNG")
    buffer.seek(0)

    return buffer.getvalue()

Let’s explain this carefully.

• The endpoint accepts an uploaded image

• The image is read into memory

• The background is removed

• The result is saved as a PNG with transparency

• The image is returned to the client

This endpoint is the core of our application.

Testing the Endpoint With curl

Before building the frontend, we’ll test the backend directly.

Run this command:

curl -X POST \
  -F "file=@person.jpg" \
  http://localhost:8000/remove-bg \
  --output result.png

Open result.png. If you see the background removed, then the backend is complete.

At this point, you have built a backend that:

• Accepts real user input

• Processes real data

• Returns a meaningful result

This is a real backend.

Where We Are Now

Let’s pause and summarize:

• We set up a backend server

• We confirmed that it runs

• We added a real feature

• We tested it without a frontend

This is exactly how real developers work.

In the next section, we’ll build a simple frontend that talks to this backend and turns it into something users can interact with.

Step 3: Building the Frontend (What the User Actually Sees)

At this point, our backend is working.

It can receive an image, remove the background, and send the result back. But right now, only developers can use it, because it requires terminal commands.

To make this useful to actual (non-technical) people, we need a frontend.

The frontend is simply the part of the application users see and interact with in their browser.

Clearing a Common Misconception About Frontends

Many beginners think building a frontend means learning a framework first.

This is not true.

Frameworks help later, but they aren’t required to build real applications. Under the hood, every frontend still comes down to HTML, CSS, and JavaScript.

That’s why we are using plain HTML, CSS, and JavaScript here. No React, no build tools, no setup. Just the basics.

What Our Frontend Will Do

Our frontend has one job. It will:

• Let the user select an image

• Send that image to the backend

• Receive the processed image

• Show it on the screen

• Allow the user to download it

That’s all.

If it does these things correctly, it’s a real frontend.

Creating the Frontend

Go back to the root of your project and create three files:

index.html
styles.css
app.js

This simple setup is very common. Each file has a clear responsibility, which makes the code easier to understand.

Writing the HTML Page

Open index.html and add the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Background Remover</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Background Remover</h1>

    <input type="file" id="imageInput" />
    <button id="removeBtn">Remove Background</button>

    <div class="result">
      <img id="resultImage" />
    </div>

    <a id="downloadLink" download>Download Image</a>

    <script src="app.js"></script>
  </body>
</html>

Right now, this page won’t do anything interesting. That’s expected.

HTML only describes what should be on the page. The behavior comes from JavaScript, which we’ll add after we add some styling.

Adding Some Basic Styling

Open styles.css and add this:

body {
  font-family: sans-serif;
  max-width: 600px;
  margin: 40px auto;
}

button {
  margin-top: 10px;
}

.result {
  margin-top: 20px;
}

img {
  max-width: 100%;
}

#downloadLink {
  display: none;
  margin-top: 10px;
}

This is not about making things look fancy.

The goal here is simply to make the page readable and pleasant to use. Many real internal tools look no better than this. (And you can always improve the styling later if you want.)

Connecting the Frontend to the Backend

Now we’ll write the JavaScript that makes everything work.

Open app.js and add the following code:

const imageInput = document.getElementById("imageInput");
const removeBtn = document.getElementById("removeBtn");
const resultImage = document.getElementById("resultImage");
const downloadLink = document.getElementById("downloadLink");

removeBtn.addEventListener("click", async () => {
  const file = imageInput.files[0];

  if (!file) {
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  const response = await fetch("http://localhost:8000/remove-bg", {
    method: "POST",
    body: formData,
  });

  const blob = await response.blob();
  const imageUrl = URL.createObjectURL(blob);

  resultImage.src = imageUrl;
  downloadLink.href = imageUrl;
  downloadLink.style.display = "inline";
});

Let’s slow down and explain what’s happening here:

• We read the image selected by the user

• We wrap it in FormData so it can be sent to the backend

• We send it to our /remove-bg endpoint

• We receive the processed image back

• We display it and prepare it for download

This is the moment where the frontend and backend finally talk to each other.

Running the Frontend With Live Server

Before testing, make sure your backend is still running.

Now, instead of opening index.html directly, use the Live Server extension in VS Code.

If you don’t have it installed, just open VS Code extensions, search for “Live Server”, and then install it. Then right click on index.html and click “Open with Live Server”.

This starts a small local server for the frontend.

Why does this matter?

Many browser features work better when files are served through a server instead of opened directly from the file system. Using Live Server also matches how real frontends are served.

Testing the Full Application Locally

Now choose an image and click the button.

If everything is working:

• The image is sent to the backend

• The background is removed

• The result appears on the page

• The download link shows up

Take a moment here. You have just built:

• A backend that processes real data

• A frontend that talks to it

• A complete application running locally

This is already more than a “Hello World” project.

Clearing One More Misconception

Some beginners look at this and think: “This feels too simple to be a real app.”

This is another misconception. Real applications aren’t defined by complexity. They’re defined by usefulness. If your app solves a real problem and people can use it, it’s a real application.

In the next section, we’ll take this exact app and put it on the internet so anyone can use it.

Step 4: Putting the Backend on the Internet

Right now, your backend is running on your computer.

That means:

• It works only for you

• If you close your laptop, it stops

• If someone opens your frontend, it cannot reach your backend

To fix this, we need to run the backend on a computer that is always online.

This process is called deployment.

A Simple Way to Think About Deployment

Deployment does not mean writing new code.

It simply means this: instead of running your backend on your laptop, you run it on another computer that never sleeps.

Everything we do next exists only to make that happen.

Why We Aren’t Using Netlify or Vercel

You might be wondering why we aren’t using Netlify or Vercel. Those platforms are great, but they’re mainly for frontends.

They work best when your app is:

• Static HTML, CSS, and JavaScript

• A frontend framework like React or Vue

• Small serverless functions

Our backend is different. It’s a Python server that:

• Stays running

• Accepts image uploads

• Processes images

• Uses heavy native libraries for background removal

This kind of backend needs a real server, not a lightweight serverless function.

That’s why Netlify and Vercel aren’t a good fit here.

Why We’re Using Cloud Run

Instead, we’re using Cloud Run.

Cloud Run lets us run real backend servers on Google’s infrastructure without managing servers ourselves.

We’re using it because:

• It supports full Python backends

• It deploys directly from GitHub

• It handles scaling and servers for us

• It works well with heavy workloads

• It’s beginner-friendly

Most importantly, it lets you deploy a real backend without learning cloud commands or CI/CD pipelines.

Preparing the Backend for Cloud Run

Before deploying, we need to make sure our backend is ready.

Creating requirements.txt

Inside the backend folder, create a file called requirements.txt.

Add this:

fastapi
uvicorn
rembg
pillow
onnxruntime

This file tells Cloud Run which Python libraries to install.

Creating a GitHub Repository

Cloud Run deploys directly from GitHub, so our code must live there.

From the project root, run:

git init
git add .
git commit -m "Initial background remover project"
git branch -M main
git remote add origin YOUR_REPO_URL
git push -u origin main

This single repository will be used for both backend and frontend.

Deploying the Backend on Cloud Run

Now open your browser and go to Google Cloud Console.

1. Create a New Project

Open Google Cloud Console and click New Project. Give it a name (for example: background-remover) and then click Create.

2. Open Cloud Run

Use the search bar at the top and search for Cloud Run. Then open it.

Cloud Run will automatically enable the required APIs.

You will be asked to set up billing. Google gives you $300 free credit, which is more than enough for this tutorial.

3. Start Creating the Service

Click Create Service and choose Deploy continuously from a repository.

4. Connect Your GitHub Account

Select GitHub as the repository provider and authenticate your GitHub account. Then install Google Cloud Build on your GitHub account. Choose only the repository you want to deploy.

This allows Google Cloud to build and deploy your code automatically.

5. Select the Repository

Then choose the repository you just installed Cloud Build on and select the main branch.

6. Configure the Build

Now comes the important part: building the context directory.

Set this to:

backend

This tells Cloud Run:

“My backend code lives inside the backend folder.”

For the entry command, enter:

uvicorn api.main:app --host 0.0.0.0 --port 8080

This is how Cloud Run starts your FastAPI server.

7. Configure Container Resources

Our backend runs a background-removal model, which is heavy.

So we must increase resources.

• Change memory from 512 MB → 2 GB

• Set CPU to 4

This ensures the model can load and run properly.

8. Deploy

Now click Create.

Cloud Run will:

• Build your app

• Install dependencies

• Create a container

• Deploy it to the internet

You’ll see logs showing the build and deployment process.

This can take a few minutes. That’s normal.

Checking That the Backend Is Live

Once deployment finishes, Cloud Run will show you a public URL.

Test it:

curl https://YOUR_CLOUD_RUN_URL/health

If you see:

{"status":"ok"}

Your backend is officially live on the internet.

Pause here for a second.

You just deployed a real backend. Congratulations.

Updating the Frontend to Use the Live Backend

Open app.js.

Replace:

http://localhost:8000/remove-bg

With:

https://YOUR_CLOUD_RUN_URL/remove-bg

Save the file and reload the frontend.

Step 5: Making the Backend and Frontend Work Together

At this point, we have two things:

• A backend running on the internet

• A frontend running in the browser

Now we want them to talk to each other.

Open your frontend, select an image, and click the button. You’ll notice that it still doesn’t work. This is expected.

What Is Happening Here?

Your frontend is running on one address, while your backend is running on another address.

Browsers are very strict about this. By default, a browser will block requests from one website to another unless the backend explicitly allows it. This is a security feature.

This rule is called CORS.

Clearing a Common Misconception About CORS

When beginners see a CORS error, they often think something is broken.

Nothing is broken. CORS is simply the browser saying: “I need the backend to confirm that this frontend is allowed to talk to it.”

So all we need to do is tell the backend: “It’s okay for requests to come from my frontend.”

Allowing Only Our Frontend (Not Everyone)

Instead of allowing requests from everywhere, we’ll allow requests only from our frontend. This is a good habit to learn early.

Open backend/api/main.py.

Add this import at the top:

from fastapi.middleware.cors import CORSMiddleware

Then, after creating the FastAPI app, add this:

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://127.0.0.1:5500",
        "http://localhost:5500"
    ],
    allow_methods=["POST"],
    allow_headers=["*"],
)

Why these URLs?

If you’re using the Live Server extension, your frontend is usually served on port 5500. These are the addresses your browser is using locally.

We’re telling the backend: “Only accept requests from this frontend.”

That is exactly what we want.

Redeploying the Backend

Any time you change backend code, you need to redeploy it.

Since our backend is deployed on Cloud Run and set up with automatic deploy, redeploying is simple, all you need to do is push your changes.

From the project root, run:

git add .
git commit -m "Add CORS configuration"
git push

Cloud Run will automatically detect the change and redeploy your backend.

Wait for the deployment to finish. Once it’s done, your backend will now allow requests from your local frontend.

Testing Again

Reload your frontend in the browser.

Select an image and click the button. This time, it should work.

You just handled a real browser security rule that every production app runs into. That alone is a huge learning step.

Step 6: Putting the Frontend on the Internet (GitHub Pages)

Right now, your frontend works only on your computer.

Just like the backend earlier, this means no one else can use it.

Let’s fix that.

Why GitHub Pages?

Our frontend is:

• Just HTML, CSS, and JavaScript

• No backend code

• No build step

This makes it perfect for GitHub Pages. GitHub Pages can host static sites for free, and it’s very beginner friendly.

Preparing the Frontend for Deployment

Make sure all your frontend files are inside the frontend folder:

frontend/
  index.html
  styles.css
  app.js

Open app.js and make sure the backend URL is the Cloud Run URL, not localhost.

fetch("https://YOUR_CLOUD_RUN_URL/remove-bg", {
  method: "POST",
  body: formData,
});

Save the file.

Pushing the Frontend to GitHub

We already created a GitHub repository earlier, so we’ll reuse it.

From the project root, run:

git add .
git commit -m "Add frontend and prepare for GitHub Pages"
git push

Enabling GitHub Pages

1. Go to your repository on GitHub.

2. Open Settings.

3. Click Pages.

Under Source, select:

1. Branch: main

2. Folder: /(root)

Save everything. After a few seconds, GitHub will give you a URL. This URL is now your frontend on the internet.

Updating CORS for the Live Frontend

Now that the frontend is live, go back to backend/api/main.py.

Replace the local origins with your GitHub Pages URL:

allow_origins=[
    "https://YOUR_GITHUB_USERNAME.github.io"
]

Commit and push the change:

git add .
git commit -m "Update CORS for GitHub Pages"
git push

Cloud Run will redeploy the backend automatically.

Final Test

Open your GitHub Pages URL.

Upload an image, remove the background, and download the result.

Everything is now live.

Where You Are Now

Let’s be very clear about what you just did.

You:

• Built a real backend

• Deployed it to the internet

• Built a frontend

• Deployed it to the internet

• Fixed real production issues

• Connected everything properly

This is not a demo project. This is a real application.

In the final section, we’ll wrap things up, talk about what you learned, and where you can go next.

Final Thoughts: What You Just Built Matters

At this point, it is worth stopping and looking back at what you have actually done.

You didn’t just follow steps. You didn’t just copy code. You built a real application.

Let’s Be Clear About What You Accomplished

You started with nothing more than basic tools and ideas.

By the end of this tutorial, you:

• Built a backend that processes real data

• Used a machine learning tool without fear or overthinking

• Exposed a backend to the internet

• Built a frontend with plain HTML, CSS, and JavaScript

• Connected the frontend and backend properly

• Deployed both parts so real users can access them

This is exactly how real applications are built, just at a smaller and more manageable scale.

Why This Is No Longer a “Beginner Project”

Many projects are called beginner projects, but they stop at showing things on a screen.

This one does not.

Your app:

• Accepts real input

• Performs real work

• Runs on real servers

• Handles real browser rules

• Can be shared with anyone

That is the difference between learning syntax and building software.

The Most Important Lesson in This Tutorial

The most important thing you should take away from this is not the project you built.

It is this: You didn’t need to “know more” before you started.

You learned by building. You figured things out as they appeared. You fixed problems when they showed up.

That is how experience is gained. No one has experience before building real applications. No one lacks experience after building many of them.

What You Can Do Next

This project isn’t the end. It’s a starting point.

Here are a few ideas you can explore next, using what you already know:

• Improve the user interface

• Add loading states and better feedback

• Restrict image size or file types

• Add simple rate limiting

• Build another small tool that solves a real problem

You don’t need to jump to frameworks yet.

If you can build a few more projects like this, frameworks will make a lot more sense when you meet them.

One Last Thought

If this was your first real project, you should be proud of yourself.

You moved past tutorials, built something useful, and put it on the internet. That’s the line many developers never cross.

Now that you have crossed it, the next one will be easier.

So keep building!

Source Code and Live Demo

If you want to explore the full project or build on top of it, you can find everything here.

• Live application: https://iamspruce.github.io/background-remover/

• GitHub repository: https://github.com/iamspruce/background-remover

If you have questions, reach me on X at @sprucekhalifa. I write practical tech articles like this regularly.

So I decided to change the format instead of giving up. I took a few tech blogs I already enjoy reading, picked the best articles, converted them to audio using my own voice, and turned the result into a private podcast. Now I can stay up to date while walking, running, or driving.

In this tutorial, you’ll learn how to build a simplified version of that pipeline step by step.

Table of Contents

• What You Are Going to Build

• Prerequisites

• Project Overview

• Getting Started

• How to Get the Content

• How to Filter the Content

• How to Clean Up the Content

• How to Convert Content to Audio

• How to Upload the Audio to Cloudflare R2

• How to Make the Podcast

• How to Automate the Pipeline

• Conclusion

What You Are Going to Build

You will build a Node.js script that does the following:

• Fetches articles from RSS feeds.

• Extracts clean, readable text from each article.

• Filters out content you do not want to listen to.

• Cleans the text so it sounds good when spoken.

• Converts the text to natural-sounding audio using your own voice.

• Uploads the audio to Cloudflare R2.

• Generates a podcast RSS feed.

• Runs automatically on a schedule.

At the end, you will have a real podcast feed you can subscribe to on your phone.

If you want to skip the tutorial and jump straight into using the finished tool, you can find the complete version and instructions on GitHub.

Prerequisites

To follow along, you need basic JavaScript knowledge.

You also need:

• Node.js 22 or newer.

• A place to store audio files (Cloudflare R2 in this tutorial).

• A text-to-speech API (OrangeClone in this tutorial).

Project Overview

Before writing code, it helps to understand the idea clearly.

This project is a pipeline:

Fetch content -> Filter content -> Clean up content -> Convert to audio -> Repeat

Each step takes the output of the previous one. Keeping the flow linear makes the project easier to reason about, debug, and automate.

All code in this tutorial lives in a single file called index.js.

Getting Started

Create a new project folder and your main file.

mkdir podcast-pipeline
cd podcast-pipeline
touch index.js

Initialize the project and install dependencies.

npm init -y
npm install rss-parser @mozilla/readability jsdom node-fetch uuid xmlbuilder @aws-sdk/client-s3

Enable ESM so import syntax works in Node 22.

npm pkg set type=module

Here is what each dependency is used for:

• rss-parser reads RSS feeds.

• @mozilla/readability extracts readable article text.

• jsdom provides a DOM for Readability.

• node-fetch fetches remote content.

• uuid generates unique filenames.

• xmlbuilder creates the podcast RSS feed.

• @aws-sdk/client-s3 uploads audio to Cloudflare R2.

How to Get the Content

The first decision is where your content comes from.

Avoid scraping websites directly. Scraped HTML is noisy and inconsistent. RSS feeds are structured and reliable. Most serious blogs provide one.

Open index.js and define your sources.

import Parser from "rss-parser";
import fetch from "node-fetch";
import { JSDOM } from "jsdom";
import { Readability } from "@mozilla/readability";

const parser = new Parser();

const NUMBER_OF_ARTICLES_TO_FETCH = 15;

const SOURCES = [
  "https://www.freecodecamp.org/news/rss/",
  "https://hnrss.org/frontpage",
];

Now fetch articles and extract readable content.

async function fetchArticles() {
  const articles = [];

  for (const source of SOURCES) {
    const feed = await parser.parseURL(source);

    for (const item of feed.items.slice(0, NUMBER_OF_ARTICLES_TO_FETCH)) {
      if (!item.link) continue;

      const response = await fetch(item.link);
      const html = await response.text();

      const dom = new JSDOM(html, { url: item.link });
      const reader = new Readability(dom.window.document);
      const content = reader.parse();

      if (!content) continue;

      articles.push({
        title: item.title,
        link: item.link,
        content: content.content,
        text: content.textContent,
      });
    }
  }

  return articles.slice(0, NUMBER_OF_ARTICLES_TO_FETCH);
}

This function:

• Reads RSS feeds.

• Downloads each article.

• Extracts clean text using Readability.

• Returns a list of articles ready for processing.

How to Filter the Content

Not every article deserves your attention. Start by filtering out topics you do not want to hear about.

const BLOCKED_KEYWORDS = ["crypto", "nft", "giveaway"];

function filterByKeywords(articles) {
  return articles.filter(
    (article) =>
      !BLOCKED_KEYWORDS.some((keyword) =>
        article.text.toLowerCase().includes(keyword)
      )
  );
}

Next, remove promotional content.

function removePromotionalContent(articles) {
  return articles.filter(
    (article) => !article.text.toLowerCase().includes("sponsored")
  );
}

Finally, remove articles that are too short.

function filterByWordCount(articles, minWords = 700) {
  return articles.filter(
    (article) => article.text.split(/\s+/).length >= minWords
  );
}

After these steps, you are left with articles you actually want to listen to.

How to Clean Up the Content

Raw articles text still need to be cleaned up to sound good when spoken. First, replace images with spoken placeholders.

function replaceImages(html) {
  return html.replace(/<img[^>]*alt="([^"]*)"[^>]*>/gi, (_, alt) => {
    return alt ? `[Image: ${alt}]` : `[Image omitted]`;
  });
}

Next, remove code blocks.

function replaceCodeBlocks(html) {
  return html.replace(
    /<pre><code>[\s\S]*?<\/code><\/pre>/gi,
    "[Code example omitted]"
  );
}

Strip URLs and replace them with spoken text.

function replaceUrls(text) {
  return text.replace(/https?:\/\/\S+/gi, "link removed");
}

Normalize common symbols.

function normalizeSymbols(text) {
  return text
    .replace(/&/g, "and")
    .replace(/%/g, "percent")
    .replace(/\$/g, "dollar");
}

Convert HTML to text so TTS does not read tags.

function stripHtml(html) {
  return html.replace(/<[^>]+>/g, " ");
}

Combine everything into one cleanup step.

function cleanArticle(article) {
  let cleaned = replaceImages(article.content);
  cleaned = replaceCodeBlocks(cleaned);
  cleaned = stripHtml(cleaned);
  cleaned = replaceUrls(cleaned);
  cleaned = normalizeSymbols(cleaned);

  return {
    ...article,
    cleanedText: cleaned,
  };
}

At this point, the text is ready for audio generation.

How to Convert Content to Audio

Browser speech APIs sound robotic. I wanted something that sounded human and familiar. After trying several tools, I settled on OrangeClone. It was the only option that actually sounded like me.

Create a free account and copy your API key from the dashboard.

Record 10 to 15 seconds of clean audio and save it as SAMPLE_VOICE.wav in the project root. Then create a voice character (one-time setup).

import fs from "node:fs/promises";

const ORANGECLONE_API_KEY = process.env.ORANGECLONE_API_KEY;
const ORANGECLONE_BASE_URL =
  process.env.ORANGECLONE_BASE_URL || "https://orangeclone.com/api";

async function createVoiceCharacter({ name, avatarStyle, voiceSamplePath }) {
  const audioBuffer = await fs.readFile(voiceSamplePath);
  const audioBase64 = audioBuffer.toString("base64");

  const response = await fetch(
    `${ORANGECLONE_BASE_URL}/characters/create`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${ORANGECLONE_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        avatarStyle,
        voiceSample: {
          format: "wav",
          data: audioBase64,
        },
      }),
    }
  );

  if (!response.ok) {
    const errorText = await response.text();
    throw new Error(`Failed to create character: ${errorText}`);
  }

  const data = await response.json();

  return (
    data.data?.id ||
    data.data?.characterId ||
    data.id ||
    data.characterId
  );
}

Generate audio from text.

async function generateAudio(characterId, text) {
  const response = await fetch(`${ORANGECLONE_BASE_URL}/voices_clone`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${ORANGECLONE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      characterId,
      text,
    }),
  });

  return response.json();
}

Wait for the job to complete.

async function waitForAudio(jobId) {
  while (true) {
    const response = await fetch(`${ORANGECLONE_BASE_URL}/voices/${jobId}`);
    const data = await response.json();

    if (data.status === "completed") {
      return data.audioUrl;
    }

    await new Promise((r) => setTimeout(r, 5000));
  }
}

How to Upload the Audio to Cloudflare R2

OrangeClone returns an audio URL, but podcast apps need a stable, public file that will not expire.
That is where Cloudflare R2 comes in.

R2 is S3-compatible storage, which means we can upload files using the AWS SDK and serve them publicly for podcast apps.

How to Set Up Credentials

Create an R2 bucket in your Cloudflare dashboard and set the following environment variables:

• R2_ACCOUNT_ID

• R2_ACCESS_KEY_ID

• R2_SECRET_ACCESS_KEY

• R2_BUCKET_NAME

• R2_PUBLIC_URL

These values allow the script to upload files and generate public URLs for them.

How to Initialize the R2 Client

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const r2 = new S3Client({
  region: "auto",
  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
  },
});

This creates an S3-compatible client that connects directly to your Cloudflare R2 account instead of AWS.

How to Download the Audio

async function downloadAudio(audioUrl) {
  const response = await fetch(audioUrl);
  const buffer = await response.arrayBuffer();
  return Buffer.from(buffer);
}

OrangeClone gives us a URL, not a file.
This function downloads the audio and converts it into a Node.js buffer so it can be uploaded to R2.

How to Upload to R2

import { v4 as uuid } from "uuid";

async function uploadToR2(audioBuffer) {
  const fileName = `${uuid()}.mp3`;

  const command = new PutObjectCommand({
    Bucket: process.env.R2_BUCKET_NAME,
    Key: fileName,
    Body: audioBuffer,
    ContentType: "audio/mpeg",
  });

  await r2.send(command);

  return `${process.env.R2_PUBLIC_URL}/${fileName}`;
}

This function uploads the audio buffer to R2 using a unique filename and returns a public URL that podcast apps can access.

Putting It Together

const audioUrl = await waitForAudio(jobId);
const audioBuffer = await downloadAudio(audioUrl);
const publicAudioUrl = await uploadToR2(audioBuffer);

At the end of this step, publicAudioUrl is the final audio file used in the podcast RSS feed.

How to Make the Podcast

With public audio URLs, you can now generate an RSS feed.

import xmlbuilder from "xmlbuilder";

function generatePodcastFeed(episodes) {
  const feed = xmlbuilder
    .create("rss", { version: "1.0" })
    .att("version", "2.0")
    .ele("channel");

  feed.ele("title", "My Tech Podcast");
  feed.ele("description", "Tech articles converted to audio");
  feed.ele("link", "https://your-site.com");

  episodes.forEach((ep) => {
    const item = feed.ele("item");
    item.ele("title", ep.title);
    item.ele("enclosure", {
      url: ep.audioUrl,
      type: "audio/mpeg",
    });
  });

  return feed.end({ pretty: true });
}

How to Automate the Pipeline

Automation in this project happens in two stages. First, the code itself must be able to process multiple articles in one run. Second, the script must run automatically on a schedule. We’ll start with the code-level automation.

Automating Inside the Code

Earlier, we fetched up to fifteen articles. Now we need to make sure every article that passes our filters goes through the full pipeline.

Add the following function near the bottom of index.js.

async function runPipeline() {
  const rawArticles = await fetchArticles();

  const filteredArticles = filterByWordCount(
    removePromotionalContent(filterByKeywords(rawArticles))
  );

  if (filteredArticles.length === 0) {
    console.log("No articles passed the filters");
    return [];
  }

  const characterId = await createVoiceCharacter({
    name: "My Voice",
    avatarStyle: "realistic",
    voiceSamplePath: "./SAMPLE_VOICE.wav",
  });

  const episodes = [];

  for (const article of filteredArticles) {
    console.log(`Processing: ${article.title}`);

    const cleaned = cleanArticle(article);

    const job = await generateAudio(characterId, cleaned.cleanedText);

    const audioUrl = await waitForAudio(job.id);
    const audioBuffer = await downloadAudio(audioUrl);
    const publicAudioUrl = await uploadToR2(audioBuffer);

    episodes.push({
      title: article.title,
      audioUrl: publicAudioUrl,
    });
  }

  return episodes;
}

This function does all the heavy lifting:

• Fetches articles

• Applies all filters

• Creates the voice character once

• Loops through every valid article

• Converts each article into audio

• Uploads the audio to Cloudflare R2

• Collects podcast episode data

At this point, one script run can generate multiple podcast episodes.

Running the Pipeline and Generating the Feed

Now we need a single entry point that runs the pipeline and writes the podcast feed. Add this below the pipeline function.

import fs from "node:fs/promises";

async function main() {
  const episodes = await runPipeline();

  if (episodes.length === 0) {
    console.log("No episodes generated");
    return;
  }

  const rss = generatePodcastFeed(episodes);

  await fs.mkdir("./public", { recursive: true });
  await fs.writeFile("./public/feed.xml", rss);

  console.log("Podcast feed generated at public/feed.xml");
}

main().catch(console.error);

When you run node index.js, this now:

• Processes all selected articles

• Creates multiple audio files

• Generates a valid podcast RSS feed

This is the core automation.

Scheduling the Pipeline with GitHub Actions

The final step is to make this script run automatically. Create a GitHub Actions workflow file at .github/workflows/podcast.yml.

name: Podcast Pipeline

on:
  schedule:
    - cron: "0 6 * * *"

jobs:
  run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm install
      - run: node index.js
        env:
          ORANGECLONE_API_KEY: ${{ secrets.ORANGECLONE_API_KEY }}
          R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
          R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
          R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
          R2_BUCKET_NAME: ${{ secrets.R2_BUCKET_NAME }}
          R2_PUBLIC_URL: ${{ secrets.R2_PUBLIC_URL }}

This workflow runs the pipeline every morning at 6 AM.

Each run:

• Fetches new articles

• Generates fresh audio

• Updates the podcast feed

Once this is set up, your podcast updates itself without manual work.

Conclusion

This is a basic version of my full production pipeline, PostCast, but the core idea is the same.

You now know how to turn blogs into a personal podcast. Be mindful of copyright and only use content you are allowed to consume.

If you have questions, reach me on X at @sprucekhalifa. I write practical tech articles like this regularly.

Let's get one thing straight: AI is here to help, not to replace. Your job, my job, was never just to write code. Writing code was always just a part of it. Our real job is to build software solutions that work. And since an AI, trained on the collective knowledge of millions of developers, can probably write better, cleaner boilerplate than you, you should let it. Your expertise is better used elsewhere.

In this article, I’ll show you exactly how I use AI to get work done faster. We'll walk through building a car rental website, and you'll see how I use AI for:

• Initial planning and research

• Design and even UI Copy

• Writing all the boring boilerplate code

• Improving the code and making it better

Here’s what the website we're building looks like: (Live demo) (Github Repo)

Table of Contents

1. Step 1: Planning and Research (The Brainstorm)

2. Step 2: Design and UI Copy

3. Step 3: Writing the Boilerplate Code

4. Step 4: Making the Code Actually Good

   • What the AI Got Right (and Wrong)

   • Refactoring in Action

5. So, What's the Takeaway?

6. Frequently Asked Questions

Step 1: Planning and Research (The Brainstorm)

So, a client hits me up. They own a car rental business and want a simple website. People need to see the cars and have an easy way to call and rent them. Simple enough.

So what do I do? I don't fire up VS Code. I take this info straight to ChatGPT and ask it for ideas.

Prompt:

You’re a website designer and you have a client that owns a car rental website. They want a simple website that displays the cars they have for rent and an option for people to rent them. How would you go about building this?

Output:

You can see how easy that was. So what did it spit out? Basically a full project brief. It gave me a roadmap suggesting key pages like a Homepage, Car Listings, and a Contact page. It also outlined essential features like a search bar and filtering options, and recommended a modern tech stack like React which was exactly what I was planning to use.

With that sorted, I wanted to see what it might look like, so I had it generate some quick wireframes.

Prompt:

From the above, Generate the wireframes of what the entire website with its pages will look like.

Output:

Now I've got a blueprint. The whole discovery phase, which could take hours or days of back-and-forth, is done in minutes.

Step 2: Design and UI Copy

Okay, I've got a rough idea of the layout. Time to turn these ugly wireframes into a real design. For this, I use AI-powered UI generation tools (you can find a few out there, like https://stitch.withgoogle.com, or even use v0.dev to get ideas).

I just uploaded the wireframes from ChatGPT and told it what I wanted.

Prompt:

Turn these wireframes into a clean, modern design for a car rental website. Make it look trustworthy.

Output:

Now, one thing I love about these tools is that they don't just spit out a pretty picture. They give you the actual code for it.

Here’s a sample of the kind of clean HTML it gave me for a single car card:

<div class="bg-white rounded-lg shadow-md p-4 flex flex-col">
  <img src="/path-to-your-car-image.png" alt="Toyota Camry" class="rounded-md mb-4">
  <h3 class="text-xl font-bold text-gray-800">Toyota Camry</h3>
  <p class="text-lg font-semibold text-blue-600 mt-2">$50/day</p>
  <ul class="mt-4 space-y-2 text-sm text-gray-600">
    <li class="flex items-center">
      <span>4 Seats</span>
    </li>
    <li class="flex items-center">
      <span>Automatic</span>
    </li>
  </ul>
  <button class="mt-auto bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">
    Rent Now
  </button>
</div>

You can always play with the full code here.

And just like that, I've got the design of the website and the starter code for it. No Figma, no slicing assets, just straight from an idea to code.

Step 3: Writing the Boilerplate Code

I said earlier that AI can write better code than you, and I stand by it. It was trained on all the code from every public repo, every tutorial, every developer put together. Assuming the collective brain of every developer is better than you alone, the AI has a serious edge – if you can guide it.

For my car rental site, I wanted to use React. So I just copied the HTML code from the design tool and pasted it into Gemini with some very clear instructions.

Prompt:

You are a senior React developer. Convert the following HTML and Tailwind CSS code into a fully functional React application.

Requirements:

1. Use Vite as the build tool.

2. The project must be in TypeScript.

3. Implement the UI components using shadcn/ui where appropriate (for example, Buttons, Cards).

4. Use lucide-react for icons

5. Structure the code into logical components (for example, Navbar, CarCard, Footer).

6. Create a root App.tsx file that assembles these components.Output:

Notice how I was super specific about the tools I wanted? If you want the best output, you have to tell the AI exactly what you want. Don't be vague. Guide it. This means you’ll need to be familiar with and understand the tools needed to create this kind of project.

Overall, it took maybe ten minutes from the time I got the message from the client to the time I had a working React app running on my machine. A website built in ten minutes or less. This was not possible a while back, but with AI helping, you can move insanely fast.

Step 4: Making the Code Actually Good

Look, I know this is far from done. The AI gave me a great start, but it's not a finished product. I still have to plug in a CMS or a database, set up the real logic – you get the idea. This is where the real development starts, and AI is still my co-pilot.

What the AI Got Right (and Wrong)

The AI did a surprisingly good job on the first pass. It correctly scaffolded the Vite + React + TS project, created a components folder, and even used shadcn/ui components where I asked. This saved me at least 30-45 minutes of tedious setup.

But it wasn't perfect. For example, the initial data for the cars was hardcoded directly inside the component. That's a huge no-no for a real app that needs to scale or pull from a database. Also, the components weren't as reusable as I'd like.

This is where your job as a developer comes in – to review, refactor, and architect properly.

Refactoring in Action

I constantly go back to the AI to refine the code. I treat it like a pair programmer. Here's an example. The AI first gave me a CarCard component that looked something like this:

Before Refactoring (AI's First Draft):

// components/CarCard.tsx
import { Button } from "./ui/button";

export const CarCard = () => {
  const carName = "Tesla Model S"; // Data is hardcoded
  const price = 95;

  const handleRentNow = () => {
    console.log("Renting Tesla Model S");
  };

  return (
    <div>
      <h2>{carName}</h2>
      <p>${price}/day</p>
      <Button onClick={handleRentNow}>Rent Now</Button>
    </div>
  );
};

This is fine for a demo, but useless for a real application. So, I guided the AI to refactor it. I'd ask it something like, "Refactor this CarCard component to accept props for car data (name, price, image) and a function for the rent button click."

After Refactoring (My Guided Version):

// components/CarCard.tsx
import { Button } from "./ui/button";

// Define a type for the car's data
export interface CarProps {
  name: string;
  price: number;
  imageUrl: string;
}

interface CarCardProps {
  car: CarProps;
  onRentNow: (carName: string) => void;
}

export const CarCard = ({ car, onRentNow }: CarCardProps) => {
  return (
    <div>
      <img src={car.imageUrl} alt={car.name} />
      <h2>{car.name}</h2>
      <p>${car.price}/day</p>
      <Button onClick={() => onRentNow(car.name)}>Rent Now</Button>
    </div>
  );
};

See the difference? Now it's a reusable, type-safe component that gets its data from outside. It's a back-and-forth conversation. I write some code, the AI cleans it up. The AI writes some code, I fix the logic. It's pair programming on steroids.

So, What's the Takeaway?

The game has changed. AI is a tool, probably the most powerful one we've ever been given. It automates the boring stuff so we can focus on the hard problems – architecture, performance, and user experience.

The developers who ignore this are going to be lapped by the ones who embrace it. It’s about working smarter, not harder.

Frequently Asked Questions

Q: What’s the best AI model to use? ChatGPT or Gemini or something else?

A: Honestly, they're all great at writing code, and it's all a matter of "Garbage in, Garbage out." The results you get are only as good as your prompts. But if I had to choose one right now specifically for writing and refactoring code, I'd probably pick Gemini. Your mileage may vary.

Q: Will I forget how to code if I rely on AI?

A: That's on you. If you just copy and paste without understanding what's happening, then yeah, your skills will get dull. But if you use it to learn, to see different ways of solving a problem, and to check your own work, it'll actually make you a much better developer, faster.

Q: Is it ethical to use AI for client work?

A: Of course. Your client is paying you for a working website, not for your blood, sweat, and tears typing every single bracket. Is it unethical to use a framework like React or pull in a package from npm? No. This is the same thing. It's a tool. Just make sure the final product is solid, because you're the one who is ultimately responsible for it.

Q: What about bugs? Does AI write perfect code?

A: Heck no. It will give you buggy code. It will make things up. Don't trust it blindly. My rule is to treat code from an AI like it came from a talented but very eccentric junior dev. You have to check their work. Run it, test it, and if it breaks, you can even paste the buggy code back into the AI and say, "Hey, fix this." It's surprisingly good at cleaning up its own mess.

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

For my case, I just wanted to add a chat system to my portfolio website so I could get valuable info from potential employers and clients. I ended up building something like this:

Table of Contents

1. Why Rocket.Chat, you may ask?

2. Prerequisites

3. Getting Started

   • Step 1: Set Up the Rocket.Chat Server

   • Step 2: Configure the Rocket.Chat Server

   • Step 3: Register the Visitor

     • How to Register the Visitor

     • How to Create or Retrieve the Chat Room

     • How to Retrieve Livechat Configuration

   • Step 4: Create the Connection to WebSocket

4. Conclusion

Why Rocket.Chat, you may ask?

Rocket.Chat is a great option because:

• Open Source: It’s free and customizable.

• Comprehensive APIs: Their APIs make integration simple.

• Flexible Hosting: Self-host your own or use their cloud version with a free trial (which we’ll use here).

Prerequisites

Before you continue, there are a few things you should know and have:

• A running Rocket.Chat server (either self-hosted or on Rocket.Chat Cloud). Here, I'll show you how to set up one with Rocket.Chat Cloud.

• A working knowledge of JavaScript fundamentals.

Getting Started

First things first, let's set up a Rocket.Chat server. Again, you can either self host your own or use their cloud version. And don't worry – you don't have to pay anything right now or for this tutorial, as they provide a 30 day free trial.

Step 1: Set Up the Rocket.Chat Server

Head over to https://cloud.rocket.chat and create your free account.

Once you're logged in, click on the "Change to SaaS trial" button to launch a cloud-hosted server.

Next, create a Cloud Workspace by providing your workspace name, URL, and server region.

It will take a little while to set up. When it’s done, you should see something similar to this:

Now copy your server URL—it should look like this: https://example.rocket.chat.

Step 2: Configure the Rocket.Chat Server

Before diving into the code, we need to configure our server so we can use the livechat API.

To start, open your Rocket.Chat server and click on the menu button, then click on Omnichannel.

Click on Agents on the sidebar and add yourself as an agent.

Next, click on Departments and create a Department. I'll call mine Chats.

Now you need to configure a few things about the Livechat widget:

• Make sure you turn on the offline form and set the Email Address to Send Offline Messages.

• Also, configure your business hours to the times you'll be available.

Step 3: Register the Visitor

Next, we need to register the visitor and create a room for them. To do this, you need to collect the visitor's name and email and generate a random unique ID.

How to Register the Visitor

First, we need to register the visitor in the server. We need their name, email, and token. You send those to this endpoint: /api/v1/livechat/visitor. Here's an example code that you might send from your backend:

const body = {
  name: "Visitor Name",          // Replace with the visitor's name
  email: "visitor@example.com",  // Replace with the visitor's email
  token: "unique-visitor-token"  // Replace with a generated unique token
};

fetch(`${process.env.ROCKETCHAT_URL}/api/v1/livechat/visitor`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Cache-Control': 'no-cache'
  },
  body: JSON.stringify(body)
})
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      console.log("Visitor registered:", data);
    } else {
      console.error("Visitor registration failed:", data);
    }
  })
  .catch(error => console.error("Error in visitor registration:", error));

How to Create or Retrieve the Chat Room

After you've registered the visitor, you need to create a room for them so they can send you messages and you can respond.

Call this endpoint /api/v1/livechat/room with the visitor token as a query parameter. If the visitor already has a room, it’ll be returned. If not, a new one will be created. This is how you can make that request from your backend:

const token = "unique-visitor-token"; // Replace with the actual visitor token

fetch(`${process.env.ROCKETCHAT_URL}/api/v1/livechat/room?token=${token}`, {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
})
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      console.log("Room retrieved:", data);
    } else {
      console.error("Failed to retrieve room:", data);
    }
  })
  .catch(error => console.error("Error in retrieving room:", error));

How to Retrieve Livechat Configuration

Lastly, we need to get the info about the visitor and the agent we registered. Use this API endpoint to get the visitor token, room ID, and agent info. You can use it to check if the agent is online before trying to connect to the WebSocket.

const token = "unique-visitor-token"; // Replace with the actual visitor token
const url = `${process.env.ROCKETCHAT_URL}/api/v1/livechat/config?token=${token}`;

fetch(url, {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
})
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      console.log("Livechat config:", data);
    } else {
      console.error("Failed to get livechat config:", data);
    }
  })
  .catch(error => console.error("Error fetching livechat config:", error));

Step 4: Create the Connection to WebSocket

To establish the live chat experience, we need to open a WebSocket connection to Rocket.Chat and handle messaging.

WebSocket Connection Example

First, open the WebSocket like this:

const rocketChatSocket = new WebSocket("ws://example.rocket.chat/websocket");

Then connect:

const connectRequest = {
  msg: "connect",
  version: "1",
  support: ["1", "pre2", "pre1"]
};
rocketChatSocket.send(JSON.stringify(connectRequest));

You can keep the connection alive by responding to the server's "ping" messages with a "pong".

rocketChatSocket.onmessage = (event) => {
  try {
    const data = JSON.parse(event.data);
    if (data.msg === "ping") {
      console.log("Received ping from server, sending pong");
      rocketChatSocket.send(JSON.stringify({ msg: "pong" }));
    }
  } catch (error) {
    console.error("Error parsing WebSocket message:", error);
  }
};

You can subscribe to the room created for the visitor. Just use the visitor’s token and room ID from the previous sections.

const subscribeRequest = {
  msg: "sub",
  id: "unique-subscription-id", // Replace with your unique ID
  name: "stream-room-messages",
  params: [
    "fetched-room-id", // Replace with the room ID variable
    {
      useCollection: false,
      args: [
        { visitorToken: "visitor-token" } // Replace with your visitor token variable
      ],
    },
  ],
};
rocketChatSocket.send(JSON.stringify(subscribeRequest));

You can also listen for incoming messages. Here’s how you can process new messages as they arrive:

rocketChatSocket.onmessage = (event) => {
  try {
    const data = JSON.parse(event.data);
    if (
      data.msg === "changed" &&
      data.collection === "stream-room-messages"
    ) {
      // Handle new messages
      if (data.fields && data.fields.args && data.fields.args.length > 0) {
        const newMessage = data.fields.args[0];
        // Assume isValidChatMessage is defined to validate the message format
        if (isValidChatMessage(newMessage)) {
          // Update your messages list here
          console.log("New message received:", newMessage);
        }
      }
    }
  } catch (error) {
    console.error("Error parsing WebSocket message:", error);
  }
};

What if you want to send livechat messages? Just use this code to do so:

const sendMessageRequest = {
  msg: "method",
  method: "sendMessageLivechat",
  params: [
    {
      _id: "unique-message-id",  // Replace with a generated unique ID for the message
      rid: "room-id",            // Replace with the actual room ID
      msg: "Your message here",  // Replace with the message text you want to send
      token: "visitor-token"     // Replace with the actual visitor token
    }
  ],
  id: "unique-request-id"        // Replace with a unique request ID
};

rocketChatSocket.send(JSON.stringify(sendMessageRequest));

In your actual implementation, you can integrate these examples into your backend or client-side logic as needed.

You can take a look at the source code for how I implemented mine with Next.js or you can look at the live demo.

Conclusion

Adding a Livechat feature to your web apps shouldn't be hard. With Rocket.Chat's livechat API, you can quickly integrate chat functionality and gain valuable insights from your users. I even built an SDK wrapper to make it easier to use.

Now it’s your turn! Try out Rocket.Chat’s API and build your own live chat system. You can explore more in the Rocket.Chat documentation.

Happy coding!

The first article I found was about building a search and filter component in React. As I read through it, I couldn't help but think, This is okay, but it misses so many important cases. Then it hit me—I was the one who wrote that article a few years ago.

Turns out, my past self had some learning to do.

Since then, I've tackled more complex projects and realized that search in React can be so much more powerful, flexible, and efficient. That's why I've developed a reusable useSearch hook that handles everything from large datasets to typo-tolerant searches—and I'm excited to share it with you.

In this article, I'll walk you through building it step by step. By the end, you'll have a high-performance search system that you can drop into any React project, no matter how complex your data gets.

Outline

• Introduction

• The Problem With Simple Search Implementations

• How to Build a Reusable useSearch Hook

• How to Create the Filters

• How to Handle Typos in Search

• How to Use the Ready-Made useSearch Hook

• Conclusion

Who Should Read This?

If you’re a React developer, whether you're just getting started or have plenty of experience, you’ve probably run into the limits of basic search features. Maybe your search is sluggish with large datasets, struggles with typos, or isn’t flexible enough to handle different data structures. If that sounds familiar, this guide is for you. We’ll build a high-performance, reusable search system that actually works in real-world apps.

What You’ll Learn

By the end of this guide, you’ll know how to:

• Spot the common pitfalls of simple search implementations.

• Build a powerful useSearch hook that works with different data types and nested objects.

• Optimize performance with techniques like debouncing and memoization.

• Improve the user experience with fuzzy search that handles typos.

• Implement pagination to efficiently manage large result sets.

Prerequisites

Before diving in, you should be comfortable with:

• React and JavaScript fundamentals.

• Basic React hooks such as useState and useEffect.

• Working with arrays and objects in JavaScript.

The Problem With Simple Search Implementations

Let’s start with a basic search component:

function SimpleSearch() {
    const data = [
        { name: "JavaScript" },
        { name: "Python" },
        { name: "Java" }
    ];

    const [query, setQuery] = useState("");

    const results = data.filter((item) => item.name.includes(query));

    return (
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search..."
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

At first glance, this works fine: you type a query and get matching results. But in real-world applications, search needs to handle much more than just simple string comparisons. Here are some major limitations:

• Limited data support: This approach only works with plain strings, making it impractical for complex data structures.

• No support for nested objects: If your data has deeper structures (for example, { user: { name: "JavaScript" } }), this won’t work.

• No typo tolerance: A slight misspelling like "javascrpt" won’t match "JavaScript", which can frustrate users.

• Performance bottlenecks: Every keystroke triggers a full re-render, which can cause lag, especially with large datasets.

Clearly, we need something more powerful. Let’s build a better search system that’s flexible, optimized, and user-friendly.

How to Build a Reusable useSearch Hook

To overcome these issues, we’ll build a reusable useSearch hook that:

• Supports multiple data types (strings, numbers, dates, nested objects).

• Improves performance using debouncing and memoization.

• Handles typos with fuzzy search.

How to Create the Hook

Let’s start by creating the hook. It takes in data, the search query, and a list of filter functions to apply:

// hooks/useSearch.js

function useSearch(data, query, ...filters) {
    const debouncedQuery = useDebounce(query, 300);

    return React.useMemo(() => {
        const dataArray = Array.isArray(data) ? data : [data];

        try {
            // Apply each filter function in sequence
            return filters.reduce(
                (acc, feature) => feature(acc, debouncedQuery),
                dataArray
            );
        } catch (error) {
            console.error("Error applying search features:", error);
            return dataArray;
        }
    }, [data, debouncedQuery, filters]);
}

How to Handle the Query with useDebounce

Without debouncing, every single keystroke triggers a new search. Imagine typing "apple"—each letter (a, p, p, l, e) fires a search request, causing multiple re-renders and potential performance issues.

To fix this, we used a debounce mechanism in the useSearch hook that waits until the user stops typing before running the search. Here’s what the useDebounce hook looks like:

import React from "react";

function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = React.useState(value);

    React.useEffect(() => {
        const timeoutId = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => clearTimeout(timeoutId);
    }, [value, delay]);

    return debouncedValue;
}

This hook ensures that the search only triggers after 300ms of inactivity, preventing unnecessary re-renders and improving responsiveness.

Want to see the difference in action? Compare a debounced search to one that updates on every keystroke in the demo below:

How to Optimize Performance with React.useMemo

Filtering large datasets can be expensive, and if our search logic runs every time a component re-renders—even when the search query hasn’t changed—it can slow things down. That’s where React.useMemo() comes in.

By wrapping our search logic in useMemo, we ensure it only recalculates when the search query, filters, or data actually change:

return React.useMemo(() => {
    // Filtering logic
}, [data, debouncedQuery, filters]);

But how much of a difference does this make? Imagine a parent component with an unrelated state (like a counter). Every time the parent re-renders, a non-memoized search would still run, even if the query remains the same.

The live demo below compares two search implementations, one without useMemo and one with it. Try changing an unrelated state in the parent and see how many times each search runs:

With useMemo, the search logic only runs when the query, filters, or data change, keeping performance smooth and avoiding unnecessary computations.

How to Chain Filters with .reduce()

The hook uses .reduce() to sequentially apply each filter function to the data, keeping the logic clean and modular:

return filters.reduce(
    (acc, feature) => feature(acc, debouncedQuery),
    dataArray
);

This approach makes it easy to add or remove filters as needed.

How to Create the Filters

Filters add the magic to our search hook by processing the data based on the search query. For this project, I created two filters: one for searching and one for pagination.

1. The Search Filter

The search filter checks specified fields in an object for matches with the query. It supports several matching strategies (exact, startsWith, endsWith, contains):

// utils/search.js

export function search(options) {
    const { fields, matchType } = options;

    return (data, query) => {
        const trimmedQuery = String(query).trim().toLowerCase();

        if (!trimmedQuery) return data;

        return data.filter((item) => {
            const fieldsArray = fields
                ? Array.isArray(fields)
                    ? fields
                    : [fields]
                : getAllKeys(item);

            return fieldsArray.some((field) => {
                const fieldValue = getFieldValue(item, field);
                if (fieldValue == null) return false;

                const stringValue = convertToString(fieldValue).toLowerCase();

                switch (matchType) {
                    case "exact":
                        return stringValue === trimmedQuery;
                    case "startsWith":
                        return stringValue.startsWith(trimmedQuery);
                    case "endsWith":
                        return stringValue.endsWith(trimmedQuery);
                    case "contains":
                        return stringValue.includes(trimmedQuery);
                    default:
                        throw new Error(`Unsupported match type: ${matchType}`);
                }
            });
        });
    };
}

Let’s go through it to see how it works:

1. Cleaning up the query:

    const trimmedQuery = String(query).trim().toLowerCase();
   
    if (!trimmedQuery) {
        return data;
    }
   

   This makes the search case-insensitive and removes extra spaces.

2. Determining fields to search:

    const fieldsArray = fields
        ? Array.isArray(fields)
            ? fields
            : [fields]
        : getAllKeys(item);
   

   If specific fields aren’t provided, it extracts all keys, including nested ones.

3. Filtering the data:

    return fieldsArray.some((field) => {
        const fieldValue = getFieldValue(item, field);
   
        if (fieldValue == null) {
            return false;
        }
   
        const stringValue = convertToString(fieldValue).toLowerCase();
   
        // Matching logic based on matchType follows...
    });
   

2. The Helper Functions

To keep our filtering logic clean and focused, we use a few helper functions. These functions handle common tasks like retrieving keys from an object, getting nested field values, and converting values to strings. This way, our search filter can work with a variety of data structures and types without cluttering the main logic.

• Extracting all keys with getAllKeys:

  The getAllKeys function scans an object to gather all its keys—even those nested within arrays or sub-objects. If you don't provide specific fields for searching, this function ensures that every potential field is considered.

    // utils/getAllKeys.js
  
    export function getAllKeys(item, prefix = "") {
        if (!item || typeof item !== "object") {
            return [];
        }
  
        const fields = [];
  
        for (const key of Object.keys(item)) {
            const value = item[key];
            const fieldPath = prefix ? `${prefix}.${key}` : key;
  
            if (Array.isArray(value)) {
                value.forEach((arrayItem, index) => {
                    if (
                        arrayItem &&
                        typeof arrayItem === "object" &&
                        !(arrayItem instanceof Date)
                    ) {
                        fields.push(...getAllKeys(arrayItem, `${fieldPath}[${index}]`));
                    } else {
                        fields.push(`${fieldPath}[${index}]`);
                    }
                });
            } else if (value instanceof Date) {
                fields.push(fieldPath);
            } else if (value && typeof value === "object") {
                fields.push(...getAllKeys(value, fieldPath));
            } else {
                fields.push(fieldPath);
            }
        }
  
        return fields;
    }
  

• Retrieving field values with getFieldValue:

  The getFieldValue function extracts the value of a given field from an object using a path string (like "user.name" or "items[0].title"). It splits the path into individual keys and then traverses the object step by step to find the correct value.

    // utils/getFieldValue.js
  
    export function getFieldValue(item, field) {
        const keys = field.split(/[\.\[\]]/).filter(Boolean);
        let value = item;
  
        for (const key of keys) {
            if (value == null) {
                return null;
            }
            value = value[key];
        }
  
        return value;
    }
  

• Converting values to strings with convertToString:

  For our search comparisons, we need to ensure all data is in string format. The convertToString function handles this conversion. It turns dates into ISO strings and booleans into "true" or "false", ensuring a uniform format for our search filter.

    // utils/convertToString.js
  
    export function convertToString(value) {
        if (value instanceof Date) {
            return value.toISOString();
        }
  
        if (typeof value === "boolean") {
            return value ? "true" : "false";
        }
  
        return String(value);
    }
  

3. The Pagination Filter

For large datasets, displaying all results at once isn't practical. The pagination filter helps by returning only a subset of the data based on the current page and the number of items per page. This not only improves performance but also makes the data more manageable for users.

In this function, we calculate the starting index by using the current page number and page size. Then, we use the JavaScript slice method to pick out only the items that belong to that specific page. Although the query parameter is present, it isn’t used here—it’s just for keeping the hook's interface consistent.

// utils/paginate.js

export function paginate(options) {
    const { page = 1, pageSize = 10 } = options;

    return (data, query) => {
        // Query is not used here; it’s only for compatibility with our hook.
        const startIndex = (page - 1) * pageSize;

        return data.slice(startIndex, startIndex + pageSize);
    };
}

In this code, the pagination filter efficiently slices the data array, so you only get the subset of results that you want to display on the current page.

How to Use the Hook with Search and Pagination Filters

Now that we have both the search and pagination filters set up, let’s see how to use them in a React component.

First, import the custom useSearch hook and the filter functions:

import useSearch from "./hooks/useSearch.js";
import search from "./utils/search.js";
import paginate from "./utils/paginate.js";

Next, create a component that uses these filters. In this example, we have an array of items, and we want to search by name and display a fixed number of results per page. We also reset to the first page whenever a new search query is entered.

function SearchComponent() {
    // Example data array
    const data = [
        { name: "JavaScript" },
        { name: "Python" },
        { name: "Java" },
        { name: "Ruby" },
        // Imagine more data here
    ];

    const [query, setQuery] = React.useState("");
    const [page, setPage] = React.useState(1);
    const pageSize = 3; // Items per page

    // Apply both search and pagination filters with our custom hook.
    const results = useSearch(
        data,
        query,
        search({
            fields: ["name"],
            matchType: "contains", // Options: "exact", "startsWith", etc.
        }),
        paginate({ page, pageSize })
    );

    // Compute total pages based on filtered results (without pagination)
    const filteredData = search({ fields: ["name"], matchType: "contains" })(
        data,
        query
    );

    const totalPages = Math.ceil(filteredData.length / pageSize);

    return (
        <div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
            <h2>Search and Pagination</h2>
            <input
                type="text"
                value={query}
                onChange={(e) => {
                    setQuery(e.target.value);
                    setPage(1); // Reset to first page on new search
                }}
                placeholder="Search by name..."
                style={{ padding: "8px", width: "300px", marginBottom: "10px" }}
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item.name}</li>
                ))}
            </ul>
            <div style={{ marginTop: "10px" }}>
                <button
                    onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
                    disabled={page === 1}
                    style={{ padding: "6px 12px", marginRight: "10px" }}
                >
                    Previous
                </button>
                <span>Page {page} of {totalPages}</span>
                <button
                    onClick={() => setPage((prev) => Math.min(prev + 1, totalPages))}
                    disabled={page >= totalPages}
                    style={{ padding: "6px 12px", marginLeft: "10px" }}
                >
                    Next
                </button>
            </div>
        </div>
    );
}

To see this in action and try it for yourself, check out the live demo below:

How to Handle Typos in Search

Search is one of the oldest features on the web, but that doesn’t mean users always get it right. In fact, typos are incredibly common. Imagine a user searching for "PlayStation," but they accidentally type "PlauStation" instead. They still expect to see relevant results, and our search system should be forgiving enough to handle these small mistakes.

To achieve this, we are going to use a fuzzy search technique that matches similar words even if they’re not spelled exactly the same. We’ll implement this using an n-gram similarity algorithm, which breaks words into smaller segments (n-grams) and compares them to find matches.

Step 1: Building the n-gram Similarity Algorithm

The n-gram similarity algorithm works by splitting both the search query and dataset values into small overlapping character sequences (n-grams) and comparing them:

// utils/nGramFuzzySearch.js

export const nGramFuzzySearch = (value, query) => {
    const n = 2; // Default to bigrams (two-character sequences)

    const valueGrams = generateNGrams(value.toLowerCase(), n);
    const queryGrams = generateNGrams(query.toLowerCase(), n);

    const intersection = valueGrams.filter((gram) => queryGrams.includes(gram));

    return intersection.length / Math.max(valueGrams.length, queryGrams.length);
};

const generateNGrams = (str, n) => {
    const grams = [];

    for (let i = 0; i <= str.length - n; i++) {
        grams.push(str.slice(i, i + n));
    }

    return grams;
};

Here is how this will work if you try searching for query PlauStation and the product name is PlayStation:

First, the algorithm will generate bigrams (two-letter sequences) for both words:

PlayStation → ["pl", "la", "ay", "ys", "st", "ta", "at", "ti", "io", "on"]
PlauStation → ["pl", "la", "au", "us", "st", "ta", "at", "ti", "io", "on"]

Then, it calculates the similarity based on the number of overlapping bigrams. The higher the overlap, the closer the match. Since most bigrams match, the algorithm calculates a high similarity score, allowing it to recognize "PlauStation" as a likely match for "PlayStation", even with minor typos.

Step 2: Adding Fuzzy Search into the Search Filter

Now, update your search filter to support a new matchType for fuzzy search:

// Update in utils/search.js

import { nGramFuzzySearch } from "./nGramFuzzySearch";

export function search(options) {
    const { fields, matchType } = options;

    return (data, query) => {
        const trimmedQuery = String(query).trim().toLowerCase();

        if (trimmedQuery === "") {
            return data;
        }

        return data.filter((item) => {
            const fieldsArray = fields
                ? Array.isArray(fields)
                    ? fields
                    : [fields]
                : getAllKeys(item);

            return fieldsArray.some((field) => {
                const fieldValue = getFieldValue(item, field);
                if (fieldValue == null) {
                    return false;
                }

                const stringValue = convertToString(fieldValue).toLowerCase();

                switch (matchType) {
                    case "exact":
                        return stringValue === trimmedQuery;
                    case "startsWith":
                        return stringValue.startsWith(trimmedQuery);
                    case "endsWith":
                        return stringValue.endsWith(trimmedQuery);
                    case "contains":
                        return stringValue.includes(trimmedQuery);
                    case "fuzzySearch": {
                        const threshold = 0.5; // Minimum similarity score required
                        const score = nGramFuzzySearch(stringValue, trimmedQuery);
                        return score >= threshold;
                    }
                    default:
                        throw new Error(`Unsupported match type: ${matchType}`);
                }
            });
        });
    };
}

Step 3: Using Fuzzy Search in the useSearch Hook

Now you can enable fuzzy search simply by passing fuzzySearch as the matchType:

const results = useSearch(
    data,
    query,
    search({
        fields: ["name"],
        matchType: "fuzzySearch",
    })
);

Try it out on this Live Demo to see how even with a typo like "PlauStation", your app still finds "PlayStation".

How to Use the Ready-Made useSearch Hook

If you’d rather not build everything from scratch, I've got you covered. I’ve published a fully typed, optimized version of the useSearch hook on npm, called use-search-react. This package not only handles search but also comes with built-in support for sorting, pagination, grouping, and multiple fuzzy search algorithms so you can focus on building your app instead of reinventing the wheel.

How to Use it in Your Component

Step 1: Install the hook

Simply install the package using npm:

npm install use-search-react

Step 2: Import and use the hook

Using the hook in your component is straightforward. For example, consider the following component that uses the hook to perform a fuzzy search on an array of data:

import { useSearch, search } from "use-search-react";
import { useState } from "react";

function SearchComponent() {
    const [query, setQuery] = useState("");

    const data = [
        { name: "JavaScript" },
        { name: "Python" },
        { name: "Java" }
    ];

    // The 'search' function here is configured to perform a fuzzy search.
    const results = useSearch(
        data,
        query,
        search({
            fields: ["name"],
            matchType: "fuzzy",
        })
    );

    return (
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search..."
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

This example shows how easy it is to use the hook in your React component. The package is built to handle even very large datasets—tens of thousands of records—while keeping your application responsive and efficient.

Here is an example of it working with ten thousand records of data

For more detailed usage and additional configuration options (like pagination, sorting, or grouping), check out the full documentation on npm: use-search-react Docs.

Conclusion

Building a search system in React is more than just filtering data. It's about crafting an experience that feels intuitive and responsive for your users.

In this article, you learned how to build a custom useSearch hook that can address common challenges like performance issues, handling nested data, and even forgiving user typos with fuzzy search. We also looked at how to use pagination to manage large datasets.

Whether you decide to build your own from scratch or use the fully typed, ready-made version available on npm, you now have the search functionality that you can easily drop in any of your React projects.

Take these ideas, experiment with them, and adjust the implementation to fit your specific needs.

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

This article is for you if any of these sounds familiar:

• JavaScript is your first programming language.

• You are new to, or not entirely comfortable with, Object-Oriented Programming (OOP) principles.

• You have primarily used functions for structuring your JavaScript code.

If you're nodding along to any of these, then keep reading.

In this article, we'll take a step-by-step approach, showing you how object-oriented programming is implemented in JavaScript with objects and constructor functions, and clearly illustrate why understanding and using classes will make you a more versatile and effective JavaScript developer, even if you’re used to writing everything in functions. We’ll end everything with a simple to-do app example so you can see how to use classes.

Table of Contents

• Functions, Functions Everywhere I Turn

• Hold on a second. Are we saying functions are bad now?

• Wait, what? JavaScript has no real classes?

• Let's talk about objects in JavaScript.

• Constructor Functions: Object Blueprints—Let's Get Practical

• Constructor Functions: Great for Blueprints, but... Memory Waste?

• Prototypes to the Rescue (Again): Sharing Methods Efficiently

• Constructor Functions + Prototypes: A Powerful Combo

• Inheritance with Constructor Functions: Passing Down the Family Traits (the Constructor Way)

• Enter ES6 Classes: Syntactic Sugar for Prototypes

• ES6 Classes: Class Syntax – Prototypes in Disguise

• What’s Next? More Class Features and Real-World Examples

• Conclusion

Functions, Functions Everywhere I Turn

If you started with JavaScript, chances are that you've become really comfortable with functions. They're like the building blocks of everything for you, right? Think about it: if I asked you to write a program to greet someone by name, you'd probably whip up something like this in a flash:

function greetUser(userName) {
  alert("Hello, " + userName + "!");
}

greetUser("Alice"); // Like magic! It greets Alice.

Okay, let's level up a bit. Imagine that I asked you to write a program that figures out someone's birth year just by knowing their age. If they're 25, you'd want it to tell them '2000' (assuming the current year is 2025).

What would your first thought be? Probably something like, 'Function time!' Am I right? You'd think, 'I'll write a function; it'll take the age, and boom, it'll spit out the birth year.' See?

Function-first thinking. Totally natural in JavaScript. And here's how you might code it:

function getBirthYear(age) {
  const currentYear = 2025; //  For this example, let's say it's 2025
  const birthYear = currentYear - age;
  return birthYear;
}
console.log(getBirthYear(25)); // Yep, it logs 2000!

Now, let's make it a bit more complex. What if we want to be a little smarter and make sure the age is actually a valid age? You know, not some crazy string or a negative number. Sticking with our function-loving brains, what's the natural next step? Another function, of course. We'd probably create a validateAge function:

function validateAge(age) {
  if (typeof age !== "number" || age <= 0 || age > 120) {
    return "Invalid age";
  } else {
    return age; //  Age is good to go!
  }
}

console.log(validateAge(25)); //  Output: 25 (valid!)
console.log(validateAge("twenty")); //  Output: Invalid age (not a number)
console.log(validateAge(-5)); //  Output: Invalid age (negative)

See how we're just piling up functions? getBirthYear does one thing, validateAge does another. They're separate little boxes of code.

Let's push this a little further. What if we also wanted to figure out someone's zodiac sign based on their birth year? Yep, you guessed it—the brain says, 'More functions.' Let's just write another getZodiacSign function:

function getZodiacSign(birthYear) {
    const signs = [
        "Monkey", 
        "Rooster", 
        "Dog", 
        "Pig", 
        "Rat",    
        "Ox",
        "Tiger", 
        "Rabbit", 
        "Dragon", 
        "Snake", 
        "Horse", 
        "Sheep"
    ];
    return signs[birthYear % 12]; // Simple modulo trick!
}

Are you noticing the pattern here? For every new thing we want to do we're just adding more and more separate functions. Things are starting to feel a bit... scattered, right? And we're not even done adding features.

Okay, now let's say we want to store even more information about a person—their name, country, profession, besides just age. How would we manage all this with our function-centric approach? Well, we might try to create a big 'Person' function that takes all this info:

function Person(name, age, country, profession) {
  const personName = name;
  const personAge = age;
  const personCountry = country;
  const personProfession = profession;

  const validatedAge = validateAge(personAge);
  const birthYear = getBirthYear(validatedAge);
  const zodiacSign = getZodiacSign(birthYear);

  alert(
    `${personName}, you're ${personAge} years old, born in ${birthYear}, zodiac sign: ${zodiacSign}!`
  );
}

What if we then want to use the person's name in our other functions, like getZodiacSign or getBirthYear? We'd have to go back and manually add name as an argument to each of those functions. Imagine having to update every function whenever you add a new piece of person information.

//  Suddenly, we need 'name' everywhere!

function getZodiacSign(birthYear, name) {
  alert("Zodiac sign for " + name + " is...");
  //... rest of zodiac logic...
}

function getBirthYear(age, name) {
  alert("Birth year for " + name + " is...");
  // ... rest of birth year logic...
}

In this tiny example, it's sort of manageable. But picture a huge project with tons of functions spread across files and folders, how you’d try to keep everything in sync and update functions whenever your person data changes. That sounds like a recipe for headaches, bugs, and a lot of frustration. It can become incredibly inefficient and, honestly, pretty error-prone.

Hold on a second. Are we saying functions are bad now?

Functions are amazing. Think of this function-focused approach as the 'classic JavaScript way' of doing things. If you started with JavaScript, this probably feels totally natural and comfortable—and that's great. Even super popular modern libraries like React are built using functions for components. Functions are incredibly powerful and flexible.

But, even in React, if you change some core data (like a 'prop' in React terms) in a main component, you might have to go digging through lots of other components to make sure everything still works smoothly. Functions are fantastic, but sometimes, for certain kinds of problems, there might be another way to organize our code. A way that, for some folks, feels more intuitive, especially if they come from other programming backgrounds.

Imagine asking a programmer whose first language was Java or C++ to build our birth year program. Their brain might light up, but they'd probably think something a bit different. Maybe something like this:

'We need a Person(class). A Person has an age(proterty) and we need a way to calculateBirthYear(action) for a Person.'

Notice anything different? Functions aren't the first thing that jumps to their mind. It's more about objects and things having properties and actions. Mind-blowing, huh? Many programmers who started with languages like Java or C++ naturally think in this object-oriented (or OOP) style. And hey, maybe that's why you're reading this—maybe you're curious about exploring this object-thinking approach too, especially in JavaScript. Don't worry, I’m not asking you to suddenly switch to Java 😉.

So, about these classes in JavaScript. Get ready for a little JavaScript twist. Here's the thing: JavaScript technically doesn't have classes in the way languages like Java or C++ do. I know, it can be a bit of a head-scratcher. Instead of classical classes as found in languages like Java or C++, JavaScript is built on something called prototypes*.* It uses these flexible prototypes and objects to mimic how classes work in other languages. So, if you want to use classes in JavaScript effectively, the real key is to understand objects and prototypes first. That's where the magic is in JavaScript OOP.

Wait, what? JavaScript has no real classes?

Does that mean we are stuck with just functions forever? Nope. Even though JavaScript does things its own way with prototypes (instead of classic classes), it still fully supports 'Object-Oriented Programming' (OOP).

Let's break down OOP in plain English. Two big ideas in OOP are Encapsulation and Inheritance. Sounds fancy, right? But they're actually pretty simple concepts.

Encapsulation? Imagine a capsule, like for medicine. You're just bundling things that belong together. In OOP, encapsulation means grouping data (like age, name) and the actions you can do with that data (like calculate birth year, greet) inside a single 'object'. JavaScript objects are perfect for this.

And inheritance? Think of it like inheriting traits from your family. In JavaScript OOP, objects can 'inherit' properties and behaviors from other objects. JavaScript calls this prototypal inheritance, and the object you inherit from is called the prototype (we'll dive deeper into prototype soon).

See? No function jail here. JavaScript is totally ready for OOP. To see this in action, let's rewrite our birth year program, but this time using this OOP style in JavaScript.

Check this out. Here's how we could rewrite our birth year program using an OOP style in JavaScript, using just a good old JavaScript object:

const Person = {
  //  --- Properties (Data) ---
  name: "Spruce",
  age: 25,
  country: "Nigeria",
  profession: "Engineer",

  //  --- Methods (Actions related to Person data) ---
  isValidAge: function () {
    return typeof this.age === "number" && this.age > 0;
  },

  getBirthYear: function () {
    if (!this.isValidAge()) {
      return "Invalid age!";
    }
    return new Date().getFullYear() - this.age;
  },

  getZodiacSign: function () {
    if (!this.isValidAge()) {
      return "Oops, can't get zodiac for an invalid age!";
    }

    const birthYear = this.getBirthYear();
    const zodiacSigns = [
      "Capricorn",
      "Aquarius",
      "Pisces",
      "Aries",
      "Taurus",
      "Gemini",
      "Cancer",
      "Leo",
      "Virgo",
      "Libra",
      "Scorpio",
      "Sagittarius",
    ];
    return zodiacSigns[birthYear % 12];
  },

  greet: function () {
    return (
      `Hello, I'm ${this.name}. I'm ${
        this.age
      } years old, born in ${this.getBirthYear()}, ` +
      `working as a ${this.profession} from ${
        this.country
      }.  My zodiac sign is ${this.getZodiacSign()}.`
    );
  },
};

//  --- Let's use our Person object! ---
console.log(Person.greet());

//  Output (might vary slightly depending on year):

// "Hello, I'm Spruce. I'm 25 years old, born in 2000, working as a Engineer from Nigeria.  My zodiac sign is Pig."

See how neat that is? Everything about a Person, their details (name, age, and so on) and what you can do with a person (validate age, get birth year, greet) is all bundled together, and nicely organized inside this single Person object. That's encapsulation in action. Pretty cool, right?

Now, want to know the Person name? Super easy:

console.log(Person.name); // Output: "Spruce"

Birth year? Piece of cake:

console.log(Person.getBirthYear()); // Output (if current year is 2025): 2000

And here's the real magic of encapsulation: if we change something inside the Person object (like, say, we decide to change the age), all the methods (actions) inside automatically adapt. We don't have to go hunting around in separate functions to update things. Let me show you:

//  Age is 25 initially...
console.log("Birth year when age is 25:", Person.getBirthYear()); // Output (if current year is 2025): 2000

//  Let's update the age directly in the Person object...
Person.age = 30;

//  Now, getBirthYear automatically uses the *new* age!
console.log("Birth year when age is 30:", Person.getBirthYear()); // Output (if current year is 2025): 1995

So, JavaScript uses objects—and, as we'll see, prototypes—to bring OOP to life, even if it doesn't have classic classes. Hopefully, you're starting to see the appeal of organizing code this way. Before we jump into classes, it makes a ton of sense to get a really solid understanding of objects and prototypes in JavaScript, right? That's what we'll dive into next.

Let's talk about objects in JavaScript.

If you're already familiar with how objects work, that's fantastic. It'll make understanding everything we cover in this article even smoother. To make sure we're all on the same page, let's start with a super basic object:

const Person = {};

So, is Person an empty object? At first glance, it certainly looks empty. If you thought "yes," you're not alone. It's a common initial thought. But in JavaScript, objects are a little more interesting than just what we explicitly put into them. Let's explore how objects really work under the hood.

Okay, so how do objects work in JavaScript?

Let's break it down. At its core, an object is a collection of properties. Think of properties as named containers for values. Each property has a name (also called a 'key').

const Person = {
  firstName: "John",
  lastName: "Doe",
};

firstName and lastName are the property names (keys), and "John" and "Doe" are their respective values. A property in an object is always a key-value pair. The value part can be many things.

The value associated with a property can be a primitive data type. In JavaScript, primitives are things like strings, numbers, booleans (true or false), null, undefined, and symbols. Let's see some examples:

const exampleObject = {
  name: "Example", // String
  age: 30, // Number
  isStudent: false, // Boolean
  favoriteColor: null, // null
};

But the cool thing is, property values can also be more complex data types or even other objects, functions, and arrays. Let's look at that:

const anotherObject = {
  address: {
    // Value is another object
    street: "123 Main St",
    city: "Anytown",
  },
  hobbies: ["reading", "hiking"], // Value is an array
  greet: function () {
    // Value is a function (a method!)
    console.log("Hello!");
  },
};

When a function is a property of an object, we call it a method. It's essentially a function that belongs to the object and usually operates on the object's data.

const calculator = {
  value: 0,
  add: function(number) {
    this.value += number; // 'this' refers to the calculator object
  },
  getValue: function() {
    return this.value;
  }
};

calculator.add(5);
console.log(calculator.getValue()); // Output: 5

Now, here’s where things get really interesting. Objects in JavaScript don't just have the properties we explicitly define. They can also reference properties from other objects. This is a core concept called prototypal inheritance (sometimes just called prototypal delegation).

Remember our seemingly empty Person = {} object? We said it looked empty, right? Well, it's time for a bit of JavaScript magic. Even though we didn't put any properties in it ourselves, it's not completely empty. Every object in JavaScript, by default, has a hidden link (often referred to internally as its [[Prototype]] property) to another object called its prototype.

For objects created using the simple {} syntax (like our person object), their default prototype is the built-in Object.prototype. Think of Object.prototype as a kind of parent object that provides some basic, built-in functionality to all objects.

This is why you can do things like this, even with our "empty" Person object:

console.log(Person.toString()); // Output: [object Object]

Wait a minute. We never defined a toString() method in our Person object. So where is it coming from? It's coming from its prototype, Object.prototype. toString() is a method that's built into Object.prototype, and because Person's prototype is Object.prototype, Person can access and use the toString() method.

So, a good way to think about it is: "The prototype of an object is another object from which it can look up and use properties and methods if it doesn't have them itself."

Why is understanding prototypes so important? Because it unlocks the power of code reuse and creating specialized objects based on more general ones. This is where things get really powerful, especially as your JavaScript projects grow.

Imagine that we want to create a more specific type of Person—say, a Developer. A Developer is still a Person, but they might have some additional properties or behaviors specific to developers. Basically, we want a Developer object to be a Person, but also have its own unique stuff.

This is where we can explicitly set up prototypes. Instead of relying on the default Object.prototype, we can tell JavaScript: "Hey, I want the prototype of my Developer object to be the Person object we already defined." We can do this using Object.create():

const Person = {
  firstName: "John",
  lastName: "Doe",
  sayHello: function () {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
  },
};

const developer = Object.create(Person); // developer's prototype is now 'Person'
developer.firstName = "Spruce"; // Add a *specific* firstName for developer
developer.programmingLanguage = "JavaScript"; // Developer's own property

developer.sayHello(); // Output: Hello, my name is Spruce Person (still accesses sayHello from 'person' prototype!)
console.log(developer.programmingLanguage); // Output: JavaScript (developer's own property)
console.log(developer.lastName); // Output: Doe (inherited from 'Person' prototype!)

Let's break down what's happening when we access properties on Developer:"

console.log(developer.firstName); // Output: Spruce (developer's *own* property)
console.log(developer.programmingLanguage); // Output: JavaScript (developer's *own* property)
console.log(developer.lastName); // Output: Doe (found on the *prototype* 'Person')
console.log(developer.sayHello()); // Output: Hello, my name is Spruce Person (method from *prototype*)
console.log(developer.job); // Output: undefined (not on 'Developer' OR 'Person' prototype)

When you try to access a property like Developer.lastName, JavaScript does the following:

1. First, it checks: Does Developer have a property named lastName directly on itself? In our example, Developer only has firstName and programmingLanguage as its own properties. lastName is not there.

2. If it doesn't find it on the object itself, JavaScript then looks at the object's prototype (which we set to Person using Object.create()).

3. It checks: 'Does the Person object (the prototype) have a property named lastName?' Yes, Person does have lastName: "Doe". So, JavaScript uses this value.

4. If the property isn’t found on the prototype either, JavaScript would then look at the Person's prototype (which is Object.prototype by default), and so on, up the prototype chain. If it goes all the way up the chain and still doesn't find the property, it finally returns undefined (like when we tried to access developer.job).

Own properties are simply the properties that are defined directly on the object itself when you create it (like firstName and programmingLanguage on Developer). Prototype properties are accessed through the prototype chain.

You can even create longer prototype chains. For example, let's say we want to create a JavaScriptDeveloper object, which is a type of Developer. We can make Developer the prototype of JavaScriptDeveloper:

const JavaScriptDeveloper = Object.create(Developer); // javaScriptDeveloper's prototype is 'Developer'

JavaScriptDeveloper.framework = "React"; // JavaScriptDeveloper's own property

console.log(JavaScriptDeveloper.firstName); // Output: Spruce (from 'Developer' prototype)

console.log(JavaScriptDeveloper.lastName); // Output: Doe (from 'Person' prototype)

console.log(JavaScriptDeveloper.programmingLanguage); // Output: JavaScript (from 'Developer' prototype)

console.log(JavaScriptDeveloper.framework); // Output: React (JavaScriptDeveloper's own property)

console.log(JavaScriptDeveloper.job); // Output: undefined (not found anywhere in the chain)

(Optional Exploration: If you're curious, trace the lookup for javaScriptDeveloper.lastName. It goes: JavaScriptDeveloper -> Developer -> Person -> Object.prototype).

Okay, prototypes are powerful. We can create objects that share properties and behaviors and specialize them for different needs. But imagine if we wanted to create hundreds of Person objects, hundreds of Developer objects, and hundreds of JavaScriptDeveloper objects.

Using Object.create() every time would still be quite repetitive, especially if we want to ensure that every Person starts with the same basic properties (like firstName and lastName).

We need a better way to create multiple objects that follow the same pattern, like a blueprint that we can re-use over and over again to create objects. This is what classes are for, they are just blueprints that we can use to create multiple objects, and JavaScript uses Constructor functions to create classes (the blueprints).

In the next section, we’ll dive into how javascript uses Constructor functions to implement classes.

Constructor Functions: Object Blueprints—Let's Get Practical

Okay, prototypes are pretty cool for code reuse and making specialized objects. We saw how Object.create() lets us create objects that inherit from others. But imagine that we wanted to make tons of Person objects, like, hundreds of them for a website. Typing out Object.create(person) for every single one would get super repetitive, especially if we always want every Person to start with the same basic properties, like a firstName and lastName.

We need a more efficient way to make lots of objects that follow the same pattern. What we really need is something like a blueprint—something we can use over and over again to stamp out new objects, all looking and working in a similar way. And guess what? That’s exactly what constructor functions are for.

Think of constructor functions as JavaScript's way of creating blueprints for objects. They're like object factories. And in JavaScript, we use constructor functions, which are specialized functions used in a particular way, to create these blueprints. Yep, functions again. But we use them in a special way.

So what is a constructor function, exactly?

Well, like I said, it's a function that creates objects. Take a look at this example:

function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    console.log(`Hello, I'm ${this.name}`);
  };
}

That looks like a regular function. You're absolutely right. It looks just like any other function you've probably written in JavaScript. In fact, let's prove it. If we just log PersonConstructor itself, we’ll see:

console.log(PersonConstructor);

// output
function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    console.log(`Hello, I'm ${this.name}`);
  };
}

See? Just a regular function. So, what makes it a constructor function?

The Magic Ingredient: The new Keyword

What turns an ordinary function into a constructor**—**something that builds objects—is the new keyword. It's like saying to JavaScript, "Hey, treat this function as a blueprint, and use it to create a new object for me."

Let's see it in action:

const person1 = new PersonConstructor("Alice", 25);

console.log(person1);

// output

// PersonConstructor { name: 'Alice', age: 25, greet: [Function] }

In the output now, instead of just seeing the function code, we're seeing a PersonConstructor object. The new keyword didn't just call the function, it actually created a brand new object based on the PersonConstructor blueprint.

Now, we can use this blueprint, PersonConstructor, to create as many Person objects as we want, all with the same basic structure:

const person1 = new PersonConstructor("Alice", 25);
const person2 = new PersonConstructor("Bob", 30);
const person3 = new PersonConstructor("Charlie", 28);

console.log(person1);
console.log(person2);
console.log(person3);

// output
PersonConstructor { name: 'Alice', age: 25, greet: [Function] }
PersonConstructor { name: 'Bob', age: 30, greet: [Function] }
PersonConstructor { name: 'Charlie', age: 28, greet: [Function] }

Cool, right? We have three distinct Person objects, all created from the same PersonConstructor blueprint.

Hold Up... What's This this Keyword I Keep Seeing?

You've probably noticed the word this popping up a lot in these code examples, like in this.name, this.age, and this.greet(). And you might be thinking, "What in the JavaScript world is this?"

Don't worry, this can be a bit confusing at first, but it's actually pretty simple once you get the hang of it. Let's break it down with a simple analogy.

Imagine you're describing yourself. You might say, "My name is [Your Name]." In this sentence, "my" refers to you, the person speaking.

In JavaScript objects, this is like "my" or "me." It's a way for an object to refer to itself.

Let's see this with a regular object example first:

const PersonObject = {
  name: "Spruce",
  greet: function () {
    console.log("Hello, my name is " + PersonObject.name); //  Using PersonObject.name directly
  },
};

PersonObject.greet(); // Output: Hello, my name is Spruce

In this PersonObject, inside the greet function, we used PersonObject.name to access the name property. This works perfectly fine. We're directly telling JavaScript to get the name property from the PersonObject. We could use this here too, but let's see why this becomes super helpful, especially in constructor functions.

Now, consider this slightly different version using this:

const PersonObjectThis = {
  name: "Spruce",
  greet: function () {
    console.log("Hello, my name is " + this.name); // Using 'this.name'
  },
};

PersonObjectThis.greet(); // Output: Hello, my name is Spruce

See? It still works the same way. When greet is called on PersonObjectThis, inside the greet function, it automatically refers to PersonObjectThis. So this.name is just a more dynamic way of saying "the name property of this current object."

Why use this instead of directly naming the object?

Because this is dynamic and context-aware. It always points to the object that is currently calling the method. This becomes essential in constructor functions because constructor functions are designed to create many different objects.

Back to constructor functions: What does this mean there?

Let's revisit our PersonConstructor:

function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const person1 = new PersonConstructor("Alice", 25);
const person2 = new PersonConstructor("Bob", 30);

When we do const person1 = new PersonConstructor("Alice", 25); inside the PersonConstructor function:

• this becomes person1. It's as if JavaScript is doing:

  • person1.name = "Alice";

  • person1.age = 25;

  • person1.greet = function() { ... };

And when we do const person2 = new PersonConstructor("Bob", 30); inside PersonConstructor again:

• this becomes person2. Like JavaScript doing:

  • person2.name = "Bob";

  • person2.age = 30;

  • person2.greet = function() { ... };

So, this in a constructor function is like a placeholder that gets filled in with the specific object being created when you use new. It's what lets us create many different objects from the same blueprint.

Constructor Functions: Great for Blueprints, but... Memory Waste?

Okay, so now that you know how to create object blueprints using constructor functions, and you understand what this does, we can make lots of Person objects.

But there's a little problem lurking in our PersonConstructor:

function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    // 😬 Look at this greet function!
    console.log(`Hello, I'm ${this.name}`);
  };
}

const person1 = new PersonConstructor("Alice", 25);
const person2 = new PersonConstructor("Bob", 30);

console.log(person1, person2);

// output

PersonConstructor {name: "Alice", age: 25, greet: function}

PersonConstructor {name: "Bob", age: 30, greet: function}

Notice the greet function inside the PersonConstructor? Every time we create a new Person object using new PersonConstructor(), we're actually copying the entire greet function to each and every object.

Imagine that we create one thousand Person objects. We'd have a thousand identical greet functions in memory. For a simple greet() function, the memory impact might seem small. However, if you had more complex methods with lots of code, or if you were creating thousands or even millions of objects, duplicating these functions for every single object can become a significant waste of memory.

It also impacts performance as JavaScript has to manage all these duplicated functions. That's a lot of duplicated code, and it's not very memory-efficient, especially if the greet function (or other methods) were more complex.

Prototypes to the Rescue (Again): Sharing Methods Efficiently

Remember prototypes? We learned that objects can inherit properties and methods from their prototypes. Well, constructor functions have a built-in way to use prototypes to solve this memory-waste problem.

Instead of defining the greet function inside the constructor and thus copying it to every instance, we can add it to the prototype of the PersonConstructor function.

Like this:

function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
}

//  --- Add the greet method to the PROTOTYPE of PersonConstructor! ---
PersonConstructor.prototype.greet = function () {
  console.log(`Hello, I'm ${this.name}`);
};

Now, the greet method is defined only once on PersonConstructor.prototype. But all objects created with PersonConstructor can still use it. They inherit it from the prototype.

Let's test it:

const person1 = new PersonConstructor("Alice", 25);
const person2 = new PersonConstructor("Bob", 30);

person1.greet(); // Output: Hello, I'm Alice  - Still works!
person2.greet(); // Output: Hello, I'm Bob    - Still works!

console.log(person1.greet === person2.greet); // Output: false - They are NOT the same function object in memory

console.log(person1.__proto__.greet === person2.__proto__.greet); // Output: true - But they share the same prototype method!

person1.greet() and person2.greet() still work perfectly. But now, the greet function is not copied for each object. It's shared through the prototype. This is much more efficient, especially when we're dealing with lots of objects and methods.

Constructor Functions + Prototypes: A Powerful Combo

We've now seen how constructor functions act as blueprints for creating objects, and how using the prototype of a constructor function lets us efficiently share methods among all objects created from that blueprint.

This is a key pattern in JavaScript for creating reusable object structures.

Okay, we've covered object creation and efficient methods... But what about inheritance with constructor functions?

What if we want to create a DeveloperPerson blueprint that inherits from our PersonConstructor blueprint? So that DeveloperPerson objects automatically has name, age, and greet, but can also have its own special developer-related properties and methods?

That's where things get a bit more involved with constructor functions, and we'll need to use a special trick called call() to make inheritance work. Let's dive into that next.

Inheritance with Constructor Functions: Passing Down the Family Traits (the Constructor Way)

Alright, we're making good progress. We've got constructor functions to create object blueprints, and prototypes to share methods efficiently. But one of the big reasons people use OOP is for inheritance – the idea of creating specialized objects that build upon more general ones.

Think back to our Person and Developer example. A Developer is a Person, right? They have a name, an age, maybe they greet people, but they also have developer-specific properties, like a favorite programming language and the ability to code.

How can we create a DeveloperPersonConstructor blueprint that inherits all the basic PersonConstructor stuff, and then adds its own developer-specific features? With constructor functions, you can use something called call().

call(): The Secret Inheritance Handshake

call() is a function method that lets you do something a bit unusual: you can borrow a function from one object and run it in the context of another object. Sounds confusing? Let's simplify.

To illustrate call(), let's consider our PersonConstructor. We want to create a DeveloperPersonConstructor that also sets up name and age in the same way PersonConstructor does, before adding developer-specific properties.

This is where call() comes in. We can use call() to essentially say: "Hey PersonConstructor, run your code, but run it as if you were inside DeveloperPersonConstructor, and set up name and age for this DeveloperPerson object we're currently creating."

Let's see this in code to make it clearer:

function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
}

PersonConstructor.prototype.greet = function () {
  console.log(`Hello, I'm ${this.name}`);
};

function DeveloperPersonConstructor(name, age, programmingLanguage) {
  //  --- "Borrow" the PersonConstructor to set up name and age! ---
  PersonConstructor.call(this, name, age); //  <--  The magic of 'call()'

  // --- Now, add developer-specific properties ---
  this.programmingLanguage = programmingLanguage;
  this.code = function () {
    console.log(`${this.name} is coding in ${this.programmingLanguage}`);
  };
}

See that line: PersonConstructor.call(this, name, age); ? That's the key to inheritance here. Let's break it down:

• PersonConstructor.call(...): We're calling the PersonConstructor function, but not in the usual way. We're using .call().

• this: The first argument to call() is crucial. It specifies what this should be inside the PersonConstructor function when it runs. Here, we're passing this from DeveloperPersonConstructor. Why? Because we want PersonConstructor to set up name and age on the DeveloperPerson object that's currently being created.

• name, age: These are the arguments we're passing to the PersonConstructor function itself. So, when PersonConstructor runs (thanks to .call()), it will receive name and age and do what it normally does: set this.name = name and this.age = age. But because this is actually the DeveloperPerson object, it sets these properties on the DeveloperPerson object.

Putting it all Together: Creating a DeveloperPerson

Now, let's create a DeveloperPerson object and see what happens:

const devPerson1 = new DeveloperPersonConstructor("Eve", 30, "JavaScript");

console.log(devPerson1.name); // Output: Eve (Inherited from PersonConstructor!)
console.log(devPerson1.age); // Output: 30 (Inherited from PersonConstructor!)
devPerson1.greet(); // Output: (Oops! Error!)
console.log(devPerson1.programmingLanguage); // Output: JavaScript (Developer-specific)
devPerson1.code(); // Output: Eve is coding in JavaScript (Developer-specific)

Notice that devPerson1.name and devPerson1.age are there. DeveloperPersonConstructor borrowed the part of PersonConstructor that sets up those basic properties. And we also have devPerson1.programmingLanguage and devPerson1.code() which are specific to developers.

Uh Oh! Where's greet()?

But wait, devPerson1.greet() is throwing an error. Why? Because even though we borrowed the constructor logic from PersonConstructor, we haven't yet set up the prototype chain for inheritance of prototype methods like greet().

Right now, devPerson1's prototype is just the default object prototype (Object.prototype). It's not inheriting from PersonConstructor.prototype. We need to fix that.

Setting the Prototype Chain for Constructor Inheritance

To make DeveloperPersonConstructor objects also inherit prototype methods from PersonConstructor, we need to manually adjust the prototype chain. We can do this using Object.create() again.

We want the prototype of DeveloperPersonConstructor to be an object that inherits from PersonConstructor.prototype.

Here's the code:

function PersonConstructor(name, age) {
  this.name = name;
  this.age = age;
}

PersonConstructor.prototype.greet = function () {
  console.log(`Hello, I'm ${this.name}`);
};

function DeveloperPersonConstructor(name, age, programmingLanguage) {
  PersonConstructor.call(this, name, age);
  this.programmingLanguage = programmingLanguage;
  this.code = function () {
    console.log(`${this.name} is coding in ${this.programmingLanguage}`);
  };
}

// ---  Set up the Prototype Chain for Inheritance! ---
DeveloperPersonConstructor.prototype = Object.create(
  PersonConstructor.prototype
);

That line DeveloperPersonConstructor.prototype = Object.create(PersonConstructor.prototype); is doing the magic. It's saying, "Hey JavaScript, set the prototype of DeveloperPersonConstructor to be a new object that inherits from PersonConstructor.prototype."

Now, let's try devPerson1.greet() again:

const devPerson1 = new DeveloperPersonConstructor("Eve", 30, "JavaScript");

devPerson1.greet(); // Output: Hello, I'm Eve  - 🎉 It works now!

devPerson1.greet() now works. devPerson1 is inheriting the greet() method from PersonConstructor.prototype through the prototype chain we just set up.

Let's Trace the Prototype Chain

Let's really understand what's happening when we do devPerson1.greet():

1. JavaScript checks: Does devPerson1 itself have a greet property? No.

2. JavaScript looks at devPerson1's prototype: DeveloperPersonConstructor.prototype. Does it have a greetproperty? No, we only added developer-specific methods or properties to DeveloperPersonConstructor directly, not to its prototype in our example. (We could add developer-specific prototype methods later).

3. JavaScript goes up the prototype chain to DeveloperPersonConstructor.prototype's prototype: PersonConstructor.prototype. Does it have a greet property? Yes. We defined PersonConstructor.prototype.greet = function() { ... };

4. JavaScript finds greet() on PersonConstructor.prototype, and executes it in the context of devPerson1 (so this.name inside greet() refers to devPerson1.name).

Prototype chain in action. devPerson1 -> DeveloperPersonConstructor.prototype -> PersonConstructor.prototype-> Object.prototype.

Going Even Further: JavaScript Developer Person

We can even create longer inheritance chains. Let's say we want to create a JavaScriptDeveloperPersonConstructor that's a special type of DeveloperPersonConstructor, maybe with a specific JavaScript framework preference.

We can do the same pattern:

function JavaScriptDeveloperPersonConstructor(name, age, framework) {
  //  "Borrow" from DeveloperPersonConstructor first!
  DeveloperPersonConstructor.call(this, name, age, "JavaScript"); // Hardcoded "JavaScript"
  this.framework = framework;
  this.codeJavaScript = function () {
    // Specific to JavaScript developers
    console.log(`${this.name} is coding in JavaScript with ${this.framework}`);
  };
}

// Set up prototype chain: JavaScriptDeveloperPerson -> DeveloperPerson -> Person
JavaScriptDeveloperPersonConstructor.prototype = Object.create(
  DeveloperPersonConstructor.prototype
);

Now we have a three-level inheritance chain.

Constructor Functions: Powerful, but a Bit... Verbose?

Constructor functions and prototypes are really powerful. They are the fundamental way JavaScript achieves OOP-like behavior. However, as you can see, setting up inheritance with call() and Object.create() can get a bit wordy and tricky to read, especially as inheritance chains get longer.

And guess what? The JavaScript folks noticed this too. In 2015, a new, cleaner syntax for creating object blueprints was introduced in JavaScript.

Enter ES6 Classes: Syntactic Sugar for Prototypes

You see, in 2015, JavaScript developers recognized that using prototypes and constructor functions directly to achieve class-like patterns could become verbose and less straightforward to manage as applications grew. Therefore, they introduced the class syntax in ECMAScript 2015 (ES6).

Classes in JavaScript provide a much cleaner and more familiar way to create object blueprints and set up inheritance. But here’s the super important thing to remember: JavaScript classes are still built on top of prototypes. They don't fundamentally change how JavaScript OOP works. They are just syntactic sugar – a nicer, easier way to write code that's still using prototypes behind the scenes.

In the next section, we'll see how to rewrite our Person, DeveloperPerson, and JavaScriptDeveloperPerson examples using the new class syntax, and you'll see how much cleaner and more class-like (pun intended) it feels, while using the power of JavaScript prototypes.

ES6 Classes: Class Syntax – Prototypes in Disguise

Okay, we've wrestled with constructor functions and call() and Object.create() to get inheritance working with prototypes. It's powerful, but let's be honest, it can feel a little verbose and indirect, especially if you're used to class-based languages.

That's where ES6 classes come to the rescue. They offer a much more streamlined and class-like syntax for creating object blueprints in JavaScript.

Let's rewrite our PersonConstructor example using the class syntax. Get ready for a breath of fresh air.

PersonClass - Constructor Function Reimagined as a Class

Here's how we can define our Person blueprint as a class:

class PersonClass {
  //  Using the 'class' keyword!
  constructor(name, age) {
    //  'constructor' method - like our old constructor function
    this.name = name; //  Still using 'this' in the constructor
    this.age = age;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

Doesn't that look much cleaner and more organized? Let's break down the class syntax:

• class PersonClass { ... }: We start with the class keyword, followed by the class name (PersonClass in this case). Class names are conventionally capitalized.

• constructor(name, age) { ... }: Inside the class, we have a special method called constructor. This is like our old PersonConstructor function. It's where we put the code to initialize the properties of a new PersonClass object when it's created with new. We still use this inside the constructor to refer to the new object being created.

• greet() { ... }: This is how we define methods in a class. We simply write the method name (greet), followed by parentheses for parameters (none in this case), and then the method body in curly braces. Notice that we don't use the function keyword here. It's just greet() { ... }.

Creating Objects from a Class - Still Using new

To create objects from our PersonClass blueprint, we still use the new keyword, just like we did with constructor functions:

const classPerson1 = new PersonClass("Charlie", 28);
const classPerson2 = new PersonClass("Diana", 32);

console.log(classPerson1.name); // Output: Charlie
classPerson1.greet(); // Output: Hello, I'm Charlie

Yep, it works exactly the same way as our constructor function example, but the class syntax is just much more readable and less cluttered.

DeveloperPersonClass - Inheritance Made Easy with extends

Now, let's tackle inheritance using classes. Remember how we had to use call() and Object.create() to get DeveloperPersonConstructor to inherit from PersonConstructor? With classes, inheritance becomes super straightforward using the extends keyword.

Here's how we can rewrite DeveloperPersonConstructor as a DeveloperPersonClass that inherits from PersonClass:

class DeveloperPersonClass extends PersonClass {
  //  'extends' for inheritance!
  constructor(name, age, programmingLanguage) {
    super(name, age); //  'super()' calls the parent class constructor!
    this.programmingLanguage = programmingLanguage;
  }

  code() {
    // Developer-specific method
    console.log(`${this.name} is coding in ${this.programmingLanguage}`);
  }
}

Look at that. Inheritance in classes is declared using the extends keyword: class DeveloperPersonClass extends PersonClass {...}. This line alone says, "Hey JavaScript, DeveloperPersonClass should inherit from PersonClass."

Inside the DeveloperPersonClass constructor, we have this line: super(name, age);. super() is crucial for class inheritance. It's how we call the constructor of the parent class (PersonClass in this case). When we call super(name, age), it's essentially doing the same thing as PersonConstructor.call(this, name, age) in our constructor function example—it's running the PersonClass constructor to set up the inherited properties (name and age) on the DeveloperPersonClass object.

After calling super(), we can then add any developer-specific properties or methods to our DeveloperPersonClass, like this.programmingLanguage = programmingLanguage; and the code() method.

Using DeveloperPersonClass - Inheritance in Action, Cleaner Syntax

Let's create a DeveloperPersonClass object and see inheritance in action with this cleaner syntax:

const classDevPerson1 = new DeveloperPersonClass("Eve", 35, "JavaScript");

console.log(classDevPerson1.name); // Output: Eve (Inherited from PersonClass!)
console.log(classDevPerson1.age); // Output: 35 (Inherited from PersonClass!)
classDevPerson1.greet(); // Output: Hello, I'm Eve (Inherited from PersonClass!)
console.log(classDevPerson1.programmingLanguage); // Output: JavaScript (Developer-specific)
classDevPerson1.code(); // Output: Eve is coding in JavaScript (Developer-specific)

It works exactly as expected. classDevPerson1 inherits name, age, and greet() from PersonClass and also has its own programmingLanguage and code() methods. But the class syntax makes the inheritance relationship much more obvious and easier to work with.

Classes: Syntactic Sugar, Prototype Power Underneath

Let's be crystal clear again: JavaScript classes are syntactic sugar over prototypes. They are a more user-friendly way to write code that is still based on prototypes and constructor functions behind the scenes.

When you define a class, JavaScript is actually doing these things for you under the hood:

• It's creating a constructor function (like our PersonConstructor).

• It's setting up the .prototype property of that constructor function.

• When you use extends, it's using Object.create() and call() to set up the prototype chain for inheritance.

Classes don't change the fundamental prototype-based nature of JavaScript OOP. They just give us a more familiar and less verbose syntax to work with it.

So, Are Classes Just "Fake" Classes?

Some people argue that JavaScript classes are “fake” because they’re merely syntactic sugar. But honestly, that’s not the point at all. Syntactic sugar is awesome—it makes our code easier to read, write, and maintain. For those coming from a class-based language background, classes make object-oriented programming in JavaScript much more approachable and understandable.

The key takeaway is that while classes give you a neat, familiar syntax, you still need to understand the underlying mechanism: prototypes. Classes are just a friendly layer on top of JavaScript’s prototype system.

What’s Next? More Class Features and Real-World Examples

Alright, now that you’re comfortable with the idea of classes, it’s time to see them in action. Understanding the theory is only half the battle—we need some practical examples.

And to solidify your understanding, let’s walk through building a classic example: a basic to-do list app. While a to-do app is still relatively simple in concept, it introduces enough front-end interaction to see how classes can organize front-end JavaScript code for interactive elements in a manageable way for learning.

Imagine you want to build a really basic to-do app. What do you need to manage?

• To-dos: Each to-do item has a description and a status (done or not).

• Actions: You’ll want to add new to-dos, mark them as complete, delete them, and list them.

This naturally leads us to think of a “ToDo” item as an object, and if you’re creating many to-do items, a ToDo class is a perfect blueprint.

Setting Up Your Files

Before writing any code, create two files in the same folder:

• index.html: This is the webpage structure.

• script.js: This is where your JavaScript code with classes will live.

You can use any text editor (like VS Code, Sublime Text, or even Notepad) to create these files.

Creating the ToDo Class

Let’s start by building our ToDo class. Copy and paste the following code into your script.js file:

class ToDo {

constructor(description) {

this.description = description; // Every to-do needs a description

this.completed = false; // By default, it's not completed

}

markComplete() {

this.completed = true;

console.log("${this.description}" marked as complete!);

}

// More methods (e.g., for editing the to-do) can be added later.

}

Notice how clean that is. The constructor sets up the description and completed status for each new to-do item. The markComplete() method updates the status and logs a confirmation message.

Building the ToDoList Class

Next, we’ll build a ToDoList class to manage our collection of to-dos. Add the following code to your script.js file, below the ToDo class:

class ToDoList {

constructor() {

this.todos = []; // Start with an empty array of to-dos

}

addTodo(description) {

const newTodo = new ToDo(description); // Create a new ToDo object

this.todos.push(newTodo); // Add it to our list

this.renderTodoList(); // Update the webpage display

}

listTodos() {

return this.todos; // Return the array of todos (for further processing or rendering)

}

markTodoComplete(index) {

if (index >= 0 && index < this.todos.length) {

this.todos[index].markComplete();

this.renderTodoList(); // Update the display after marking complete

}

}

renderTodoList() {

const todoListElement = document.getElementById('todoList');

todoListElement.innerHTML = ''; // Clear the current list in HTML

this.todos.forEach((todo, index) => {

const listItem = document.createElement('li');

listItem.textContent = todo.description;

if (todo.completed) {

listItem.classList.add('completed'); // Add CSS class for styling completed items

}

// Create a "Complete" button for each to-do

const completeButton = document.createElement('button');

completeButton.textContent = 'Complete';

completeButton.onclick = () => this.markTodoComplete(index);

listItem.appendChild(completeButton);

todoListElement.appendChild(listItem);

});

}

}

In this class:

• The constructor initializes an empty array to hold our to-do items.

• addTodo(description) creates a new ToDo object and adds it to the array, then calls renderTodoList() to update the display.

• listTodos() returns the list of to-dos.

• markTodoComplete(index) marks a specific to-do as complete and refreshes the display.

• renderTodoList() finds the HTML element with the ID todoList, clears its content, and then creates list items for each to-do, including a “Complete” button.

Creating the HTML Structure

Next, open your index.html file and paste in the following HTML code:

<!DOCTYPE html>

<html>

<head>

  <title>My Simple To-Do App</title>

  <style>

    /* Simple CSS to style completed items */

    .completed {

      text-decoration: line-through;

      color: gray;

    }

  </style>

</head>

<body>

  <h1>My To-Do List</h1>

  <input type="text" id="todoInput" placeholder="Enter new to-do...">

<button id="addButton">Add To-Do</button>

  <ul id="todoList"></ul>

  <script src="script.js"></script>

</body>

</html>

This HTML file sets up:

• A heading for your to-do list.

• An input box (with id="todoInput") for entering new to-dos.

• An “Add To-Do” button (with id="addButton").

• An empty unordered list (with id="todoList") where your to-dos will appear.

• A link to the script.js file that contains your JavaScript code.

Making It All Work Together

Finally, let’s hook up our HTML elements with our JavaScript. At the bottom of your script.js file, add this code:

const myTodoList = new ToDoList(); // Create an instance of ToDoList

// Get references to the HTML elements

const addButton = document.getElementById("addButton");

const todoInput = document.getElementById("todoInput");

// Listen for clicks on the "Add To-Do" button

addButton.addEventListener("click", () => {
  const todoText = todoInput.value.trim(); // Get the text from the input box

  if (todoText) {
    // Only add if the input is not empty

    myTodoList.addTodo(todoText); // Add the new to-do

    todoInput.value = ""; // Clear the input box
  }
});

// Render the to-do list initially (it will be empty to start)

myTodoList.renderTodoList();

This code does the following:

• Creates an instance of the ToDoList class.

• Finds the HTML elements for the input and button.

• This code adds an event listener to the HTML button element that has the ID "addButton". This listener is set to react to "click" events on this button. When the "Add To-Do" button is clicked, the code inside the event listener function will execute. This code takes the text that the user has typed into the HTML input field with the ID "todoInput" and adds it as a new to-do item to our list.

• Initially renders the to-do list on the webpage.

Your Challenge: Go Proto-Style

Now that you’ve seen how classes can make building this to-do app more structured, here’s a challenge: Try building the same to-do app without using the class keyword. Use object literals and prototypes instead. Think about:

• How would you create a ToDo “blueprint” using a constructor function and prototypes?

• How would you add the markComplete() method to the ToDo prototype?

• How would you structure a ToDoList “blueprint” similarly?

By building the same app using both approaches, you’ll really understand that classes are just a nicer, more familiar way of writing prototype-based code.

Conclusion

Congratulations! You’ve built a basic, interactive to-do app using JavaScript classes and HTML. You now see how classes help you organize code and encapsulate related functionality. While classes are just syntactic sugar over prototypes, they make it much easier to write, read, and maintain your code—especially as your applications grow.

Your next step? Experiment with the prototype approach and compare it with the class-based approach. The more you code, the more natural these concepts will become. Happy coding, and keep building cool stuff.

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

As a developer, having a portfolio is important. It’s your personal space to showcase your skills, share projects, and impress potential employers. Whether you’re aiming to build an online presence, share your work with friends, or take your career to the next level, a portfolio is the perfect way to highlight what you can do.

In this article, I’ll guide you through building a simple portfolio website using just HTML and CSS. By the end, you’ll have a fully functional portfolio site ready to share with anyone.

What the Finished Portfolio Looks Like:

Before we get started, here’s a preview of what your portfolio will look like once we’re done:

If you’d prefer to skip ahead, you can get the full code on GitHub.

Here’s what we’ll cover:

• Project Overview and Setup

• How to Build the Header and Hero Section

• How to Build the About Section

• How to Build the Work Section

• How to Build the Contact Section and Footer

• Wrapping Up

Project Overview and Setup

Before we start coding, let’s take a look at the basic structure of the project. Here's how everything will be organized:

/assets
  - background_image.jpg
  - user.png
  - icon-github.svg
  - icon-twitter.svg
  - logo1.png
  - logo2.png
  - logo3.png
index.html
styles.css

This folder structure keeps things neat and organized. The /assets folder will hold all of your images and icons that will be used throughout the website, while the index.html file will contain the structure of your portfolio, and styles.css will control how everything looks.

Setting Up the HTML File

Let's start with the basic HTML structure. Open your index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Spruce - Dev Portfolio</title>
  </head>
  <body>
    <!-- Content will go here -->
  </body>
</html>

Here’s a breakdown of what this code does:

1. DOCTYPE: This tells the browser that this is an HTML5 document.

2. meta charset: Defines the character encoding, which helps display text properly.

3. meta viewport: Ensures the website is responsive on different screen sizes.

4. link to styles.css: Links the styles.css file for styling your website.

5. title: This is the text that appears in the browser tab when you open the website.

Now that our HTML file is set up, we’ll move on to the CSS.

Setting Up the CSS File

Let’s now add some basic styling using a CSS reset. This helps eliminate browser inconsistencies by normalizing styles across different browsers.

Here’s the basic CSS reset you’ll need:

/**
 * CORE CONFIG
 * This powers everything from utility class generation to breakpoints
 * to enabling/disabling pre-built components/utilities.
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: sans-serif;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  letter-spacing: -0.01em;
}

/* All elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}

:focus {
  outline: 2px dashed #00ff19;
  outline-offset: 0.25rem;
}

main:focus {
  outline: none;
}

This reset clears any default margins and paddings, ensuring that your layout remains consistent across browsers. You can find more info about what the code does in the comments.

Sizing and Spacing with Utopia

For spacing and typography, we’ll use a flexible system from Utopia, a tool designed to make responsive typography easier to implement. Here’s the CSS that will give us scalable, adjustable spacing and font sizes:

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
}

These CSS variables give you flexible, responsive font sizes and spacing, based on the viewport size. For instance, --step-5 corresponds to the largest font size, which you will use for main headings (h1), and smaller sizes like --step-1 for text that's less prominent.

How Typography and Spacing Work Together

To apply these scalable values, we’ll use the following for headings:

h1,
.h1 {
  font-size: var(--step-5);
}

h2,
.h2 {
  font-size: var(--step-4);
}

h3,
.h3 {
  font-size: var(--step-3);
}

h4,
.h4 {
  font-size: var(--step-2);
}

h5,
.h5 {
  font-size: var(--step-1);
}

Here, the h1 will be the largest size (using --step-5), and h2 will be a little smaller (--step-4), continuing down to h5. These variables ensure the text adjusts to different screen sizes and maintains consistent visual hierarchy.

Defining Constants for Layouts and Spacing

We can also define some utility classes and wrappers for more consistent layouts across the website. Here's how we can define some constants for layout styling:

/* define some constants */
.flex {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
@media (max-width: 468px) {
  .flex {
    flex-wrap: wrap;
  }
}
.flex_center {
  justify-content: center;
}
.flex_around {
  justify-content: space-around;
}
.flex_between {
  justify-content: space-between;
}
@media (max-width: 468px) {
  .flex_around {
    justify-content: center;
  }
  .flex_between {
    justify-content: center;
  }
}
.text_center {
  text-align: center;
}
.text_right {
  text-align: right;
}

/* define spacing */
.padding-top-3xs {
  padding: var(--space-3xs);
}

These classes allow you to quickly apply flexible layouts and spacing throughout your design. The .flex class will apply Flexbox, while .flex_center centers the content. There are also responsive adjustments for smaller screens like wrapping flex items when necessary.

Creating the Wrappers

To help structure your layout neatly and consistently, we’ll use wrappers. Wrappers ensure that content is centered and doesn’t stretch too far on wide screens:

/* create the wrappers */
.wrapper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.wrapper_inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

The .wrapper class ensures that the content doesn’t get too wide, while .wrapper_inner adds another layer of control for inner sections like a main content area or smaller containers.

How to Build the Header and Hero Section

Now that our project structure is ready, let’s get into building the first major sections: the Header and Hero. These sections are your site’s first impression, giving visitors a sense of who you are while offering easy navigation.

HTML for the Header and Hero

Here’s the HTML structure for both sections:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Spruce - Dev Portfolio</title>
  </head>
  <body>
    <header class="site_header">
      <div class="wrapper_inner">
        <nav class="site_header_nav">
          <ul role="list" class="flex flex_center">
            <li><a href="#0">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#work">WORK</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <section id="hero">
        <div class="wrapper">
          <div class="wrapper_inner">
            <div class="text_center hero_content">
              <h1 class="h2">Spruce Emmanuel</h1>
              <p class="h5">WEB DEVELOPER && TECHNICAL WRITER</p>
            </div>
          </div>
          <ul role="list" class="flex flex_between hero_social">
            <address>Port Harcourt, Nigeria</address>
            <ul role="list" class="flex">
              <li>Find me online</li>
              <li>
                <a href="https://github.com/iamspruce" target="_blank">
                  <img src="/assets/icon-github.svg" alt="GitHub" width="24" height="24" />
                </a>
              </li>
              <li>
                <a href="https://x.com/sprucekhalifa" target="_blank">
                  <img src="/assets/icon-twitter.svg" alt="Twitter" width="24" height="24" />
                </a>
              </li>
            </ul>
          </ul>
        </div>
      </section>
    </main>
  </body>
</html>

Header breakdown:

• Navigation: The navbar lets users quickly jump to key sections like Home, About, Work, and Contact. It’s centered using the .flex and .flex_center classes, making it clean and accessible.

• Flex layout: Links are laid out horizontally using .flex for a smooth, modern look.

Hero breakdown:

• Hero content: This is where you introduce yourself. Your name and title are centered with padding to give it space and clarity.

• Hero social: Below your bio, we’ve added your location and social links. These are aligned with .flex to keep everything neat and easy to navigate.

CSS for Header and Hero

Here’s the CSS to style these sections:

Header styling:

/* Style the header */
.site_header {
  padding: var(--space-s) 0;
  background: linear-gradient(rgba(26, 26, 64, 0.9), rgba(26, 26, 64, 0.9));
}

.site_header_nav ul li a {
  text-decoration: none;
  color: #fff;
}

• .site_header: Adds padding and a dark gradient for a sleek background.

• .site_header_nav ul li a: Removes link underlines and makes the text white for a modern, bold look.

Hero styling:

/* Hero section styling */
.hero_content {
  padding: var(--space-3xl) 0;
}

.hero_content h1 {
  margin-bottom: var(--space-s);
}

.hero_social {
  padding-top: var(--space-3xl);
}

/* General styling for the hero section */
section {
  padding: var(--space-2xl) var(--space-l);
}

section#hero {
  background: linear-gradient(rgba(26, 26, 64, 0.9), rgba(26, 26, 64, 0.9)),
    url("/assets/background_image.jpg");
  padding-bottom: 4px;
  background-size: cover;
  background-position: top;
  background-attachment: scroll;
  color: #fafafa;
  --color-accent: #8a2be2;
}

• .hero_content: Adds padding to keep the content spacious.

• .hero_social: Makes room for the social media links to stand out.

• section#hero: Sets a stylish gradient background with an image, ensuring the hero section feels engaging and visually striking.

Here’s what it looks like at this point:

How to Build the About Section

The About Section lets you introduce yourself and share your professional journey, giving visitors a glimpse of who you are and what you do.

HTML for the About Section

Here’s the HTML structure for the About Section:

<section id="about">
  <div class="wrapper">
    <div class="text_center">
      <h2>
        I am a web developer and technical writer. I write articles on web development and programming.
      </h2>
    </div>
    <div class="wrapper_inner">
      <div class="about_content flex flex_around">
        <figure class="about_figure text_center">
          <img width="200px" height="200px" src="/assets/user.png" alt="Developer" class="about_img" />
          <figcaption class="about_caption">Spruce ❤️</figcaption>
        </figure>
        <p class="h5">
          Born in Nigeria, I've spent 4+ years building with and writing about JavaScript. I help companies market their products and services through technical writing.
        </p>
      </div>
    </div>
  </div>
</section>

Breakdown of the About section:

• Introduction: A short and clear statement about your role as a developer.

• About content: The profile image and bio are positioned side by side with a flex container for balance.

• Figure and image: The profile image is displayed within a <figure> tag, with a caption below it.

• Text: A brief bio explaining your background and expertise.

CSS for the About Section

Here’s the CSS styling for the About section:

About section styling:

/* About section */
.about_content {
  padding: var(--space-xl) 0;
  transform: skewX(-10deg);
}

@media (max-width: 468px) {
  .about_content {
    transform: skewX(0deg);
  }
}

.about_figure {
  padding: var(--space-xl) 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #ccc;
  display: inline-block;
  padding: 5px;
}

.about_img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.about_caption {
  padding: var(--space-3xs) 0;
}

section#about {
  background-color: #ffffff;
  color: #333;
  --color-accent: #ffd700;
}

Breakdown of the CSS:

• Skew effect: The .about_content class gives the section a dynamic look with a slight skew, which is removed on small screens.

• Figure styling: The profile image gets padding and a subtle box shadow to help it stand out.

• Image styling: The image fills the space proportionally, ensuring it doesn't distort.

• Caption styling: Padding around the caption provides better spacing.

About section preview:

This is what your About Section will look like after applying these styles:

How to Build the Work Section

The Work Section is where you can showcase the companies or projects you’ve worked with or contributed to. This section helps to demonstrate your experience and the impact you've made, while providing visitors with visual examples of your professional background.

HTML for the Work Section

Here’s the HTML structure for the Work Section:

<section id="work">
  <div class="wrapper_inner">
    <div class="text_center">
      <h4 class="h5">
        So far I've helped 20+ companies build their web presence and
        improve their technical documentation.
      </h4>
      <ul role="list" class="work_logos flex flex_center">
        <li>
          <img src="/assets/logo1.png" alt="Acme Corp" />
        </li>
        <li>
          <img src="/assets/logo2.png" alt="Acme Innovations" />
        </li>
        <li>
          <img
            src="/assets/logo1.png"
            alt="Acme Solutions"
            width="50"
            height="50"
          />
        </li>
        <li>
          <img src="/assets/logo3.png" alt="Acme Technologies" />
        </li>
        <li>
          <img src="/assets/logo1.png" alt="Acme Enterprises" />
        </li>
      </ul>
    </div>
  </div>
</section>

Breakdown of the Work section:

• Introduction: The <h4> element introduces the work experience with a statement highlighting how you've helped companies with their web presence and technical documentation.

• Logos: The logos of the companies you've worked with are placed inside an unordered list (<ul>). Each logo is wrapped in a list item (<li>) for better structure and layout.

• Flexbox layout: The logos are positioned in a flexible layout using the flex and flex_center classes. This ensures that the logos are evenly spaced and centered horizontally within the section.

CSS Styling for the Work Section

Now let’s add some style to the Work section to make it visually appealing and responsive.

Work section styling:

/* work section */
.work_logos {
  margin-top: var(--space-xl);
}

section#work {
  background-color: #87ceeb;
  color: #0c0c0c;
  --color-accent: #2e8b57;
}

How to Build the Contact Section and Footer

The Contact Section and Footer provide a space for visitors to reach out to you and a final touch for the webpage. It’s essential to have an easy-to-use form for inquiries, along with a footer that includes your copyright information.

HTML for the Contact Section and Footer

Here’s the HTML structure for the Contact Section and Footer:

<section id="contact">
  <div class="wrapper">
    <div class="text_left">
      <p>
        Want to work together? <br />
        I'd love to hear from you.
      </p>
    </div>

    <div class="wrapper_inner">
      <h5 class="h3">Contact Me</h5>
      <form action="" method="post" class="contact_form">
        <div class="flex">
          <div class="form_group">
            <label for="name">NAME</label>
            <input type="text" id="name" name="name" />
          </div>
          <div class="form_group">
            <label for="email">EMAIL</label>
            <input type="email" id="email" name="email" />
          </div>
        </div>
        <div class="form_group">
          <label for="message">Message</label>
          <textarea id="message" name="message"></textarea>
        </div>
        <button type="submit">SEND MESSAGE</button>
      </form>
    </div>
  </div>
</section>


<footer>
  <section id="footer">
    <div class="wrapper">
      <div class="text_right">
        <p>&copy; 2025 Spruce Emmanuel</p>
      </div>
    </div>
  </section>
</footer>

Breakdown of the HTML:

• Contact section: This section includes a welcoming text that invites users to reach out, followed by a contact form with fields for the user’s name, email, and a message.

• Footer: The footer includes copyright information, ensuring that visitors know who owns the content. It’s placed at the bottom of the page and gives a professional touch to the site.

CSS for the Contact Section and Footer

Now let's style the Contact Section and Footer to make them both user-friendly and visually appealing.

Contact section styling:

/* contact section */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form_group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

textarea {
  resize: vertical;
  height: 150px;
}

button[type="submit"] {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

Footer section styling:

/* footer section */
section#footer {
  padding: var(--space-l) var(--space-l);
}

Wrapping Up

And there you have it! You've just built a simple portfolio website using only HTML and CSS. You've learned how to structure your project, apply a CSS reset, and create responsive typography and layout systems that scale beautifully across different screen sizes.

By following this guide, you now have a portfolio that you can be proud of and share with friends, family, or potential employers. The beauty of this project is that you can continue to expand and personalize it by adding new sections, showcasing more of your work, or experimenting with JavaScript to add interactive elements.

If you're interested in exploring more advanced features or learning how to host your portfolio online, check out my tutorial on How to Host Your Project on GitHub – Explained With Examples.

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

In 2016, I thought I wasn’t cut out for programming. After months of trying and failing with my first language, I came to a conclusion: I wasn’t smart enough. I thought some people were naturally gifted, while others, like me, simply weren’t meant for programming.

I gave up several times, convinced I didn’t have the talent needed to succeed.

Fast forward to today eight years later. I’ve become proficient in several programming languages. Looking back, I realize programming doesn’t come naturally to anyone. The difference between those who seem “gifted” and those of us who struggled is simple: it’s all about having the right foundational knowledge.

Programming is like walking into a movie halfway through you can’t understand what’s happening because you missed the beginning. The same applies to programming. You can’t build an advanced calculator app without understanding basic data types or algorithms.

Here’s the truth: programming isn’t inherently difficult. Most beginners struggle because they skip key foundational steps. Without these prerequisites, programming can feel like trying to swim in the deep end without first learning how to float.

But don’t worry I’ve got you covered. By the end of this article, you’ll know exactly what these prerequisites are, how to develop them, and why they’re the key to making programming click for you.

Here’s what we’ll cover:

1. Why Programming Feels Hard – Hint: It’s Not About Talent

2. The Prerequisites You Actually Need

3. Data Structures: Taking User Input

4. Algorithms: Performing Computations

5. Programming Languages: Displaying the Output

6. Additional Skills

7. How to Build the Right Foundations: Practice, Practice, Practice

8. Final Thoughts

Why Programming Feels Hard – Hint: It’s Not About Talent

Let me pick up my story again. By 2018, I was becoming a confident developer. I could build basic websites, fetch data from a database using APIs, and display it on the screen. I thought I had programming figured out.

Then came my first job interview.

During the interview, I was asked a seemingly simple question: “What happens when you type www.google.com into the address bar and press Enter? You have 30 minutes.”

I paused, thought for a moment, and gave my best answer. I spoke for maybe five minutes, then the interview ended.

Later, I Googled the question out of curiosity. What I found shocked me. The question wasn’t just about typing and entering a URL, it was about networks, servers, DNS lookups, HTTP requests, rendering engines, and more. That’s when it hit me: I had barely scratched the surface. There was so much foundational knowledge I was missing.

That day, I realized programming isn’t just about fetching data from a database or making a website look good. It’s about understanding the layers beneath the surface. If you're curious, I didn’t get the job. In fact, I never heard back from them. Honestly, I wouldn’t have hired me either.

Now, think about that interview question: Could you confidently explain what happens when you hit “Enter” on www.google.com?

If you’re like I was back then, probably not. But here’s the good news: If I were asked that same question today, I could speak on it for an hour. Heck, I could even write a 1,000-word article about it.

The Real Problem Isn’t Talent

Here’s the key takeaway: programming success isn’t about talent or intelligence. If you try to learn programming without the right preparation, you’ll keep hitting a wall of frustration.

So, no—it’s not talent you lack. It’s preparation. And the good news? Lack of preparation is something you can fix.

The Prerequisites You Actually Need

To understand the prerequisites, let’s take a step back and consider what a computer is actually for. At its core, the main purpose of a computer is to:

1. Take user input,

2. Perform computations, and

3. Display the output.

Every piece of software or program ever developed revolves around these three tasks. As a programmer, your role is to create software that performs these functions properly.

To do this, you need to build your skills in a way that aligns with these tasks. This means learning about data structures and algorithms, and then diving into a programming language. Let’s dig into each of these skills more deeply.

Data Structures: Taking User Input

So, users interact with your software, whether they’re clicking buttons, filling out forms, or uploading files. And guess what? All that interaction creates data that you, the developer, need to manage. But how do you do that without going crazy? That’s where data structures come in.

What Are Data Structures?

Think of data structures like special containers for your data. But not just any containers – they’re the kind that let you quickly grab, change, and organize your data in the most efficient way possible. Without them, managing user input would be like trying to store your clothes in a messy pile rather than a neat closet. Not fun, right?

A Few Data Structures You Should Know

There are tons of data structures out there, but let’s talk about a couple that are absolute essentials:

1. Arrays

Arrays are like simple, ordered lists. Imagine a row of boxes, each labeled with a number (index). You can put something in each box, and when you want to grab something, you just tell the system the number of the box. Super easy! It’s like a list of your favorite songs, where each song is numbered in order.

2. Hash Tables (or Dictionaries)

Hash tables are the cool kids of the data structure world. Instead of organizing data by number, they let you organize it by keys, which are like labels that help you find things super fast. If you had a list of customers, you could use their customer IDs as the “key” to look up their info. Think of it like a phone book—rather than flipping through pages, you jump straight to the person’s name based on how the names are organized (likely alphabetically).

Why Should You Care About Data Structures?

Good question! Here’s the deal: first of all, data structures help you organize your data in an intelligent way that makes sense. They keep things neat and make them easy to access. No more digging through a pile of data.

Second, data structures can make your apps faster. With the right data structure, you’ll be able to retrieve, modify, and sort data in the blink of an eye.

And finally, they help you solve problems like a boss**.** Whether you need to sort stuff, search through a lot of data, or handle some complex information, data structures are your go-to solution.

Example: Storing and Finding Customer Names

Okay, let’s say your app needs to store and retrieve customer names. You could do this in two ways. Let’s compare how an array and a hash table would handle this task.

1. Using an Array:
Imagine you’ve got a list of customer names, and they’re stored in a nice, neat array:

customers = ["John", "Jane", "Emily", "Michael"]

If you want to grab the name of the person in the third spot (Emily), you can just point to the third index like this:

print(customers[2])  // Output: Emily

Arrays are perfect if you have a simple, ordered list and you need to grab items by their position.

2. Using a Hash Table:
Now, let’s say you want to store customer names but also have a unique ID for each one. This is where a hash table (or dictionary) comes in handy. You use keys (like customer IDs) to quickly find their names. It’s much faster than searching through an array.

Here’s what it might look like in action:

customers = { 101: "John", 102: "Jane", 103: "Emily", 104: "Michael" }

Now, if you want to find the customer with ID 103 (Emily), you just look up the key:

print(customers[103])  // Output: Emily

Hash tables are awesome when you need to look things up fast. No searching, just straight to the point!

Ready to Dive Deeper?

If you're pumped to learn more about data structures, here are some resources to help you level up:

• Google’s Data Structures Learning Guide

• freeCodeCamp’s Data Structures and Algorithms Course

Algorithms: Performing Computations

Okay, so you've got your data. Now what? Well, you need to process it—and that’s where algorithms step in. Think of algorithms as a set of instructions, kind of like a recipe, that tells your computer how to solve a problem or complete a task, step-by-step.

Why Learn Algorithms Before You Learn a Programming Language?

Before you dive into learning a programming language, it helps to first learn algorithms. Here’s why: algorithms teach you how to think like a problem-solver. They help you break down challenges, think logically, and tackle them systematically. And when you know your algorithms, you’re not just memorizing syntax – you’re also learning how to solve problems efficiently. That makes programming a lot easier.

Let’s Dive Into Some Cool Algorithms

There are a ton of algorithms out there, but let’s keep it simple for now with a couple of the most popular ones. These will get you started and make your code run smoother than ever.

1. Bubble Sort: The Basics of Sorting

Bubble Sort is the beginner’s go-to algorithm for sorting. It’s simple—kinda like flipping pancakes. You start with the first two elements in the list, compare them, and if they’re in the wrong order, you swap them. Then you move to the next pair and keep doing that until everything is in order.

Here’s how it works:

Imagine you’ve got a list of names that need to be sorted alphabetically:

John, Sarah, Anna, Jake, Emily

Bubble Sort will go through the list, comparing two names at a time, swapping them if they’re out of order. It repeats this process until the list is sorted.

At the end, your list will look like this:

Anna, Emily, Jake, John, Sarah

It’s simple, but not the fastest for long lists.

2. Quick Sort: Speedy and Smart

If Bubble Sort is like a slow and steady turtle, Quick Sort is the speedy rabbit. It’s much faster, especially for larger data sets. Quick Sort is a “divide and conquer” algorithm—it breaks the list into smaller chunks, sorts them, and then puts everything back together.

Here’s how it works:

Let’s take that same list of names and use Quick Sort:

John, Sarah, Anna, Jake, Emily

First, pick a pivot—let’s say Jake. Now, split the list into two parts:

• Names that come before Jake alphabetically:

    Anna, Emily
  

• Names that come after Jake alphabetically:

    John, Sarah
  

Now, you repeat the process for each group. Keep picking pivots, splitting, and sorting until each group is small enough to be sorted easily. Then you just put everything back together, and voilà! Sorted list:

Anna, Emily, Jake, John, Sarah

Quick Sort is much faster than Bubble Sort, especially when you've got a lot of names to sort.

Again, there are many more algorithms to learn, but this should give you the basic idea of how they work and why they’re useful.

Why You Should Care About Algorithms

So why does any of this matter? Here’s the deal: first, algorithms help you solve problems more easily by breaking them down problems into manageable steps.

Second, they make your code faster. With the right algorithm, you can make your code run like a sports car—fast!

They also allow you to manage big datasets more easily. Some algorithms, like Quick Sort, can handle large sets of data in no time, which is crucial when performance matters.

Want to Get Better at Algorithms?

If you’re hungry for more algorithmic goodness, here’s where to go:

• LeetCode

• HackerRank

And if you want to dive deeper, here’s a free 48-hour course on the freeCodeCamp YouTube channel on Data Structures and Algorithms.

Programming Languages: Displaying the Output

Finally, we get to programming languages. This is where most beginners start and it’s often why they struggle. Without a solid grasp of data structures and algorithms, programming languages can feel like trying to run before you can walk. You can learn the syntax, but without understanding the fundamentals, you’ll find it harder to write effective code.

Why Programming Languages Should Come Last:

Once you understand how to manage input (data structures) and process it (algorithms), learning a programming language becomes much easier. You can go beyond worrying about memorizing syntax you may not understand, and start applying logic and solving problems. Programming languages are the tools you use to implement your algorithms and data structures.

Which Programming Language to Learn:

When it comes to picking a programming language, it’s important to align your choice with your goals. The language you choose should be based on what you want to build and your career path.

Here’s a breakdown of some common choices:

• JavaScript: If your goal is to build websites or web applications, JavaScript is essential. It runs in the browser and allows you to create dynamic and interactive websites. JavaScript also has a wide range of libraries and frameworks (like React, Node.js, and Vue) that can speed up development.

• Python: Known for its simplicity and readability, Python is a great choice for beginners. It’s widely used in data science, web development (with frameworks like Django and Flask), and machine learning. Python's syntax is clean and easy to understand, which makes it perfect for beginners focusing on building strong foundational skills.

• Java: If you’re interested in building large-scale, enterprise-level applications, Java is a solid choice. It's a statically typed language, meaning you define variable types explicitly. Java is commonly used in Android development and large backend systems.

• Swift: Swift is a great language for iOS app development. If you want to build mobile apps for the Apple ecosystem (iPhone, iPad, etc.), Swift is the way to go. It's fast, modern, and integrates well with Apple’s software development tools.

• C#: If you’re planning to work with game development, especially with Unity, C# is your best bet. It’s also used for enterprise applications, web development (via ASP.NET), and desktop apps.

How to Choose the Right Language for You:

The best way to choose a language is to consider what excites you and where you want to focus your efforts. Don’t worry too much about finding the "easiest" language – just focus on one that aligns with your interests.

For example, if you're excited about building websites, JavaScript might be the best place to start. If you’re interested in mobile apps, Swift or Kotlin could be a better fit.

Once you've picked a language, don’t stress about mastering every feature. Start with the basics and build projects that interest you. As you practice, you’ll naturally pick up more advanced concepts and techniques. The goal isn’t to become a master of syntax but to learn how to think like a programmer and solve problems effectively.

Here are some tips for getting started:

1. Start with Basics: Get comfortable with basic syntax and constructs. Learn how to write loops, conditional statements, and functions in your chosen language.

2. Build Simple Projects: Apply what you've learned by building small projects. If you're learning JavaScript or Python, for example, try building a simple to-do list app or a calculator. These types of projects help solidify your understanding.

3. Understand Libraries and Frameworks: Once you have the basics down, dive into libraries and frameworks that can help speed up development. For JavaScript, this might mean learning React or Vue. For Python, it could mean exploring Django or Flask.

Helpful Resources for Learning Programming Languages:

• JavaScript.info

• Python.org Tutorials

• freeCodeCamp JavaScript Curriculum

• Codecademy Python

Additional Skills

While mastering the fundamentals of programming is essential, there are other skills that can significantly boost your development journey. These include problem-solving techniques, debugging, and version control. These skills might not seem as glamorous as learning a programming language, but they are just as important.

Why These Skills Matter:

Even if you know the syntax of a language, you’ll still face challenges when writing real-world applications. Problems like bugs, performance issues, and collaboration with other developers are inevitable. That’s why these additional skills are so valuable as they help you tackle these challenges more effectively.

1. Problem-Solving:
Problem-solving is at the core of programming. It’s not enough to know how to write code – you also need to know how to break down a problem and figure out the best way to solve it. A good programmer typically spends just as much time thinking about the problem as they do writing the solution.

• Breaking down the problem: Start by understanding the problem. Ask questions like: What am I trying to achieve? What do I already know? What inputs do I have, and what do I expect as the output?

• Dividing it into smaller parts: Once you have a clear understanding, divide the problem into smaller, manageable pieces. This helps you focus on solving one part at a time rather than feeling overwhelmed by the entire issue.

• Looking for patterns: Often, problems in programming can be solved by recognizing patterns or using similar approaches you’ve learned before. Don’t be afraid to reuse code you’ve written or adapt it for a new task.

2. Debugging: No code is perfect, and bugs are inevitable. Debugging is the process of finding and fixing these bugs (problems in your code that cause it to mess up or not run). It's a skill that every programmer needs to learn because it helps you maintain and improve the quality of your code.

• Using print statements: A simple and effective debugging technique is inserting print statements (or logging) in your code. This allows you to inspect variables and understand what’s happening at different stages of your program.

• Using a debugger: A debugger is a tool that allows you to step through your code line by line. It’s especially helpful when dealing with more complex bugs. Many programming environments, like Visual Studio Code or PyCharm, have built-in debuggers.

• Checking for common issues: Bugs often come from simple issues like typos, off-by-one errors, or misunderstanding the behavior of a function. Before diving into complex debugging, double-check your assumptions.

3. Version Control: Version control is a tool that helps developers manage changes to their code over time. It allows you to keep track of edits, collaborate with others, and revert to previous versions if something goes wrong.

• Git: Git is the most widely used version control system. It allows you to save snapshots of your code, known as commits, and track the history of your project. It also makes collaboration easier by allowing multiple developers to work on the same project without stepping on each other's toes.

• GitHub: GitHub is a platform that hosts Git repositories and offers additional tools like issue tracking, project management, and code reviews. As you start collaborating with other developers, GitHub will become an invaluable resource.

• Basic Git commands: Learn basic Git commands like git init, git commit, git push, and git pull. Understanding these commands will allow you to manage your code effectively, both when working solo and with a team.

Helpful Resources for Additional Skills:

• LeetCode (for problem-solving practice)

• freeCodeCamp Debugging Guide

• Book on Learning Git and GitHub

• Git Documentation

• GitHub Guides

How to Build the Right Foundations: Practice, Practice, Practice

Okay, so you've got the theory down, but the real magic happens when you put what you've learned into action. Mastering data structures and algorithms isn't just about understanding them it’s about practicing until they feel second nature. Here’s how you can do that:

Start Small: Learn the Basics

Before you dive into big, complex problems, start by getting comfortable with the basics. Things like arrays, stacks, and queues are your best friends.

Example Practice:
Start with problems that help you understand how these data structures work. Try writing a function that reverses a string using a stack. Here's a quick idea of what that might look like in JavaScript:

function reverseString(inputString) {
    let stack = [];
    // Push all characters onto the stack
    for (let i = 0; i < inputString.length; i++) {
        stack.push(inputString[i]);
    }

    let reversedString = '';
    // Pop characters off the stack and add them to reversedString
    while (stack.length > 0) {
        reversedString += stack.pop();
    }

    return reversedString;
}

console.log(reverseString("hello"));  // Output: "olleh"

Why this helps: By using a stack to reverse a string, you're getting a hands-on feel for how stacks work—storing items and then removing them in reverse order. Practice small problems like this daily.

Solve Real Problems: Bring Algorithms to Life

Once you’ve nailed the basics, it’s time to apply what you've learned in real-world scenarios. Try using algorithms to solve problems that feel useful in real life.

Example Practice:
Create a simple sorting program to arrange names alphabetically using an algorithm like Bubble Sort or Quick Sort. Here’s a quick example using Bubble Sort:

function bubbleSort(names) {
    let n = names.length;
    for (let i = 0; i < n; i++) {
        for (let j = 0; j < n - i - 1; j++) {
            if (names[j] > names[j + 1]) {
                let temp = names[j];
                names[j] = names[j + 1];
                names[j + 1] = temp;
            }
        }
    }
    return names;
}

let names = ["John", "Emily", "Sarah", "Jake"];
console.log(bubbleSort(names));  // Output: ['Emily', 'Jake', 'John', 'Sarah']

Why this helps: Solving real problems with algorithms deepens your understanding and gives you a tangible result. Whether you’re sorting names or calculating averages, real problems make the learning experience stick.

Write Code Daily: Make It a Habit

The secret to becoming a great programmer is consistency. Choose a programming language (Python, JavaScript, Java, or whatever you like) and make it a habit to write code every day. Even if it's just for 30 minutes, those 30 minutes add up.

Example Practice:
Pick a small problem every day to practice applying data structures and algorithms. Use platforms like LeetCode or HackerRank for daily challenges that fit your skill level. Here’s an example of a coding challenge you might find on these platforms:

• Problem: Find the maximum number in a list of integers.

    function findMax(nums) {
        let maxNum = nums[0];
        for (let num of nums) {
            if (num > maxNum) {
                maxNum = num;
            }
        }
        return maxNum;
    }
  
    console.log(findMax([1, 3, 7, 0, -5]));  // Output: 7
  

Why this helps: Daily practice is key to internalizing what you’ve learned. It helps you stay sharp and gradually move from simple problems to more complex ones.

Challenge Yourself: Go Beyond Your Comfort Zone

When you feel like you’ve got the basics down, it’s time to level up. Get involved in coding challenges or take on personal projects that push you outside of your comfort zone.

Example Practice:
Join a hackathon or participate in a competitive coding challenge like Google Code Jam or Codeforces. These challenges will push your problem-solving skills to the limit and help you learn new algorithms and techniques.

Why this helps: Challenges force you to think critically and solve problems under time constraints. They help you learn faster and build confidence in your abilities.

Stay Consistent: Build a Routine

Consistency is the key to success in programming (and in most things, really). Set aside time every day or week to practice. Even if you don’t feel like it, just getting in some short coding sessions will make a huge difference in the long run.

Example Practice:
Create a study plan with weekly goals. For example:

• Week 1: Focus on basic data structures (arrays, stacks, queues).

• Week 2: Move on to sorting algorithms (Bubble Sort, Merge Sort).

• Week 3: Dive into more complex algorithms like Binary Search or Dynamic Programming.

A routine ensures that you’re making steady progress. Plus, it makes sure you don’t get stuck on one topic for too long.

Final Thoughts

Programming doesn’t have to be so hard. It’s like building a house: without a strong foundation, everything else feels unstable. But with the right basics like data structures, algorithms, and logical thinking, you’ll be amazed at how quickly you can create great things.

If someone had told me in 2016 that I’d be writing this article today, I wouldn’t have believed them. But with the right preparation, I turned frustration into confidence, and so can you.

Don’t let frustration hold you back. Focus on the fundamentals, practice consistently, and explore the resources I’ve shared. Remember, programming isn’t about being a genius it’s about preparation and persistence. You’ve got this!

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

In this tutorial, you’ll learn how to build a PWA using Next.js. We’ll start by creating a functional movie search website with these tools. Once we have the basics set up, we’ll transform this app into a PWA, adding offline support and faster load times. By the end, you’ll have a powerful PWA that offers a smooth user experience across all platforms—all from a single codebase.

What We’ll Cover

• Setting Up the Project: We'll begin by creating the movie search app using Next.js, which is an ideal choice in 2024 for building fast, reliable React apps that work well on all devices.

• Turning the App into a PWA: Next, we’ll walk through the steps to convert the app into a Progressive Web App, covering the key features and best practices of PWAs.

• Adding Offline Support: Finally, we’ll ensure your app stays functional even when there’s no internet connection by implementing offline capabilities.

Here’s what the final application will look like:

Audience

This tutorial is for React developers of all levels, whether you’re just starting out or already experienced. If you want to enhance your web apps with PWA features, this guide will take you through the necessary steps.

Prerequisites

Before you begin, make sure you’re familiar with React.js and Next.js. If you’re new to PWAs, you might want to read some introductory articles to get a quick overview.

• What are Progressive Web Apps? PWA Guide for Beginners

• Learn Progressive Web Apps

What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) is a type of web application built using standard web technologies like HTML, CSS, and JavaScript. PWAs work on the web, desktop, and mobile devices, combining the best features of web and native apps to deliver a fast, reliable, and engaging experience.

What makes PWAs special is their ability to work offline, send push notifications, and be installed on a user’s device without an app store. In short, a PWA makes your web app feel like a native app while keeping the flexibility and wide reach of the web.

Why Turn Your Web App into a PWA?

Converting your web app into a PWA brings several benefits:

• Cross-Platform Availability: A PWA works on any device with a browser, so you only need to develop and maintain one codebase for web, mobile, and desktop apps. This saves time and ensures a consistent experience across all platforms.

• Offline Capabilities: PWAs can work offline or in areas with poor connectivity by caching essential resources, keeping your app functional even without internet access.

• Improved Performance: PWAs are built to load quickly and run smoothly, even on slow networks, thanks to techniques like service workers and caching.

• Increased User Engagement: Users can add PWAs directly to their home screen without needing an app store. This easy access, along with features like push notifications, helps keep users engaged and coming back.

Disadvantages of PWAs

While PWAs offer many benefits, there are a few downsides:

• Limited Access to Device Features: PWAs don’t have full access to certain device features like Bluetooth or advanced camera controls. For apps that need deep hardware integration, this can be a limitation.

• Less Visibility: Since PWAs don’t go through app stores, they miss out on the visibility that app stores offer. Some users might also prefer downloading apps from app stores rather than directly from the browser.

• Limited iOS Support: Some features of PWAs, like push notifications, don’t work as well on iPhones and iPads compared to Android devices, which can limit engagement with iOS users.

Getting Started: Setting Up the Next.js Project

Now that we’ve talked about the benefits of PWAs, let’s get into the actual implementation. We’ll start by setting up the necessary files in our project.

Why Choose Next.js in 2024?

Next.js is a top choice for building React apps in 2024. It offers features like server-side rendering and static site generation, making it easier to create fast and reliable web apps. These features ensure your app performs well on all devices and even works offline.

Project Installation

Follow these steps to set up your Next.js project:

1. Clone the Repository: Open your terminal and run:

    git clone https://github.com/iamspruce/MovieMaster.git
   

2. Navigate to Your Project Directory:

    cd your-repo
   

3. Install Dependencies: Install the required packages with:

    npm install
   

4. Configure Environment Variables: Create a .env.local file in the root directory and add your OMDB API key:

    NEXT_PUBLIC_OMDB_API_KEY=your-api-key
   

You can obtain your API key from the OMDB API website.

Why is the OMDB API Key Needed?
The OMDB API key allows your PWA to fetch movie data, like titles, posters, and descriptions, directly from the OMDB database. This is essential for a movie-related app like MovieMaster, as it provides up-to-date information for users without you having to store all the data yourself.

In a PWA, using an API like OMDB ensures that the app can deliver fresh content to users, even when it's installed on their devices. Combined with the PWA's caching and offline features, users can still view movie details that were previously fetched, even if they lose internet connectivity.

Note: Make sure Node.js and npm are installed on your system. If they are not, you can download them from nodejs.org.

Project Structure Overview

Here’s a brief overview of the project layout:

• /public: Contains static files such as images and favicons.

• /src/app: Houses the main application files, including global styles (globals.css), the main page (page.tsx), layout configurations (layout.tsx), and client-side logic (RootLayoutClient.tsx).

• /src/components: Includes reusable components. Shadcn UI components are located in the /ui directory, and other specific components like MovieCard.tsx are here.

• /src/lib: Contains utility functions and data-fetching code, such as fetchMovies.ts and useMediaQuery.ts.

For styling, we use:

• TailwindCSS: Applied through globals.css for a utility-first approach to design.

• Shadcn UI: A library providing accessible, ready-to-use UI components.

Understanding Layouts

The project uses two key layouts:

1. layout.tsx: Manages server-side rendering and sets the application’s metadata. It uses the RootLayoutClient component to handle client-side functionality. Here’s how it looks:

    import React from "react";
    import type { Metadata } from "next";
    import { cn } from "@/lib/utils";
    import { Inter as FontSans } from "next/font/google";
   
    import RootLayoutClient from "./RootLayoutClient";
   
    const fontSans = FontSans({
      subsets: ["latin"],
      variable: "--font-sans",
    });
   
    export const metadata: Metadata = {
      title: "MovieMaster",
      description: "MovieMaster PWA helps you find the latest movies with an easy search by genre, year, and more. It works smoothly on any device, even offline, giving you a great movie browsing experience.",
      manifest: "/web.manifest",
    };
   
    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en" suppressHydrationWarning>
          <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
            <RootLayoutClient>{children}</RootLayoutClient>
          </body>
        </html>
      );
    }
   

2. RootLayoutClient.tsx: Handles client-side logic, essential for rendering interactive elements and managing UI states."

    "use client";
   
    import React from "react";
    import { Toaster } from "@/components/ui/sonner";
    import "./globals.css";
   
    export default function RootLayoutClient({ children }: { children: React.ReactNode }) {
      return (
        <div className="text-white flex flex-col">
          <div className="container mx-auto px-4 max-w-[1024px]">
            {children}
            <Toaster />
          </div>
        </div>
      );
    }
   

Running and Previewing the Project

To start working with your project:

Start the Development Server: In your terminal, execute:

npm run dev

This will start the development server, and you can view the application by navigating to http://localhost:3000 in your browser.

How to Turn Your Web App into a PWA

To transform your web app into a PWA, there are certain criteria that your app must meet. Let's walk through these requirements and implement the necessary changes step by step.

Criteria for a PWA

1. Served Over HTTPS: Your app must be served over a secure origin (HTTPS) or localhost for development. If you’re developing locally, this criterion is already met.

2. Web Manifest File: A web manifest file provides metadata about your app, such as its name, icons, and start URL. This file is crucial for making your app installable on a user's device.

3. Service Worker with a fetch Event: Your app must register a service worker with at least a fetch event. Registering a service worker with at least a fetch event is essential for your app to be recognized as a PWA and be installable. Beyond that, service workers enhance your app's performance and reliability, allowing it to cache resources and handle network requests even when offline.

How to Add a Web Manifest File to Your Next.js App

To add a web manifest file in your Next.js app, place it in the public/ directory and reference it in your layout file. Ensure that all the images you include in your manifest file are also in the public/ directory.

Here’s an example of a web.manifest file:

{
  "name": "Movie Master",
  "short_name": "Moviemaster",
  "theme_color": "#8936FF",
  "background_color": "#333333",
  "start_url": "/",
  "id": "MovieMaster",
  "display": "standalone",
  "description": "MovieMaster PWA helps you find the latest movies with an easy search by genre, year, and more. It works smoothly on any device, even offline, giving you a great movie browsing experience.",
  "icons": [
    {
      "purpose": "maskable",
      "sizes": "512x512",
      "src": "icon512_maskable.png",
      "type": "image/png"
    },
    {
      "purpose": "any",
      "sizes": "512x512",
      "src": "icon512_rounded.png",
      "type": "image/png"
    }
  ],
  "screenshots": [
    {
      "src": "screenshot1.png",
      "type": "image/png",
      "sizes": "1080x1920",
      "form_factor": "narrow"
    }
  ]
}

Required Fields

• name: The full name of your app.

• short_name: A shorter version of the app’s name, displayed when there isn’t enough space for the full name.

• icons: Icons representing your app at various sizes.

• start_url: The URL that opens when the app is launched.

• display: Defines the display mode (for example, standalone for a full-screen experience).

Recommended Fields

• theme_color: Sets the theme color of the browser’s UI, such as the address bar. This color enhances the native feel of your PWA.

This example shows how the theme color (#8936FF) is applied to the browser's UI, giving your PWA a native feel.

• background_color: Defines the background color for the splash screen when your app is launched.

• screenshots: Provide screenshots of your app to improve the installation experience, especially on Android devices.

This example illustrates how screenshots are displayed during the installation process, enhancing the user experience, especially on Android devices.

• id: Unique identifier for the app

How to Reference the Web Manifest File

Next, let’s add the manifest file to your pages. In Next.js, you can include it in the metadata of your Layout.tsx:

export const metadata: Metadata = {
  title: "MovieMaster",
  description: "Find the latest movies with ease.",
  manifest: "/web.manifest", // Link to the manifest file
};

How to Register a Service Worker

A service worker is a script that your browser runs in the background, allowing you to control how your app handles network requests, caching, and other tasks.

Registering a service worker with at least a fetch event is essential for your app to be recognized as a PWA and be installable.

Create a service-worker.js file in the public/ directory with the following code:

self.addEventListener('install', (event) => {
  console.log('Service Worker installing.');
});

self.addEventListener('activate', (event) => {
  console.log('Service Worker activating.');
});

self.addEventListener('fetch', (event) => {
  console.log('Fetching:', event.request.url);
  event.respondWith(fetch(event.request));
});

Then, register the service worker in your RootLayoutClient.tsx file:

"use client";

import React from "react";

export default function RootLayoutClient({ children }) {
  React.useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("/service-worker.js")
        .then((registration) => {
          console.log("Service Worker registered with scope:", registration.scope);
        })
        .catch((error) => {
          console.error("Service Worker registration failed:", error);
        });
    }
  }, []);

  return (
    <div className="text-white flex flex-col">
      <div className="container mx-auto px-4 max-w-[1024px]">
        {children}
      </div>
    </div>
  );
}

Once your app meets all the criteria, users can easily install it on their devices. For example, when using the Edge browser, an install option will appear in the browser’s menu, allowing users to add your app directly to their desktop or home screen.

Here's what the installation process looks like:

How to Add Offline Support

At this stage, even though our app is technically a PWA, it still behaves like a regular web application. Whenever a user requests a resource, the app makes a network request, and if the network fails, the user is greeted with an error page. This isn’t ideal, especially when the power of a PWA lies in its ability to function offline or in poor network conditions.

With a PWA, you can intercept every request made by your app using a service worker. This gives you the flexibility to decide how to serve content—from the network or from a cache. This control allows you to ensure that users can still access the app, even without an internet connection.

How to Deliver Resources from the Network

Let’s start by looking at how our app currently behaves, which is similar to any standard web application:

self.addEventListener("fetch", (event) => {
  event.respondWith(fetch(event.request));
});

This code simply fetches resources directly from the network. If the network is unavailable, the request will fail, leading to an error. This is the default behavior for a standard web app.

How to Implement Offline Support

To provide an offline experience, we need to cache our app’s resources when the user is online and then serve these cached resources when the user is offline. For this, we’ll use the Cache Storage API, which allows us to store resources locally on the user's device.

What to Cache?

The decision on what to cache depends on the needs of your application. For a movie search app like ours, we’ll want to cache the essential resources required to render a basic version of the application:

• The main HTML page

• CSS stylesheets needed to render the site

• Images used in the user interface

• JavaScript files required for functionality

• API request responses

Note: While you can cache almost anything, be mindful of storage limitations, as all cached items are stored on the user’s device. Use storage wisely to avoid taking up too much space.

When to Cache?

Once we know what to cache, the next thing to consider is when to cache. Should you cache everything during the service worker installation, or should you cache resources as they are requested?

The answer depends on the app's needs, but a good practice is to cache the core files required to render a basic version of the app during the service worker installation.

Here’s how you can do that:

const CACHE_NAME = "MOVIE_MASTER_V1";

async function cacheCoreAssets() {
  const cache = await caches.open(CACHE_NAME);
  return cache.addAll([
    "/",
    "/imdb-logo.svg",
    "/rotten-tomatoes-logo.svg",
  ]);
}

self.addEventListener("install", (event) => {
  event.waitUntil(cacheCoreAssets());
  self.skipWaiting();
});

In this code, self.skipWaiting() ensures that the new service worker activates immediately after installation, bypassing the waiting phase.

It’s also important to delete old caches when a new service worker is activated:

async function clearOldCaches() {
  const cacheNames = await caches.keys();
  return Promise.all(
    cacheNames
      .filter((name) => name !== CACHE_NAME)
      .map((name) => caches.delete(name))
  );
}

self.addEventListener("activate", (event) => {
  event.waitUntil(clearOldCaches());
  self.clients.claim();
});

The self.clients.claim() method ensures that the new service worker takes control of all pages as soon as it activates.

Dynamic Caching

Dynamic caching is particularly useful for React apps like ours, where static files are automatically generated. With dynamic caching, you don’t need to know all the files in advance. Instead, it handles the caching process for you as files are requested.

async function dynamicCaching(request) {
  const cache = await caches.open(CACHE_NAME);

  try {
    const response = await fetch(request);
    const responseClone = response.clone();
    await cache.put(request, responseClone);
    return response;
  } catch (error) {
    console.error("Dynamic caching failed:", error);
    return caches.match(request);
  }
}

With dynamic caching, files requested by the app are cached as they are fetched, ensuring that they are available for future offline use.

Caching API Requests

When it comes to caching API responses, instead of caching the entire response, it’s often better to cache the specific data returned by the API. For this, we can use IndexedDB, a local database built into the browser.

IndexedDB is more powerful than the Cache Storage API, especially for storing and retrieving structured data like JSON. This makes it an excellent choice for apps that require storing complex data or handling large amounts of information efficiently.

How to Set Up IndexedDB

First, create a function to open the database and create an object store:

const DB_NAME = "MovieMaster";
const DB_VERSION = 1;
const DB_STORE_NAME = "myStore";

function openDb() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore(DB_STORE_NAME, { keyPath: "url" });
    };
  });
}

Next, create functions to add data to and retrieve data from the database:

async function addData(url, jsonData) {
  const db = await openDb();
  const transaction = db.transaction(DB_STORE_NAME, "readwrite");
  const store = transaction.objectStore(DB_STORE_NAME);

  const data = {
    url,
    response: JSON.stringify(jsonData),
  };

  const request = store.put(data);
  await new Promise((resolve, reject) => {
    request.onsuccess = () => resolve();
    request.onerror = () => reject(request.error);
  });
}

async function getData(url) {
  try {
    const db = await openDb();
    const transaction = db.transaction(DB_STORE_NAME, "readonly");
    const store = transaction.objectStore(DB_STORE_NAME);

    const request = store.get(url);

    const result = await new Promise((resolve, reject) => {
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });

    if (result && result.response) {
      return JSON.parse(result.response);
    }

    return null;
  } catch (error) {
    console.error("Error retrieving from IndexedDB:", error);
    return null;
  }
}

How to Serve Cached Resources

Once we have cached our assets and stored API data in IndexedDB, the next step is to serve this data to users when they are offline. There are several strategies to achieve this:

Cache First Strategy

In the cache-first strategy, we check if a resource is available in the cache. If it is, we serve it from the cache; if not, we fetch it from the network. This is particularly useful for serving static assets like HTML, CSS, and JavaScript files:

async function cacheFirstStrategy(request) {
  try {
    const cache = await caches.open(CACHE_NAME);
    const cachedResponse = await cache.match(request);

    if (cachedResponse) {
      return cachedResponse;
    }

    const networkResponse = await fetch(request);
    const responseClone = networkResponse.clone();
    await cache.put(request, responseClone);
    return networkResponse;
  } catch (error) {
    console.error("Cache first strategy failed:", error);
    return caches.match("/offline");
  }
}

self.addEventListener("fetch", (event) => {
  const { request } = event;
  if (event.request.mode === "navigate") {
    event.respondWith(cacheFirstStrategy(request));
  } else {
    event.respondWith(dynamicCaching(request));
  }
});

In this setup, the cache-first strategy is applied when navigating to new pages, while dynamic caching handles other requests.

Network First Strategy

The network-first strategy is the opposite: it attempts to fetch resources from the network first, and if the network is unavailable, it falls back to the cache. This strategy is particularly useful for API requests where you want the most up-to-date data:

async function networkFirstStrategy(request) {
  try {
    const networkResponse = await fetch(request);

    if (networkResponse.ok) {
      const responseClone = networkResponse.clone();
      const responseData = await responseClone.json();
      await addData(request.url, responseData);
      return networkResponse;
    }

    throw new Error("Network response was not ok");
  } catch (error) {
    console.error("Network first strategy failed:", error);
    const cachedResponse = await getData(request.url);

    if (cachedResponse) {
      console.log("Using cached response:", cachedResponse);
      return new Response(JSON.stringify(cachedResponse), {
        status: 200,
        headers: { "Content-Type": "application/json" },
      });
    }

    return new Response("[]", { status: 200 });
  }
}

self.addEventListener("fetch", (event) => {
  const { request } = event;
  const url = new URL(request.url);

  if (url.origin === "https://www.omdbapi.com") {
    event.respondWith(networkFirstStrategy(request));
  } else if (event.request.mode === "navigate") {
    event.respondWith(cacheFirstStrategy(request));
  } else {
    event.respondWith(dynamicCaching(request));
  }
});

In our app, we use the network-first strategy for API calls, ensuring that the user gets the latest data when online, while falling back to cached data in IndexedDB when offline.

Full Service Worker Code

Here’s the complete service-worker.js file that incorporates everything we’ve discussed:

const CACHE_NAME = "MOVIE_MASTER_V1";
const DB_NAME = "MovieMaster";
const DB_VERSION = 1;
const DB_STORE_NAME = "myStore";

async function cacheCoreAssets() {
  const cache = await caches.open(CACHE_NAME);
  return cache.addAll([
    "/",
    "/imdb-logo.svg",
    "/rotten-tomatoes-logo.svg",
    "/offline",
  ]);
}

self.addEventListener("install", (event) => {
  event.waitUntil(cacheCoreAssets());
  self.skipWaiting();
});

async function clearOldCaches() {
  const cacheNames = await caches.keys();
  return Promise.all(
    cacheNames
      .filter((name) => name !== CACHE_NAME)
      .map((name) => caches.delete(name))
  );
}

self.addEventListener("activate", (event) => {
  event.waitUntil(clearOldCaches());
  self.clients.claim();
});

async function dynamicCaching(request) {
  const cache = await caches.open(CACHE_NAME);

  try {
    const response = await fetch(request);
    const responseClone = response.clone();
    await cache.put(request, responseClone);
    return response;
  } catch (error) {
    console.error("Dynamic caching failed:", error);
    return caches.match(request);
  }
}

function openDb() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore(DB_STORE_NAME, { keyPath: "url" });
    };
  });
}

async function addData(url, jsonData) {
  const db = await openDb();
  const transaction = db.transaction(DB_STORE_NAME, "readwrite");
  const store = transaction.objectStore(DB_STORE_NAME);

  const data = {
    url,
    response: JSON.stringify(jsonData),
  };

  const request = store.put(data);
  await new Promise((resolve, reject) => {
    request.onsuccess = () => resolve();
    request.onerror = () => reject(request.error);
  });
}

async function getData(url) {
  try {
    const db = await openDb();
    const transaction = db.transaction(DB_STORE_NAME, "readonly");
    const store = transaction.objectStore(DB_STORE_NAME);

    const request = store.get(url);

    const result = await new Promise((resolve, reject) => {
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });

    if (result && result.response) {
      return JSON.parse(result.response);
    }

    return null;
  } catch (error) {
    console.error("Error retrieving from IndexedDB:", error);
    return null;
  }
}

async function cacheFirstStrategy(request) {
  try {
    const cache = await caches.open(CACHE_NAME);
    const cachedResponse = await cache.match(request);

    if (cachedResponse) {
      return cachedResponse;
    }

    const networkResponse = await fetch(request);
    const responseClone = networkResponse.clone();
    await cache.put(request, responseClone);
    return networkResponse;
  } catch (error) {
    console.error("Cache first strategy failed:", error);
    return caches.match("/offline");
  }
}

async function networkFirstStrategy(request) {
  try {
    const networkResponse = await fetch(request);

    if (networkResponse.ok) {
      const responseClone = networkResponse.clone();
      const responseData = await responseClone.json();
      await addData(request.url, responseData);
      return networkResponse;
    }

    throw new Error("Network response was not ok");
  } catch (error) {
    console.error("Network first strategy failed:", error);
    const cachedResponse = await getData(request.url);

    if (cachedResponse) {
      console.log("Using cached response:", cachedResponse);
      return new Response(JSON.stringify(cachedResponse), {
        status: 200,
        headers: { "Content-Type": "application/json" },
      });
    }

    return new Response("[]", { status: 200 });
  }
}

self.addEventListener("fetch", (event) => {
  const { request } = event;
  const url = new URL(request.url);

  if (url.origin === "https://www.omdbapi.com") {
    event.respondWith(networkFirstStrategy(request));
  } else if (event.request.mode === "navigate") {
    event.respondWith(cacheFirstStrategy(request));
  } else {
    event.respondWith(dynamicCaching(request));
  }
});

With this setup, your PWA is now fully equipped to handle both static and dynamic content, provide an offline experience, and cache API data intelligently.

Further Reading

There are many more strategies and nuances to building a robust offline experience with service workers. If you want to dive deeper into this topic, consider reading more about:

• Different caching strategies: Cache-First, Network-First, Stale-While-Revalidate, and so on.

• Advanced service worker features like background sync and push notifications.

• Best practices for managing cache and storage limits

By understanding and implementing these concepts, you can ensure that your app remains functional and user-friendly, even in challenging network conditions.

Providing a Fallback Page

Even with caching strategies in place, there may be times when users try to access a resource that isn’t available offline and in the network. To handle these situations gracefully, we can create a fallback page. This page will be shown whenever a user tries to access content that can't be retrieved from either the cache or the network.

If you cloned the example project for this tutorial, you should already have a fallback page located in the app directory. This page is designed to handle offline scenarios gracefully and includes a simple Tic-Tac-Toe game for users to play while waiting for the connection to be restored. Here’s what the fallback page looks like:

"use client";
import TicTacToe from "@/components/TicTacToe";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

const Fallback: React.FC = () => {
  const [isOnline, setIsOnline] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
      // Redirect to homepage if online
      router.push("/");
    };

    const handleOffline = () => {
      setIsOnline(false);
    };

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, [router]);

  const handleRefresh = () => {
    if (navigator.onLine) {
      router.push("/");
    } else {
      setIsOnline(false);
    }
  };

  return (
    <div className="flex mx-auto h-screen max-w-[500px] w-full flex-col items-center justify-center h-screen bg-foreground text-black p-6 mt-12 text-white">
      <h1 className="text-3xl font-bold mb-6">
        {isOnline ? "You are online!" : "You are offline"}
      </h1>
      <p className="text-lg text-center mb-6">
        {isOnline
          ? "You are back online."
          : "Please check your internet connection and try again."}
      </p>
      <div className="">
        <TicTacToe />
      </div>
      {isOnline ? (
        <Link
          href={"/"}
          className="mt-6 px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600"
        >
          Return to Homepage
        </Link>
      ) : (
        <button
          onClick={handleRefresh}
          className="mt-6 px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600"
        >
          Refresh
        </button>
      )}
    </div>
  );
};

export default Fallback;

Note: You can customize this fallback page to suit your application’s needs, whether that’s displaying helpful offline content, providing a message, or offering a small interactive feature like the Tic-Tac-Toe game included here.

Caching the Fallback Page

Next, ensure that the fallback page is cached when the service worker is installed:

const CACHE_NAME = "MOVIE_MASTER_V1";

async function cacheCoreAssets() {
  const cache = await caches.open(CACHE_NAME);
  return await cache.addAll([
    "/",
    "/fallback",
    // other assets
  ]);
}

Serving the Fallback Page

Finally, modify the cacheFirstStrategy to serve the offline.html page when a request fails:

async function cacheFirstStrategy(request) {
  try {
    const cache = await caches.open(CACHE_NAME);
    const cachedResponse = await cache.match(request);

    if (cachedResponse) {
      return cachedResponse;
    }

    const networkResponse = await fetch(request);
    const responseClone = networkResponse.clone();
    await cache.put(request, responseClone);
    return networkResponse;
  } catch (error) {
    console.error("Cache first strategy failed:", error);
    return caches.match("/offline.html");
  }
}

This approach ensures that users always see a meaningful message instead of an error when they’re offline or when a resource is unavailable.

Conclusion

With our Next.js app set up, we’ve successfully transformed it into a fully functional Progressive Web App (PWA), making it better and more user-friendly.

This guide showed how to build a strong PWA using Next.js by adding features like offline support, caching, and service workers. These improvements boost performance and provide a smooth experience on all devices, combining the best of web and native apps.

With these tips, you’ll be ready to create engaging, reliable, and high-performance PWAs that stand out in web development.

Like many beginners, I started researching hosting platforms, only to find out about the cost of domains and hosting. That's when I discovered Git and GitHub, realizing I could share my projects without spending a dime.

If you're in the same boat, unsure about Git and GitHub and how to share your projects, this article is for you. It's the guide I wish I had seven years ago.

To demonstrate the power of Git and GitHub, we'll be using a real-world project as an example. Let's take the "IP Address Tracker application" project from this freeCodeCamp tutorial. You can download the source code for the project here.

If you've followed the tutorial and built the project, or if you have a project you'd like to share, this article is for you. We'll walk you through the steps to host your project on GitHub, making it accessible to the world.

Table of Contents

1. Audience

2. Prerequisite Knowledge

3. Getting Started With Git and GitHub

   1. What is Git?

   2. What is GitHub?

4. How to Set Up Git and GitHub

   1. How to Install Git on Windows

   2. How to Install Git on macOS

   3. How to Install Git on Linux

   4. How to Create a GitHub Account

   5. How to Configure Git

5. How to Initialize a Git Repository

   1. Step 1: Download and Open Your Project

   2. Step 2: Open the Project in VS Code

   3. Step 3: Open the Terminal in VS Code

   4. Step 4: Initialize a Git Repository

6. How to Track Changes with Git

   1. Preparing Changes with git add

      1. Adding Individual Files

      2. Adding All Changes at Once

   2. Saving Changes with git commit

7. How to Push Your Project to GitHub

   1. Step 1: Create a New Repository on GitHub

   2. Step 2: Link Your Local Repository to GitHub

   3. Step 3: Push Your Local Changes to GitHub

   4. Step 4: Verify Your Repository on GitHub

8. How to Host Your Project on GitHub Pages

   1. What are GitHub Pages?

   2. How to Enable GitHub Pages

   3. How to Get Your GitHub Pages URL

   4. How to Update Your GitHub Pages Site

9. Conclusion

Audience

This guide is for beginner developers who have started learning HTML, CSS, and JavaScript and want to learn how to share their projects using Git and GitHub.

Prerequisite Knowledge

Before diving in, ensure you are familiar with:

• Basic command-line operations.

• HTML, CSS, and JavaScript fundamentals.

• A text editor like VS Code.

Getting Started With Git and GitHub

I am not going to try to bore you with the differences between Git and GitHub. I am sure there are tons of resources in the world wide web already covering that but from a beginner's point of view, here is what they are:

What is Git?

Git is a tool that helps you keep track of all the changes you make in your project's code. Imagine building a website about cats. If you change the website's title from "Cat Facts" to "All About Cats," Git will remember the change. If you later decide that you prefer "Cat Facts," Git lets you go back to that version easily.

It's like having a record of every edit, addition, and deletion you make to your project, so you can always revisit previous versions and make changes with confidence.

What is GitHub?

GitHub is like a cloud-based scrapbook for your code. It's an online record where you save every edit, addition, and deletion you make to your project, so you can access it from anywhere and share it with others.

Imagine having a digital filing cabinet where you can store and manage different versions of your website. You can invite friends to see and even help you with your project, making it easy to collaborate. GitHub tracks changes and keeps everything organized, so if something goes wrong, you can always go back to a previous version.

How to Set Up Git and GitHub

Now that we know what Git and GitHub are, let's get them set up on your computer. Follow these step-by-step instructions:

How to Install Git on Windows

You can download the Git installer here.

Run the installer and follow the setup instructions, keeping the default settings.

How to Install Git on macOS

Open the Terminal on your Mac. You can find it in Applications > Utilities or use Spotlight to search for it.

Install Git using Homebrew by copying and pasting the following commands:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install git

Output:

==> Downloading https://github.com/Homebrew/brew/tarballs/...
==> Installing git
==> Pouring git-2.43.0.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/git/2.30.1: 1,434 files, 43.8MB

How to Install Git on Linux

Open Terminal on your Linux machine. Then use your distribution's package manager to install Git.

For example, on Ubuntu, copy and paste the following commands:

sudo apt-get update
sudo apt-get install git

Output:

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
git-man liberror-perl
Suggested packages:
git-daemon-run git-daemon-sysvinit git-doc git-el git-email git-gui gitk
gitweb git-mediawiki git-arch git-cvs git-svn git-hg
The following NEW packages will be installed:
git git-man liberror-perl
0 upgraded, 3 newly installed, 0 to remove and 0 not upgraded.
Need to get 7,841 kB of archives.
After this operation, 43.8 MB of additional disk space will be used.

To verify the installation, open Terminal (if it's not already open) and type the following command to verify the installation:

git --version

Output:

git version 2.43.0

You should see the installed Git version displayed.

How to Create a GitHub Account

• Go to GitHub and click on "Sign up."

• Follow the instructions to create your account, choose a username and password, and verify your email.

• Once your account is set up, customize your profile with a bio, profile picture, and links to your personal website or social media.

How to Configure Git

Open Terminal and configure Git with the same username and email as your GitHub account:

git config --global user.name "Your GitHub Username"
git config --global user.email "your.email@example.com"

No output will be displayed, but Git will store your credentials for future use.

How to Initialize a Git Repository

Now that you have Git and GitHub set up, let's start by initializing Git in a project. You can use any project of your choice or follow along with our example using the "IP Address Tracker" project.

Step 1: Download and Open Your Project

Download the source code for your chosen project or use the "IP Address Tracker" project from this link. Extract the downloaded ZIP file to a location on your computer. This will provide a concrete example to demonstrate Git concepts.

Step 2: Open the Project in VS Code

Open Visual Studio Code and click on "File" > "Open Folder" to select the folder where you extracted the project.

Step 3: Open the Terminal in VS Code

Click on "Terminal" > "New Terminal" to open the terminal in VS Code, where we'll interact with Git using commands.

Step 4: Initialize a Git Repository

Initialize a Git repository by running the following command:

git init

Output:

Initialized empty Git repository in /Users/spruceemmanuel/Documents/IP Address Tracker/.git/

This command creates a new hidden folder called .git in your project folder, which tracks changes to our project files. When you run git init, Git sets up the necessary files and directories to start versioning our project. This includes:

• A .git folder that stores all the metadata for your repository

• A main branch, which is the default branch for your repository

• A HEAD pointer, which points to the current branch (in this case, main).

By initializing a Git repository, you're telling Git to start tracking changes to your project files. This allows you to version your code, collaborate with others, and maintain a record of changes.

How to Track Changes with Git

Now that we’ve set up Git, it’s ready to keep track of changes in our project.

VSCode source control

Git notices change in our files, but before we can save these changes, we need to tell Git to do so.

Preparing Changes with git add

To get our changes ready to save, we use the git add command. Here’s how it works:

Adding Individual Files

If you want to add specific files, like index.html, script.js, or styles.css, you can use git add followed by the file name. For example:

git add index.html

Adding All Changes at Once

If you want to add all modified files in the project to the staging area, use:

git add .

Saving Changes with git commit

Once we’ve used git add, we use git commit to save our changes. Here’s how to do it:

git commit -m "Describe your changes here"

Replace "Describe your changes here" with a brief description of what you’ve changed. For example:

git commit -m "Update index.html with new content"

Output:

[master (root-commit) be9b1cd] Update index.html with new content
3 files changed, 386 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 styles.css

By using git add and git commit, you’re instructing Git to track and save specific versions of your project. This helps you manage changes, collaborate with others, and maintain a record of your progress.

How to Push Your Project to GitHub

Now that we have our changes tracked and committed locally, it’s time to upload our project to GitHub so we can share it with the world.

Step 1: Create a New Repository on GitHub

• Go to GitHub and log in to your account.

• Click the "+" icon in the upper-right corner and select "New repository."

• Fill out the repository name (for example: "ip-address-tracker"), and add a description if you like.

• Choose whether you want the repository to be public or private.

• Do not initialize the repository with a README, gitignore, or license (since we already have a local repository set up).

• Click "Create repository."

Step 2: Link Your Local Repository to GitHub

To connect your local repository with the new GitHub repository, you need to add a remote origin. Follow these steps:

• Copy the URL of your new GitHub repository. It should look something like this: https://github.com/yourusername/ip-address-tracker.git

• Open Terminal in Visual Studio Code and run the following command:

git branch -M main
git remote add origin https://github.com/yourusername/ip-address-tracker.git

Step 3: Push Your Local Changes to GitHub

Now, push your local commits to the GitHub repository with:

git push -u origin main

Output:

Enumerating objects: 8, done.
Counting objects: 100% (8/8), done.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (6/6), 645 bytes | 645.00 KiB/s, done.
Total 6 (delta 2), reused 0 (delta 0)
To https://github.com/yourusername/ip-address-tracker.git
* [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Step 4: Verify Your Repository on GitHub

Go back to your GitHub repository page. You should see all your files and commit history available online.

A Hosted Repository on GitHub

How to Host Your Project on GitHub Pages

Now that your project has been initialized with Git and pushed to GitHub, let’s host it on GitHub Pages. GitHub Pages is a free service that allows you to publish web projects directly from a GitHub repository.

What are GitHub Pages?

GitHub Pages turns your GitHub repository into a website. It's an easy way to showcase your projects without needing a separate hosting service. You can create static websites directly from your repositories.

How to Enable GitHub Pages

• Go to your GitHub repository in a web browser.

• Click on the "Settings" tab.

• Scroll down to the "Pages" section in the left-hand menu.

• Under "Source," select the branch you want to publish from (typically main or master), and choose the root folder.

Selecting the branch and root folder for GitHub Pages.

• Click "Save."

How to Get Your GitHub Pages URL

After enabling GitHub Pages, GitHub will provide you with a URL where your site is published. It usually follows this format:

https://<username>.github.io/<repository-name>

The URL where your GitHub Pages site is published.

Open your browser and paste the URL to see your live website.

Viewing the live website on GitHub Pages.

How to Update Your GitHub Pages Site

Every time you push changes to the selected branch in your repository, GitHub Pages will automatically update your live site. Here’s a quick reminder on how to push changes:

• Make changes to your project files.

• Add and commit your changes:

git add .
git commit -m "Your commit message"

• Push the changes to GitHub:

git push origin main

With these steps, you’ve successfully hosted your project on GitHub Pages. Congratulations! Your project is now live and accessible to the world.

Conclusion

Just a few years ago, I was in your shoes—excited about building my first website but unsure how to share it with the world. Today, you’ve not only learned what Git and GitHub are but also how to use them to host your very own project.

Imagine your excitement when your project goes live, and you can share it with friends, family, and the global community. You've now set up Git, created a GitHub account, initialized a Git repository, and hosted your project on GitHub Pages. Each step has brought you closer to becoming a more confident and capable developer.

This is just the beginning. Git and GitHub have many more features for you to explore. As you continue building and sharing projects, you’ll discover new ways to collaborate and improve your workflow.

Keep experimenting, keep learning, and most importantly, keep coding. The world is waiting to see what you create next!

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

Join me in this tutorial as I walk you through building a basic TODO app from the ground up.

The Importance of a TODO App for Beginners

A TODO app serves as an ideal project for beginners to grasp the fundamentals of a new programming language or framework quickly. It provides a practical context for learning essential concepts while working towards a tangible outcome.

If you're embarking on your React.js journey, building a TODO app along with this tutorial could be the perfect starting point.

Prerequisites

Before we begin, ensure you have basic knowledge of React.js and have Node.js and npm installed on your computer. If you haven't already, take a moment to set up your development environment.

Our Objective

Our goal is to create a simple TODO app with features. Here's what we'll be aiming for:

• Adding New TODOs: Enable users to add new tasks to the list.

• Editing and Deleting TODOs: Provide functionality to modify or remove existing tasks.

• Marking TODOs as Completed: Allow users to indicate when tasks are finished.

• Tracking Completed TODOs: Implement a feature to keep track of all completed tasks.

Feel free to expand upon this list with additional features if you like. For the purpose of this tutorial, we'll focus on these core functionalities.

This is an example of the TODO app we are going to be building:

A preview of our todo app

Table of Contents:

1. How to Set Up Your React App

2. How to Build the Components

   • The Header Component

   • The TODOHero Component

   • The Form Component

   • The TODOList Component

3. Putting it All Together

   • The Styling

4. Building the Functionality: How to add todos

   • A Way to Store the Todo Data

   • What Kind of Data Do We Want to Store?

   • How to Pass the Todo Data to Our-Components

   • Adding More Todo Data to Our-State

5. How to Build the TODO App's Functionality

   • How-to-Mark-Todos-as-Complete

   • How to Edit Todos

   • How to Delete Todos

6. How to Persist Our Todo Data

   • How to Persist the Todo Data to localStorage

   • How to Read the Todo Data from localStorage

7. And-We’ve-Done-It.