DEV Community: Luqman Shaban

Building a Smarter Way to Explore Next.js Docs: My Weekend with Semantic Search + RAG

Luqman Shaban — Mon, 28 Apr 2025 08:57:21 +0000

Introduction

This past weekend, fueled by curiosity and the "learn by doing" mantra, I embarked on a mission: to build a more intelligent way to navigate the vast landscape of the Next.js documentation. The result? An AI-powered semantic search and Retrieval-Augmented Generation (RAG) tool specifically designed for the official Next.js docs.

The Problem with Simple Keyword Search

We've all experienced the frustration of sifting through numerous search results, many only tangentially related to our actual query. Traditional keyword-based search often struggles with understanding the nuances of language and the context of our questions. This is particularly true for complex documentation like that of a powerful framework like Next.js.

My Solution: Semantic Search + RAG

To tackle this, I decided to leverage the power of semantic search and Retrieval-Augmented Generation (RAG). Here's the core idea:

Semantic Search: Instead of just matching keywords, the system understands the meaning behind your question. This allows for more relevant results, even if your query doesn't use the exact terminology present in the documentation.

Retrieval-Augmented Generation (RAG): Once relevant documentation snippets are found, a language model uses this context to generate a more informed and accurate answer to your question, complete with citations.

Diving into the Implementation

Here's a peek under the hood at the technologies and processes involved:

1. Populating the Knowledge Base:

The first crucial step was to ingest and process the Next.js documentation. This involved:

Fetching Navigation Links: I started by scraping the main Next.js documentation page to extract all the links to individual documentation pages.
Crawling and Extracting Content: For each of these links, I used CheerioWebBaseLoader to fetch the content of the page.
Chunking the Text: Large documents were split into smaller, manageable chunks using RecursiveCharacterTextSplitter. This is important for efficient embedding and retrieval.
Generating Embeddings: The heart of semantic search! I used GoogleGenerativeAIEmbeddings to create vector embeddings for each chunk of the documentation. These embeddings capture the semantic meaning of the text.
Storing in a Vector Database: The generated embeddings were stored in Chroma, an efficient vector store that allows for fast similarity searches.

import { Chroma } from "@langchain/community/vectorstores/chroma";
import { RecursiveCharacterTextSplitter } from "@langchain/textsplitters";
import { GoogleGenerativeAIEmbeddings } from "@langchain/google-genai";
import { load } from "cheerio";
import "dotenv/config";
import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio";
import { Document } from "@langchain/core/documents";

const embeddings = new GoogleGenerativeAIEmbeddings({
  model: "models/text-embedding-004",
  apiKey: process.env.GOOGLE_API_KEY,
});

const textSplitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
  chunkOverlap: 200,
});

const vectorStore = new Chroma(embeddings, {
  collectionName: "next-js-docs",
});

export async function PopulateDatabase() {
  const navs = await GetNavLinks();
  if (!Array.isArray(navs) || navs.length < 0) {
    throw new Error("Failed to populate database");
  }

  // const testNavs = navs.slice(0, 3);
  const testNavs = navs.slice(1, 375)


  for (let index = 0; index < testNavs.length; index++) {
    const i = testNavs[index];
    try {
      console.info(
        `🌐 Processing link ${index + 1} of ${
          testNavs.length
        }: https://nextjs.org/${i}`
      );

      const loader = new CheerioWebBaseLoader(`https://nextjs.org/${i}`);
      const docs = await loader.load();
      const splitDocs = await textSplitter.splitDocuments(docs);

      await InsertIntoDB(splitDocs);
    } catch (error) {
      console.error(`Error processing page ${i}:`, error);
      throw new Error("Failed to populate database \n " + error);
    }
  }

  console.log("✅ Successfully Completed inserting into db");
}

async function InsertIntoDB(validDocs: Document<Record<string, any>>[]) {
  const batchSize = 1000;
  const totalBatches = Math.ceil(validDocs.length / batchSize);

  console.info(
    `📄 Inserting ${validDocs.length} documents in ${totalBatches} batch(es)...`
  );

  for (let i = 0; i < validDocs.length; i += batchSize) {
    const batch = validDocs.slice(i, i + batchSize);

    try {
      await vectorStore.addDocuments(batch);
      console.log(
        `✅ Successfully added batch ${
          Math.floor(i / batchSize) + 1
        } of ${totalBatches}`
      );
    } catch (error) {
      console.error(
        `❌ Error adding batch ${
          Math.floor(i / batchSize) + 1
        } of ${totalBatches}:`,
        error
      );
      console.error(
        "🔍 First few items in failing batch:",
        batch
          .slice(0, 2)
          .map((doc) => doc.pageContent.substring(0, 150) + "...")
      );
    }
  }
}

async function GetNavLinks(): Promise<string[] | Error> {
  try {
    const response = await fetch("https://nextjs.org/docs");
    const html = await response.text();

    const $ = load(html);

    const routes: string[] = [];

    $("main nav ul li a").map((_, el) => {
      const href = $(el).attr("href");
      if (href) {
        routes.push(href);
      }
    });

    return routes;
  } catch (error) {
    console.error(error);
    return new Error("Failed to populate database");
  }
}

2. The Search and Answer Generation Pipeline:

When a user asks a question, the following steps occur:

- Keyword Generation (Optimization): To potentially refine the search, the ChatGoogleGenerativeAI model is used with a specific prompt to generate a concise list of relevant Next.js keywords from the user's question. This helps focus the subsequent semantic search.
- Semantic Retrieval: The generated keywords (or the original question) are used to perform a similarity search in the Chroma vector store using the similaritySearch function. This retrieves the most semantically similar documentation snippets.
- Answer Generation with Context: The retrieved documentation snippets are then passed to the ChatGoogleGenerativeAI model (specifically gemini-2.0-flash) along with the original question and a carefully crafted prompt. This prompt instructs the model to act as a knowledgeable Next.js assistant, using the provided context to answer the question accurately and cite the source.

import { Chroma } from "@langchain/community/vectorstores/chroma";
import { ChatGoogleGenerativeAI, GoogleGenerativeAIEmbeddings } from "@langchain/google-genai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { Annotation, StateGraph } from "@langchain/langgraph";
import { Document } from "@langchain/core/documents";
import 'dotenv/config'

const llm = new ChatGoogleGenerativeAI({
  model: "gemini-2.0-flash",
  apiKey: process.env.GOOGLE_API_KEY,
});

const embeddings = new GoogleGenerativeAIEmbeddings({
  model: "models/text-embedding-004",
  apiKey: process.env.GOOGLE_API_KEY,
});

const vectorStore = new Chroma(embeddings, {
  collectionName: "next-js-docs",
});

const promptTemplate = ChatPromptTemplate.fromMessages([
  ["system", `You are a knowledgeable and confident Next.js assistant.

Important behavior rules:
- Your top priority is to answer the user's question as accurately and helpfully as possible.
- Use the provided context to support your answer **only if it is relevant**.
- NEVER reference, mention, or comment on the existence, quality, or amount of the context.
- If helpful information is found in the context, cite it properly in markdown format (e.g., [link](url)).
- If context is not helpful, answer based on your own knowledge.
- Always respond in professional, clear Markdown format.
`],

  ["user", `
User Question:
{question}

Additional Context (if useful):
{context}
`],
]);



const keywordGenerationPrompt = ChatPromptTemplate.fromTemplate(
  `You are a semantic search assistant.

Given a user question, generate a concise list of 5-10 keywords that are highly relevant for searching within NEXT.JS official documentation only.

Important rules:
- Focus ONLY on Next.js concepts, features, methods, APIs, and relevant terminology.
- Do NOT include general cloud providers, hosting platforms, or unrelated services (e.g., AWS, Azure, Netlify, Vercel).
- Prefer specific technical terms over generic words.
- If the question is very general, generate keywords that stay within the context of building or deploying a Next.js app.

Return the keywords as a comma-separated list. No extra explanations.

User Question:
{question}

Keywords:
`
);


// Define state for application
const InputStateAnnotation = Annotation.Root({
  question: Annotation<string>,
});

const StateAnnotation = Annotation.Root({
  question: Annotation<string>,
  context: Annotation<Document[]>,
  answer: Annotation<string>,
  keywords: Annotation<string[]>,
});

// Define application steps
const generateKeywords = async (state: typeof InputStateAnnotation.State) => {
  const keywordsResponse = await llm.invoke(await keywordGenerationPrompt.invoke(state));
  const keywords = keywordsResponse.content?.toString().split(',').map((k: string) => k.trim()) || [state.question];
  console.log("Generated Keywords:", keywords);
  return { keywords };
};

const retrieve = async (state: typeof StateAnnotation.State) => {
  const searchQuery = (state.keywords || [state.question]).join(" ");
  const retrievedDocs = await vectorStore.similaritySearch(searchQuery, 20);
  return { context: retrievedDocs };
};


const generateAnswer = async (state: typeof StateAnnotation.State) => {
  const docsContent = state.context
    .map((doc: Document) => `Content: ${doc.pageContent}\nSource: ${doc.metadata.source}`)
    .join("\n\n---\n\n");
  const messages = await promptTemplate.invoke({
    question: state.question,
    context: docsContent,
  });
  const response = await llm.invoke(messages);
  return { answer: response.content };
};

// Compile application and test
const graph = new StateGraph(StateAnnotation)
  .addNode("generate_keywords", generateKeywords)
  .addNode("retrieve", retrieve)
  .addNode("generate_answer", generateAnswer)
  .addEdge("__start__", "generate_keywords")
  .addEdge("generate_keywords", "retrieve")
  .addEdge("retrieve", "generate_answer")
  .addEdge("generate_answer", "__end__")
  .compile();

export default async function Generate(question: string) {
  console.info("🔍 Performing a sample search...");
  let inputs = {
    question: question,
  };

  const result = await graph.invoke(inputs);
  console.log("🤖 Gemini's Response:");
  console.log(result.answer);
  return result.answer
}

3. Orchestration with Langgraph:

To manage the flow of information through these steps, I utilized Langgraph. This powerful tool allows you to define a graph of interconnected steps, making it easier to build complex AI workflows. In this case, the graph includes nodes for keyword generation, document retrieval, and answer generation.

Initial Impressions and Learnings

Building this tool over the weekend has been an incredibly rewarding learning experience. Here are some key takeaways:

- Semantic search significantly improves relevance: The ability to understand the meaning behind a query leads to far more accurate and helpful results compared to simple keyword matching.
- RAG provides grounded and trustworthy answers: By grounding the language model's responses in the official documentation, the answers are more reliable and can be easily verified through the provided citations.
- Langchain simplifies complex AI pipelines: It provides a fantastic set of abstractions and integrations that make building these kinds of tools much more manageable.
- Vector databases are crucial for efficient semantic search: Chroma's performance in storing and querying embeddings is essential for a responsive search experience.

The Journey Continues...
This weekend project is just the beginning. I'm excited to continue exploring Semantic Search in details and solve actual problems.

👉 Checkout the prototype here.

Stay tuned for future updates as this project evolves!

Building a Blazing-Fast URL Shortener in Go 🚀

Luqman Shaban — Mon, 28 Oct 2024 06:04:46 +0000

Hey, Dev Community!

After spending some time honing my skills with Go, I decided to tackle a fun and practical project: creating a URL shortener! Inspired by Chapter 8 of a system design book, I wanted to build something that’s fast, efficient, and minimalistic. So, here it is: https://url.tanelt.com 🎉

The Idea 💡

I’ve always been fascinated by systems that handle high traffic with minimal latency, so I wanted to apply that principle to a small-scale project. URL shorteners are a perfect use case: they need to be fast, lightweight, and designed to handle lots of quick database lookups. I set out with two main goals:

Minimalist design — Keep it simple, clean, and functional.
Optimized for speed — Implement a Go backend that minimizes response times.

The Stack 🛠️

Backend: Go
Database: I went with a simple data store to keep things light. For this project, MongoDB worked well for fast lookups and ease of use.
Frontend: Just HTML/CSS for a simple, distraction-free design. Go templates kept things neat and quick.

Challenges Faced 🧗‍♂️

Building this involved a few interesting challenges:

Slug Generation: Creating unique, short slugs that look clean but also avoid collisions.
Redirect Speed: I wanted to optimize server response time, so I spent time refining database queries and ensuring the server responds in milliseconds.
Minimalist UI: It’s easy to over-design, but keeping things minimal was a fun challenge.

Key Learnings 📘

API Dev with Gin: This project deepened my experience with Gin, a popular HTTP web framework for Go. Gin's speed and simplicity made it a perfect choice for building a responsive API. I learned a lot about routing and error handling, which were crucial for making the app’s performance snappy.
Efficient Database Access: Integrating MongoDB taught me the importance of optimizing database connections and queries for high-performance applications.
Balancing Design and Functionality: With a minimalist UI, every element on the page has to serve a purpose. This taught me to focus on usability above all.

Try It Out! 🎉

If you’re interested, check it out here: https://url.tanelt.com.

Source code

If you’re curious about the code, optimization tricks, or design decisions, let’s chat in the comments! I’d love to hear your thoughts or suggestions for further improvements.

Happy coding!

Devchat: Building my first social app

Luqman Shaban — Tue, 24 Sep 2024 13:10:23 +0000

Over the past two weeks, I went on a an exciting journey to build Devchat, a real-time messaging app specifically for developers. The goal was simple:

Learn websockets
Create a messaging app
Make it open-source

But, as with any project, devchat brought its fair share of challenges, hurdles and triumphs.

Starting with the Basics

I decided to build the front-end with React and Vite. I had to think twice whether to use Nextjs but it figured it word a level of complexity to the project. For styling, Tailwind CSS and Daisy UI came to the rescue, making it easy to create responsive layouts without writing to much CSS.

The front-end's focus was all about simplicity and user experience. With React Router, I set up smooth transitions between routes, including user authentication, messaging components, and user profiles. When it came to handling state between components, I used zustand for the first time and setting it up was as simple is it could get. Real-time messaging was next on my list.

Backend Architecture: Node.js & MongoDB

The backend was powered by Node.js and Express, with Mongoose as the ORM for the Mongo database. Structuring the API to handle user authentication, chat room creation, and message storage required a bit of planning. I used JWT for secure authentication and MongoDB's flexibility to store messages and user data efficiently. I knew that this could be simply implemented using firebase but that meant I would miss out out on learning the core concepts of websockets.

One challenge I faced here was designing a schema that could handle a large number of real-time messages without impacting performance and user experience. It was crucial to effectively save every conversation between users to the database and sync them with broadcast them to the client without conflict. After some thorough digging I found a solution.

Deployment & Scaling

Once the core functionality was in place, it was time to deploy. I chose Vercel for the client and Render to host the server. Both platforms have seamless integration with GitHub making it easy to set up continuous deployment. Every push to the repository automatically triggered a new deployment, which kept the entire development cycle smooth and efficient.
I also bought a domain from Hostinger and configured it on vercel pretty easily.

Key Takeaways
Building DevChat taught me so much in a short time. Here are a few key lessons:

Real-time systems are fascinating but complex. Managing live data streams requires planning and careful resource management.
Socket.io is a powerful tool for WebSocket communication, but it’s important to keep scalability in mind from the start.
Tailwind CSS and Daisy UI save a ton of time. Styling that would normally take hours (or days!) was simplified thanks to these tools.
Deployment is as important as development. Setting up automated deployments and managing environment variables across different environments (development and production) was key to ensuring a smooth experience.

The Open-Source Journey
What excites me most about DevChat is that it’s open source. Developers are welcome to contribute, add features, or adapt it to their own needs. The journey of building this project is ongoing, and I’m eager to see how it evolves with community input.

This project was a fantastic learning experience, and I’m proud of what I’ve built in such a short time. Right now, it boasts a simple connecting and messaging features, but I look forward to improving DevChat further and hope it becomes a valuable tool for developer communities around the world!

If you're interested, you can check out the site here and contribute here!

Adios

How to conditionally render components in React

Luqman Shaban — Sat, 21 Sep 2024 20:55:17 +0000

I've been working on a messaging web app this week and one of the features I wanted to implement was conditionally rendering multiple components when a particular condition is met. Let me explain.

Imagine a restaurant menu page that has a variety of food items in different categories, ranging from regular meals to drinks and desserts. You might want to add filters to render a specific category like desserts. There are several ways to achieve this, here are a few:

Using a bunch of if/else statements;
Using a ternary operator
Exclusive component rendering

We'll implement the third option while sing our restaurant menu page example, lets create three components returning the menu items:



const AllFoodItems = () => <div>All Menus</div>
const MealsComponent = () => <div>Meals</div>
const DessertComponent = () => <div>Dessert</div>
const DrinksComponent = () => <div>Drinks</div>

This is just a simple use case, but it will do the job. Suppose we wanted to exclusively render the desserts when the user clicks on the desserts button. We can do this by creating an array of boolean values, with each value representing a component, e.g., element 1 of the array, will represent AllFoodItems and element 2 represents MealsComponent and so on.

Initially, we set all the values to false except for the first one, which will be the default component rendered.



const [renderedComponents, setRenederedComponent] = useState([true, false, false, false])

The next step would be to create a function that will update the indexes by setting all their values to false except for one.



const toggleComponent = (index: number) => setRenederedComponent(prev => prev.map((_, i) => i === index))

In the function above, we're passing an argument index, and then mapping over the renderedComponents array. When we reach the element whose index matches the number passed in the argument, we update its value to true, while setting the other elements to false.

In the following step, we call this function inside button elements and pass the corresponding index for the component. You could imagine this as your filter component that renders a specific component on a click event:



    <ul>
        <li>
          <button onClick={() => toggleComponent(0)}>All</button>
        </li>
        <li>
          <button onClick={() => toggleComponent(1)}>Meals</button>
        </li>
        <li>
          <button onClick={() => toggleComponent(2)}>Dessert</button>
        </li>
        <li>
          <button onClick={() => toggleComponent(3)}>Drinks</button>
        </li>
      </ul>

Finally, we conditionally render the components when they're truthy:



      <div>
        {renderedComponents[0] && <AllFoodItems />}
        {renderedComponents[1] && <MealsComponent />}
        {renderedComponents[2] && <DessertComponent />}
        {renderedComponents[3] && <DrinksComponent />}
      </div>

Here's the full code:



import { useState } from 'react'


const AllFoodItems = () => <div>All Menus</div>
const MealsComponent = () => <div>Meals</div>
const DessertComponent = () => <div>Dessert</div>
const DrinksComponent = () => <div>Drinks</div>


const App = () => {
  const [renderedComponents, setRenederedComponent] = useState([true, false, false, false])

  const toggleComponent = (index: number) => setRenederedComponent(prev => prev.map((_, i) => i === index))
  return (
    <div>
      <ul>
        <li>
          <button onClick={() => toggleComponent(0)}>All</button>
        </li>
        <li>
          <button onClick={() => toggleComponent(1)}>Meals</button>
        </li>
        <li>
          <button onClick={() => toggleComponent(2)}>Dessert</button>
        </li>
        <li>
          <button onClick={() => toggleComponent(3)}>Drinks</button>
        </li>
      </ul>

      <div>
        {renderedComponents[0] && <AllFoodItems />}
        {renderedComponents[1] && <MealsComponent />}
        {renderedComponents[2] && <DessertComponent />}
        {renderedComponents[3] && <DrinksComponent />}
      </div>
    </div>
  )
}

export default App

Live demo:

This is a simple demonstration of how you can conditionally render components in React. It's a better approach when dealing with scenarios like food menus, product categories, etc.

I hope this was helpful, Lol!

Do you know a better way to do this?

Let's connect

How to Integrate AI into Your Node.js Application: A Step-by-Step Guide

Luqman Shaban — Wed, 17 Jul 2024 13:54:39 +0000

Introduction

From being a fantasy to becoming a reality, Generative AI has proven to be a beneficial tool for many of us. It has boosted our overall productivity, automated repetitive tasks, and, in my case, created informative and educational content. That said, GenAI (Generative AI) still has a long way to go and shouldn't be fully relied upon for any given task.

As a developer, you don't need to be an expert in AI or ML to build cool stuff. There are plenty of tools you can use to leverage the power of AI and integrate it into your projects. In this article, I will walk you through langchainjs, a framework for developing applications powered by Large Language Models (LLMs). I will guide you on how to build a simple Node.js API that takes user input and interacts with the Gemini model to generate a response.

This is not a Node.js API tutorial but rather an introduction to incorporating GenAI into the API. If you're new to Node.js, you can check out this article I've written on the topic.

To get started,

initialize a node project and run the following command:



npm i @langchain/google-genai dotenv express

Create a .env file at the root of your project and add the following code:



GOOGLE_API_KEY= _paste your gemini api key here_

_You can get your own API Key for free here_

I have a simple nodejs API that receives a user's prompt and returns a response:

This code sets up an Express server that uses the Google Generative AI model to handle POST requests at the /api/prompts endpoint. It receives a prompt from the request body, generates a response using the AI model, and sends the response back to the client. If an error occurs, it sends a 500 status with the error message. The API key and model are configured via environment variables.

Now let's implement the generateResponse method.

The generateResponse function asynchronously invokes the AI model with a given prompt. It logs and returns the generated response content. If an error occurs, it logs the error and returns the error message.

Here's the entire code:



import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
import 'dotenv/config'
import express from "express";

const model = new ChatGoogleGenerativeAI({
  model: "gemini-pro",
  maxOutputTokens: 2048
})

const app = express()
app.use(express.json())

app.post('/api/prompts', async(req, res) => {
  const { prompt } = req.body
  try {
    const response = await generateResponse(prompt)
    res.status(200).json({response: response})
  } catch (error) {
    res.status(500).json({ error: error.message})
    console.error(error)
  }
})


async function generateResponse(prompt) {
  try {
    const response = await model.invoke(prompt)
    console.log(response.content)
    return response.content
  } catch (error) {
    console.error(error);
    return error.message
  }
}


app.listen(4000, () => {
  console.log('SERVER RUNNING ON PORT:4000')
})

Let's test it out on Postman, my server is running on port 4000 so if i send a post request with the prompt, i should get back an answer from the Gemini Model.

Here's the response:

Conclusion

Generative AI has transitioned from fantasy to a valuable tool, enhancing productivity, automating repetitive tasks, and generating informative content. However, while GenAI is powerful, it shouldn't be solely relied upon for any task. As developers, we can leverage frameworks like langchainjs to integrate AI into our projects without being AI or ML experts. This tutorial demonstrated how to build a Node.js API that interacts with the Gemini model to generate responses based on user input.

Now that you have seen how to integrate Generative AI into a Node.js application, why not try it yourself? Start by setting up your project, and experiment with different prompts to see the varied responses the AI can generate. Don’t forget to share your experiences and projects with the community!

Subscribe to my newsletter to receive detailed tutorials every week and stay updated.

Extracting Text from Uploaded Files in Node.js: A Continuation

Luqman Shaban — Mon, 03 Jun 2024 15:30:21 +0000

Introduction

In our previous article, we covered the basics of uploading files in a Node.js application. Now, let’s take it a step further by extracting text from uploaded files. This tutorial will guide you through using the officeparser library to parse and extract text from office documents, such as PDFs, in a Node.js environment.

Step 1: Install the officeparser Library

First, install the officeparser library if you haven’t already:

npm install officeparser

Step 2: Create the Extraction Function

Next, create a function to extract text from the uploaded file. Here’s the code snippet:


import { parseOfficeAsync } from "officeparser";
async function extractTextFromFile(path) {
 try {
 const data = await parseOfficeAsync(path);
 return data.toString();
 } catch (error) {
 return error;
 }
}
const fileText = await extractTextFromFile('files/Luqman-resume.pdf');
console.log(fileText);

This function utilizes parseOfficeAsync to asynchronously read and extract text from the specified file path. If successful, it converts the data to a string and returns it; otherwise, it catches and returns any errors encountered.

Step 3: Integrate with Node.js endpoints
You can follow the tutorial in this Article to create an endpoint that supports file upload.

Conclusion
By following this tutorial, you’ve extended your Node.js application to extract text from these files. This can be particularly useful for applications requiring document processing or data extraction from user-uploaded files.

Stay tuned for more advanced features and enhancements in our next article!

— -

Stay Updated!

If you enjoyed this tutorial and want to stay updated with more tips and guides, subscribe to our newsletter for the latest content straight to your inbox.

How to Upload a File in nodejs: A step by step guide

Luqman Shaban — Mon, 27 May 2024 16:52:36 +0000

Introduction

Hi there! In this article we will delve into file handling in a nodejs server. We’ll briefly discuss a simple way to upload file or images in using multer. A package that streamlines the file uploading process in nodejs application. To get started, initialize a nodejs app and install the following packages:



npm i express nodemon cors multer

Once the installation is complete, make sure to modify your package.json file by adding:



“type”: “module”, and “start” : “nodemon index.js”

Your package.json file should like something like this



{
  "name": "file-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^3.1.0"
  }
}

Create a folder named upload in the root folder.

The next step will be creating index.js file (in the root folder) and importing the libraries we just installed.



import express from 'express'
import cors from 'cors'
import multer from 'multer'
We’ll then create instances:

const upload = multer({ storage: storage })
const app = express()
app.use(express.json())
app.use(cors())

This code sets up file uploads and a basic Express app:

1.File Storage:

Defines storage for multer to save files on disk in the uploads directory.
Generates unique filenames combining a timestamp and random number with the original filename.

2.Express App:

Creates an Express app (app).
Uses middleware:

express.json(): parses JSON data from requests.
cors(): potentially allows requests from other websites (CORS).

Now let’s create an endpoint that will accept file uploads and pass the multer middleware to it.



app.post('/api/file-upload', upload.single('file'), (req, res) => {
    try {
        res.status(200).json({ success: "file upload successful" })
    } catch (error) {
        res.status(500).json({ error: error })
    }
})

This code defines a route for uploading files:

/api/file-upload: This is the URL for the upload route. upload.single(‘file’): This middleware from multer handles single file uploads named “file” in the request. To upload multiple files, refer to the documentation.
(req, res) => …: This is the route handler function that executes when a POST request is made to the /api/file-upload URL.try…catch: It attempts to upload the file and sends a success response (status 200) with a message if successful.catch (error): If an error occurs during upload, it sends an error response (status 500) with the error details.

To starts the Express.js application and make it listen for incoming requests, add the following line of code:



app.listen(4000, () => console.log('RUNNING ON PORT 4000'))

Your index.js file should now be similar to this:



import express from 'express'
import cors from 'cors'
import multer from 'multer'

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function(req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        cb(null, uniqueSuffix+file.originalname)
    }
})
const upload = multer({ storage: storage })
const app = express()
app.use(express.json())
app.use(cors())

app.post('/api/file-upload', upload.single('file'), (req, res) => {
    try {
        res.status(200).json({ success: "file upload successful" })
    } catch (error) {
        res.status(500).json({ error: error })
    }
})
app.listen(4000, () => console.log('RUNNING ON PORT 4000'))

Open your terminal and run:

npm start
If everything went right, it should log: RUNNING ON PORT 4000.

To confirm that the code works as intended, we’ll test the API on postman. Open the app or it’s VsCode extension.

select Body, check form-data and make sure the key’s name is set to file of type file. Upload your file or image then click send.

You should see:



{
    "success": "file upload successful"
}

Indicating that the file has been uploaded. If you navigate to the upload folder we created earlier, you should see the file or image in there. And that’s it, you have successfully implemented the uploading feature in Node.js.

Conclusion
This article has successfully guided you through setting up file uploads in a Node.js application using the multer package. You learned how to:

1.Install required dependencies (express, cors, multer, and nodemon).

Configure file storage with unique filenames.
Create an Express.js app and use middleware for JSON parsing and CORS.
Define a route (/api/file-upload) to handle file uploads with multer.
Implement error handling for successful uploads and potential errors.
Start the server and test the functionality using Postman.

By following these steps, you’ve gained the ability to accept file uploads in your Node.js applications, enhancing their functionality and user experience.

Never miss an article: Sign up for our programming newsletter today!

Uploading Files with React (POST Request)

Luqman Shaban — Wed, 01 May 2024 13:57:26 +0000

Introduction

React applications are known for their interactivity and user-friendliness. But what if you want users to upload files, like images or document? Don't worry! In this article I'll guide you through the process of creating a React component that will handle file uploads. We'll break down the process, explore using libraries like axios, and even touch upon handling upload progress and displaying success/error messages.

Project Set Up
To get started, I've used vite to create the react app and picked typescript. Follow the guide on how to set up react using vite. After you're done setting up the project, open it in a code editor of your choice. (I'll be using VsCode). For styling, we'll be using tailwind css, here's a guide on how to set it up. Once done, Open App.tsx and replace it's content with the following:

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

open your terminal and run:
npm run dev

you should see something similar to this

Open the port on your browser and you should see

Creating the HTML Form
*Step 1 *- Delete the h1 element and replace it with a form. To make things easier, I have already styled the form for you.

export default function App() {
  return (
    <div className="flex justify-center items-center pt-44">
      <form>
        <div className='flex flex-col gap-y-4'>
          <div className="flex items-center justify-center w-full mt-5">
            <label htmlFor="dropzone-file" className="flex flex-col items-center justify-center p-3 w-full h-36 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-[#ffffff] hover:bg-[#f9f9f9]">
              <div className="flex flex-col items-center justify-center pt-5 pb-6">
                <svg className="w-8 h-8 mb-4 text-[#7b7b7b] dark:text-[#9b9b9b]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
                </svg>
                <p className="mb-2 text-sm text-[#7b7b7b] dark:text-[#9b9b9b]"><span className="font-semibold">Click to upload</span> or drag and drop</p>
                <p className="text-xs text-[#7b7b7b] dark:text-[#9b9b9b]">pdf, docx, doc (MAX.14MB)</p>
              </div>
              <input id="dropzone-file" type="file" className="hidden" accept='.pdf, .docx, .doc, .odt' required />
            </label>
          </div>

          <button className="py-3 w-full bg-[blue] text-white rounded-lg text-center">Submit</button>
        </div>
      </form>
    </div>
  )
}

The style is very minimal but it serves the purpose for now. However, you may modify the style to match your own preferences.

Adding Functionality
Up to this point you might have noticed that no message is shown after the file has uploaded. To address this challenge, we'l use React's useState hook to dynamically display a message letting the user know that the file has being successfully uploaded.

Step 1 - import useState from React.
import { useState } from "react"

*Step 2 *- Create a state variable
const [isFileUploaded, setIsFileUploaded] = useState(false)

Step 3 - conditionally render the message after file u

pload
 {/* Notify the user after successful file upload */}
          {isFileUploaded && <div className="flex flex-col gap-y-1 w-full">
            <p className="text-center text-blue-800 text-sm">File uploaded</p>
            <div className="h-1.5 w-full bg-green-500 rounded-full"></div>
          </div>}

Storing the file in a state variable
To save the upload file, we'll create a state variable and method to listen for file uploads.

Create the state variable const [file, setFile] = useState<File | null>(null)

In the above code we declaring a state variable and assigning File or null type.

Create HTML event method that listens for file uploads

const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.currentTarget.files
    if(files)
    setFile(files[0])
    // show success message on file upload
    setIsFileUploaded(true)
  }

This code snippet handles what happens when a user selects a file for upload.

handleFileInput is the function triggered when the user interacts with the file input element. It receives an event object (e) containing details about the change.
Inside the function, it accesses the files property from the event target (e.currentTarget.files). This holds an array of uploaded files.
Since we typically only want to handle a single file at a time, the code grabs the first element from the files array (files[0]).
It then updates the React state variable setFile with the chosen file.
Additionally, it sets another state variable, setIsFileUploaded to true, likely to trigger a success message for the user.
Pass the function to onChange event in the HTML input:

<input id="dropzone-file" type="file" className="hidden" accept='.pdf, .docx, .doc, .odt' required onChange={handleFileInput}/>

This code defines a hidden file input element that utilizes the handleFileInput function.
<input ... /> defines an HTML input element specifically for file uploads.
-id="dropzone-file": This assigns a unique identifier to the element, potentially for styling or referencing it later.
-type="file": This specifies the input type as a file upload field.
-className="hidden": This class likely hides the element from the user interface. You might use a separate dropzone component for user interaction and link this hidden input to it.
-accept='.pdf, .docx, .doc, .odt': This restricts file selection to specific formats: PDF, DOCX, DOC, and ODT.
required: This attribute enforces the user to select a file before submitting the form.
-onChange={handleFileInput}: This crucial part connects the input element to the handleFileInput function. Whenever the user selects a file, this function will be triggered to handle the chosen file.

Send the file to the server
For this, we'll use axios.

Install Axios - run the following command in your terminal
npm i axios
import axios - at the top of the file
import axios from 'axios';
create a method that will handle the file submit

const handleFileSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    const formData = new FormData()
    if (file) {
      formData.append('file', file)
    }

    try {
      const response = await axios.post(`your_api_endpoint`, formData, { headers: { "Content-Type": "multipart/form-data" } })
      console.log(response);

    } catch (error: unknown) {
      console.error(error);
    }
  }

This code snippet handles submitting the form with the uploaded file.
-handleFileSubmit is an asynchronous function triggered when the form is submitted (

).
-e.preventDefault() prevents the default form submission behavior, allowing us to control the file upload process.
-const formData = new FormData() creates a new FormData object, specifically designed for handling file uploads.
-if (file) { formData.append('file', file) } checks if a file has been selected (file state variable) and if so, it adds the file to the formData object using the append method. The first argument ('file') specifies the key used on the server-side to access the file, and the second argument (file) is the actual file object.
-try...catch block handles the asynchronous nature of the file upload: try block attempts to send a POST request using axios.post. The first argument ('your_api_endpoint') is a placeholder for your actual server-side endpoint that will receive the uploaded file. The second argument (formData) is the FormData object containing the file. The third argument ({ headers: { "Content-Type": "multipart/form-data" } }) sets the Content-Type header in the request to multipart/form-data, which is essential for file uploads. catch (error) block catches any errors that might occur during the upload process and logs them to the console for debugging.
console.log(response); (within the try block) logs the server's response to the console, allowing you to inspect the outcome (potentially success message or any additional data).
In essence, this code snippet takes the uploaded file, prepares it for sending with FormData, and uses axios.post to submit it to your server-side API.

Pass the handleFileSubmit method to the form <form onSubmit={handleFileSubmit}>

Conclusion

By now, you've equipped yourself with the skills to confidently integrate file uploads into your React applications. Remember, this is just the beginning! You can further enhance the user experience by adding features like drag-and-drop upload zones, progress bars, and informative error messages.
Stay Connected, Keep Learning!
If you have any questions or want to delve deeper into React development, feel free to join our WhatsApp group! We have a thriving community of developers eager to share knowledge and collaborate.

Join the WhatsApp Group

Keep up-to-date with the latest React trends and techniques. Happy coding!

Getting Started with Go Programming Language

Luqman Shaban — Fri, 29 Mar 2024 15:17:06 +0000

Introduction

Go, a statically typed, high-level programming language developed by Google in 2009, is considered one of the best choices for building back-end applications. This includes web development (APIs), cloud services (like Docker), and many other use cases. Go’s speed also makes it well-suited for complex applications.

In this blog, I will walk you through the process of initializing a Go project and printing out a simple Hello, World statement. To follow along, make sure you have Go installed in your machine. Let’s start of by creating a simple hello world project.

Open your terminal, create a new folder named helloWorld and initialize Go inside the project.

mkdir helloWorld
cd helloWorld
go mod init helloWorld

#output
#go: creating new go.mod: module helloWorld

Let’s create a simple program that prints hello world. — Open the project in your preferred code editor — create a main.go file — Paste the following code inside the file

package main

import (
        "fmt"
)

func main() {
        fmt.Println("Hello, World!")
        //prints Hello, World
}

Explanation

1. package main:
This line declares the package name for this code file. In Go, code is organized into packages, which act like folders to group related functionality.
The name main is special and signifies that this package contains the entry point for the program. This means the code within this package will be executed when you run the program.

2. import (“fmt”)

This line imports a package called fmt. Go has a standard library with various pre-written functionalities. The fmt package provides functions for formatted printing and input/output operations.
By importing fmt, you gain access to the functions defined within that package. In this case, we'll be using a function from fmt later in the code.

3. func main() {}

This line defines a function named main. Functions are reusable blocks of code that perform specific tasks.
The main function has a special role in Go programs. It's the starting point where the program's execution begins.
The curly braces {} mark the beginning and end of the function body, where you place the code that the function will execute.

4. fmt.Println(“Hello, World!”)

This line is where the actual action happens. It calls a function named Println from the imported fmt package.
Println takes one argument, which in this case is a string literal "Hello, World!". A string literal is text enclosed in double quotes.
The Println function prints the provided string ("Hello, World!") to the console, followed by a newline character.

Conclusion

Congratulations! You’ve successfully created your first Go program and printed “Hello, World!” to the console. This provides a solid foundation for exploring Go’s functionalities further. In the next section, we’ll delve deeper into Go’s basic building blocks, like variables, data types, and control flow statements. By understanding these fundamentals, you’ll be well-equipped to write more complex Go programs.

Fetching and rendering data from an API in React.js

Luqman Shaban — Fri, 27 Oct 2023 19:14:46 +0000

Introduction

Working with data has become a vital aspect of modern web apps, and knowing how to work with data can make you stand out from other developers. In this article, we’ll be covering the topic by creating a quote generator web application. You can view the live app here , and for those interested in the code, the GitHub repo is available here

Set-up

create a new React app
Install the dependencies: npm i axios react-icons
set up tailwind CSS (Optional) I’ll be using it for styling follow this guide to set it up

Implementation

In your App.js file, import the following dependencies:

import { useEffect, useState } from 'react';
import axios from 'axios';
import { ImQuotesLeft, ImQuotesRight } from 'react-icons/im'

create two states inside the App component:

const [quotes, setQuotes] = useState([])
const [randomQuote, setRandomQuote] = useState()

The quotes state will store the quotes retrieved from the dummy API while the randomQuote will store the quote to be rendered.

To send a request to the API, let’s create an asynchronous function:

const getQuotes = async () => {
    try {
      const response = await axios.get('https://dummyjson.com/quotes')
      setQuotes(response.data.quotes)
    } catch (error) {
      console.error(error);
    }
  }

Create a function that will pick a random quote from the array of quotes

const generateRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length)
    setRandomQuote(quotes[randomIndex])
    console.log(quotes[randomIndex]);
  }

The variable randomIndex generates a random index to select a quote from the quotes array
setRandomQuote(quotes[randomIndex]) sets the randomQuote state to the quote at the randomly chosen index from the code before it.

Call the getQuotes method

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

Create the button

Inside the div container, create a button that will generate a random and add a click event:

return (
    <div className="md:p-32 px-10 flex items-center justify-center flex-col gap-y-20 bg-black w-full h-[100vh] font-sans">
      <button onClick={generateRandomQuote} className='text-white border border-white  p-2 rounded-lg hover:text-black hover:bg-white transition ease-in-out duration-75'>Generate Quote</button>
    </div>
  );

Rendering the random quote

return (
    <div className="md:p-32 px-10 flex items-center justify-center flex-col gap-y-20 bg-black w-full h-[100vh] font-sans">
      {randomQuote &&
        <article className='bg-slate-200 shadow-md shadow-slate-50 md:w-auto w-full-10 h-auto rounded-xl p-10 text-black'>
          <p className='flex items-start md:flex-row flex-col gap-x-2 bg-slate-400 p-2 rounded-md shadow-md font-medium mb-3'>
            <ImQuotesLeft /> 
            {randomQuote.quote} 
            <ImQuotesRight />
          </p>
          <p className='text-gray-500 font-bold'>{randomQuote.author}</p>
        </article>
      }
      <button onClick={generateRandomQuote} className='text-white border border-white  p-2 rounded-lg hover:text-black hover:bg-white transition ease-in-out duration-75'>Generate Quote</button>
    </div>
  );

In the above code, we conditionally rendered random { randomQuote && <article></article>} this part ensures that the quote only renders when the randomQuote state has a value assigned to it to prevent errors and optimize performance.
Inside the article, the first

element renders the random quote. <ImQuotesLeft /> and <ImQuotesRight /> are the quote icons from the react-icon library.
{randomQuote.quote} renders the actual quote itself. If you run the app and the browser's console, you'll see the following data from the API:
{id: 4, quote: 'Two roads diverged in a wood, and I—I took the one…raveled by, And that has made all the difference.', author: 'Robert Frost'}
It's an Object with the keys id, quote, and author. Hence the randomQuote.quote.
The second <p> tags, renders the Author's name, in the same manner, the elements before it did by accessing the value of the the author from the Object:{randomQuote.author}
Final Code:
This is how the file looks:

import { useEffect, useState } from 'react';
import axios from 'axios';
import { ImQuotesLeft, ImQuotesRight } from 'react-icons/im'

function App() {
  const [quotes, setQuotes] = useState([])
  const [randomQuote, setRandomQuote] = useState()

  const getQuotes = async () => {
    try {
      const response = await axios.get('https://dummyjson.com/quotes')
      setQuotes(response.data.quotes)
    } catch (error) {
      console.error(error);
    }
  }

  const generateRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length)
    setRandomQuote(quotes[randomIndex])
    console.log(quotes[randomIndex]);
  }

  useEffect(() => {
    getQuotes()
  },[])
  return (
    <div className="md:p-32 px-10 flex items-center justify-center flex-col gap-y-20 bg-black w-full h-[100vh] font-sans">
      {randomQuote &&
        <article className='bg-slate-200 shadow-md shadow-slate-50 md:w-auto w-full-10 h-auto rounded-xl p-10 text-black'>
          <p className='flex items-start md:flex-row flex-col gap-x-2 bg-slate-400 p-2 rounded-md shadow-md font-medium mb-3'>
            <ImQuotesLeft /> 
            {randomQuote.quote} 
            <ImQuotesRight />
          </p>
          <p className='text-gray-500 font-bold'>{randomQuote.author}</p>
        </article>
      }
      <button onClick={generateRandomQuote} className='text-white border border-white  p-2 rounded-lg hover:text-black hover:bg-white transition ease-in-out duration-75'>Generate Quote</button>
    </div>
  );
}

export default App;

Conclusion
In this article, we’ve explored the fascinating world of web development and data manipulation by creating a quote generator web application. We began by emphasizing the increasing importance of working with data in modern web applications, highlighting the significance of this skill for developers. I hope the article helped.

Happy coding!

GitHub Repo

Join our community by subscribing to the newsletter to receive regular updates, fresh insights, and exclusive content.

Let’s Connect:
LinkedIn
Website

React Router: A step-by-step guide

Luqman Shaban — Sat, 21 Oct 2023 17:35:22 +0000

Introduction

React Router is a crucial tool for building dynamic, single-page applications in React. It provides a seamless way to manage navigation, routing, and user interactions within your web application. In this article, we will explore the fundamentals of React Router, its core features, and how to implement routing in your React applications.

What is React Router?

React Router is a popular library for managing client-side routing in React applications. It allows you to create complex, multi-page web applications that feel like traditional websites while still being single-page applications (SPAs) under the hood. With React Router, you can define and manage routes, enabling users to navigate through different views of your application without having to request a new HTML page from the server.

Key Concepts

Before diving into the implementation, let’s understand some essential concepts:

1. Route: A route is a mapping between a URL and a component. When a user visits a specific URL, React Router renders the corresponding component.
2. Router: The router is the top-level component that provides the routing infrastructure. In React Router, you typically use BrowserRouter for web applications and HashRouter for static sites.
Nested Routes: React Router allows you to nest routes, creating a hierarchy of components. This is especially useful for layout structures.
3. Link: The Link component enables navigation by creating anchor-like elements that maintain the application's state.

Implementation
To use React Router in your project, you need to follow these steps:

1.Installation: Begin by installing React Router using npm or yarn:
npm install react-router-dom

**2. Set-Up: **Open index.js and wrap the App component with it:

import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
     <App />
     </BrowserRouter>
   </React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

3. Creating the Navbar: create a Navbar.js file in your src folder and add the following code:

 import { Link } from "react-router-dom";

 const Navbar = () => {
   return (
     <nav>
       <ul>
         <li>
           <Link to="/">Home</Link>
         </li>
         <li>
           <Link to="/about">About</Link>
         </li>
         <li>
           <Link to="/contact">Contact</Link>
         </li>
       </ul>
     </nav>
   );
 }

 export default Navbar

In the above code, we’ve imported Link from react-router-dom, to enable navigation to different sections of the web app.

4. Create the Pages: Go ahead and create the files: Home, About and Contact. Inside the files, create the react components and import the Navbar component in each file.

i. Home.js

 //Home.js
 import React from 'react'
 import Navbar from './Navbar'

 const Home = () => {
   return (
     <div>
         <Navbar />
         <h1>Home</h1>
     </div>
   )
 }

 export default Home

ii. About.js

 //About.js
 import React from 'react'
 import Navbar from './Navbar'

 const About = () => {
   return (
     <div>
         <Navbar />
         <h1>About</h1>
     </div>
   )
 }

 export default About

iii. Contact.js

 //Contact.js
 import React from 'react'
 import Navbar from './Navbar'

 const Contact = () => {
   return (
     <div>
         <Navbar />
         <h1>Contact</h1>
     </div>
   )
 }

 export default Contact

5. Create the routes in App.js: Open App.js and import Routes, Route, from react-router-dom.
Import Home, About, and Contact components as well.

//App.js
 import { Route, Routes } from 'react-router-dom';
 import './App.css';
 import Home from './Home';
 import About from './About';
 import Contact from './Contact';

 function App() {
   return (
     <div className="App">

     </div>
   );
 }

 export default App;

Inside the div element, add the following:

<div className="App">
       <Routes>
         <Route path='/' element={<Home/>} />
         <Route path='/about' element={<About/>} />
         <Route path='/contact' element={<Contact/>} />
       </Routes>
     </div>

The Route elements are wrapped inside Routes.
path represents the URL path to the component it represents.
element describes the component that the path points to.

7. Run the Application: When the app runs, the navbar links will dynamically navigate you to its corresponding page.

Conclusion

React Router is a powerful tool for managing client-side routing in your React applications. It allows you to create seamless, dynamic user experiences by handling navigation, route parameters, nested routes, and more. By following the steps outlined in this article, you can get started with React Router and build highly interactive and user-friendly single-page applications.

GitHub Repo

Join our community by subscribing to the newsletter to receive regular updates, fresh insights, and exclusive content.

Let’s Connect:
LinkedIn
Twitter
Facebook
Website

React Context API: A step-by-step guide

Luqman Shaban — Sun, 15 Oct 2023 14:26:52 +0000

What is Context?
At its core, Context is a way to share data between components without explicitly drilling through components props. It's a global state management system within your React application.

When to use Context?
You should consider using Context API when you have data or Settings that need to be accessed by multiple components at different levels of your Application's component hierarchy. This may be applied to features like User Authentication, theme preference, language settings etc.

Implementation
To understand clearly how the Context API works, We'll create a simple Theme functionality that is commonly used in many React Applications.
Let's go through the steps of implementing the Context API:

1. Create A context

Create a folder store in your src directory and inside create a file called: ThemeContext.js and import the necessary dependencies:

import React, { createContext, useState } from 'react'
We'll create and export a theme Context that we'll use to share data across our Application.

import React, { createContext, useState } from 'react'

 export const ThemeContext = createContext()

2. Provide the Context

After creating the context, we now have to create a Provider. This is a typical component that wraps the portion of your application where you want to make certain data available to other components. In our case, we'll wrap our Provider in index.js as we want the Theme context to be accessed globally.

To create a Provider, we'll simply create a react component and name it ThemeProvider. We then pass props to the component named children.

  export const ThemeProvider = ({ children }) => {
    }

In the provider, we initialize a state variable and set it to false:

   export const ThemeProvider = ({ children }) => {
        const [isDarkTheme, setIsDarkTheme] = useState(false)
    }

Create a function toggleTheme that will update the state every time its called.

    export const ThemeProvider = ({ children }) => {
        const [isDarkTheme, setIsDarkTheme] = useState(false)

        const toggleTheme = () => setIsDarkTheme(prevTheme => !prevTheme)
    }

3. Consume the Context

To consume the Context, return the provider with the data you want to share with other components and wrap the children props inside.

 export const ThemeProvider = ({ children }) => {
     const [isDarkTheme, setIsDarkTheme] = useState(false)

     const toggleTheme = () => setIsDarkTheme(prevTheme => !prevTheme)

     return (
         <ThemeContext.Provider value={{ isDarkTheme, toggleTheme }}>
             {children}
         </ThemeContext.Provider>
     )
 }

And there you go! You've created a context API in React.

4. Using the Context In the App

To be able to access the data in the Context API, we will have to wrap the portion of our Application with the ThemeProvider for the components to consume the data. So we'll wrap the App component with the Provider.

Open your index.js file, import the ThemeProvider and Wrap the App component with it.
Here's how the index.js file should look:

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { ThemeProvider } from './store/ThemeContext';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <ThemeProvider>
      <App />
     </ThemeProvider>
   </React.StrictMode>
 );

With this setup, we can access the data throughout the entire application.

5. Use Case 1

In the src directory, create aButton.jsfile and inside import the following dependencies:

 import React, { useContext } from 'react'
 import { ThemeContext } from './store/ThemeContext'
 import './App.css'

Make sure you have App.cssin the same folder for styling the button.

Create a React component called Button and add a button element to it:

 import React, { useContext } from 'react'
    import { ThemeContext } from './store/ThemeContext'
    import './App.css'

    const Button = () => {

      return (
        <button>
          change Theme
        </button>
      )
    }

    export default Button

Import the data from isDarkTheme and toggleTheme from ThemeContext API.

  import React, { useContext } from 'react'
    import { ThemeContext } from './store/ThemeContext'
    import './App.css'

    const Button = () => {
      //Consuming the Data from The context API
      const { isDarkTheme, toggleTheme } = useContext(ThemeContext) 
      return (
        <button>
          change Theme
        </button>
      )
    }

    export default Button

Now that we have accessed the data, we can apply it to our button element. We'll add the onClick event to the button and some styling.

 import React, { useContext } from 'react'
    import { ThemeContext } from './store/ThemeContext'
    import './App.css'

    const Button = () => {
      const { isDarkTheme, toggleTheme } = useContext(ThemeContext)
      return (
        //adding onClick Event and the theme custom styles to the button
        <button onClick={toggleTheme} className={`${isDarkTheme ? 'lightBtn' : 'darkBtn'}`}>
          change Theme
        </button>
      )
    }

    export default Button

6. Use Case 2

Open App.js and add the following dependencies:

 import { useContext } from 'react';
 import './App.css';
 import Button from './Button';
 import { ThemeContext } from './store/ThemeContext';

Inside the App component, import isDarkTheme from the ThemeContext API.

 function App() {
   const { isDarkTheme } = useContext(ThemeContext)
 }

return a div component with the following:

 return (
       //Added the styles based on isDarkTheme Boolean value
       <div className={`App ${isDarkTheme ? 'darkTheme' : 'lightTheme'}`}>
         <h1>Theme Context Api</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quam quisquam enim minus, consectetur dignissimos vero beatae possimus reprehenderit sed officia eveniet obcaecati neque architecto ut, magnam odit optio veniam.</p>
         <Button />
       </div>
   );

Here's how the entire file looks:

 import { useContext } from 'react';
 import './App.css';
 import Button from './Button';
 import { ThemeContext } from './store/ThemeContext';

 function App() {
   const { isDarkTheme } = useContext(ThemeContext)

   return (
       <div className={`App ${isDarkTheme ? 'darkTheme' : 'lightTheme'}`}>
         <h1>Theme Context Api</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quam quisquam enim minus, consectetur dignissimos vero beatae possimus reprehenderit sed officia eveniet obcaecati neque architecto ut, magnam odit optio veniam.</p>
         <Button />
       </div>
   );
 }

 export default App;

Finally, open App.css and paste the following styles. You can modify them to suit your specific needs.

  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .App {
      padding: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px;
      height: 100vh;
    }

    .darkTheme {
      background-color: black;
      color: aliceblue;
    }

    .lightTheme {
      background-color: aliceblue;
      color: black;
    }

    button {
      padding: 10px;
      border-radius: 10px;
      border: 1px solid;
      cursor: pointer;
      font-size: 16px;
    }

    .darkBtn {
      background-color: black;
      color: aliceblue;
    }
    .lightBtn {
      background-color: aliceblue;
      color: black;
    }

Run the App

When you run the App in the browser, the theme will change on each button click demonstrating that the data is being shared between the Button component as well as in the App component.

Conclusion
In this article, we explored the concept of using Context API to efficiently share data between components while avoiding prop drilling. To help you understand how the Context API works, we implemented a simple functionality that is commonly used in many React Applications and verified that we were able to share global state across your application.
GitHub Repo

Never miss an article, subscribe to our newsletter to receive regular updates, fresh insights, and exclusive content.

Let's Connect:
LinkedIn
Twitter
Instagram
Facebook
Website