DEV Community: Daniel Musembi

How to Create a Recipe Generator with NextJS, LangChain, and OpenAI

Daniel Musembi — Thu, 15 Aug 2024 22:39:14 +0000

Hey there 👋 , I hope you're doing great. This is just a quick guide on how you can build amazing applications using AI.

Inspiration for me to build a recipe generator comes from wanting to solve the mental problem of deciding what to eat. you know they say making too many small decisions causes you to suffer fromdecisions fatigue - which is basically mental exhaustion resulting from the sheer number of decisions a person must make daily, leading to difficulty making—or making good—decisions. Now just imagine an application in which you just need to key in the ingredients, click the generate button then boom 💥 there you have generated the recipe. That is what we are going to build step by step. Check below what we will be building 👇👇

Without any further ado let's dive in

Step1. Create new project

First, ensure you have Node.js installed, then run the following command on the terminal to initialise a Nextjs project.

npx create-next-app recipe-generator
cd recipe-generator

Step2. Install required packages

Run the following to install packages we will be using

npm install langchain
npm install openai dotenv

Let's get to understand the two,

LangChain LangChain is a tool that helps create applications using large language models (LLMs). It provides a framework to connect these models with various data sources, such as APIs and databases, making it easier to build more advanced AI applications like chatbots, content generators, and data analyzers. Essentially, LangChain streamlines the process of integrating and using AI models in different projects.

OpenAI is the organization behind some of the most advanced AI models, like GPT, which can generate text, answer questions, and perform a variety of other tasks. The OpenAI API allows developers to access these powerful models and use them in their own applications. While OpenAI provides the AI models, LangChain acts as the framework that can connect these models with other tools and data sources, enabling the creation of complex AI-driven applications.

Together, OpenAI and LangChain can be used to build sophisticated AI systems. OpenAI offers the intelligence, and LangChain provides the tools to integrate that intelligence into useful, real-world applications.

Step3. Configure Environment variables

Create a .env.local file in the root directory. Go to openai and create a new project, click on the dashboard and select API keys from the left sidebar to copy your openai-api-key.

Insert your api key in the .env.local file as shown below

OPENAI_API_KEY=your opeai-api-key

Step4. Setup the API connection

In the app directory create langchain.ts file and in it insert the following code

// aap/langchain.ts

import { OpenAI } from '@langchain/openai'
import  dotenv  from 'dotenv';

dotenv.config();

const model = new OpenAI({
  openAIApiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
  temperature: 0.7, // Adjust for creativity vs. accuracy
});

export default model;

Here we set up an OpenAI model using the LangChain library, configuring it with an API key and creativity level from environment variables. We then export this model so it can be used throughout the web application.

Step5. Creating recipe generator logic

In the app directory create a new file recipeGenerator.ts and copy and paste the following code into it.

// app/recipeGenerator.ts
import model from './langchain';

export async function generateRecipe(ingredients: string[]): Promise<string> {
  const prompt = `Generate a recipe using the following ingredients: ${ingredients.join(', ')}. Please include the steps for preparation.`;
  const response = await model.call(prompt);
  return response;
}

Here we are defining a function generateRecipe that takes a list of ingredients as input and uses the OpenAI model (imported from langchain.ts) to create a recipe. The function constructs a prompt with the ingredients, sends it to the model to generate a recipe, and then returns the recipe text.

Step6. Create frontend to use the API

Insert the following code into the page.tsx file.

// app/page.tsx

"use client"; // Ensure this is a client component

import { useState } from 'react';
import { generateRecipe } from './recipeGenerator'; // Adjust path if needed

const Home = () => {
  const [ingredients, setIngredients] = useState<string[]>([]);
  const [recipe, setRecipe] = useState<string>('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);

    try {
      const newRecipe = await generateRecipe(ingredients);
      setRecipe(newRecipe);
    } catch (err) {
      console.error("Error generating recipe:", err);
      setError('Failed to generate recipe. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleIngredientsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newIngredients = e.target.value
      .split(',')
      .map(i => i.trim())
      .filter(i => i.length > 0);

    setIngredients(newIngredients);
  };

  return (
    <div style={{ padding: '20px', border: '2px solid blue' }}> {/* Debugging styles */}
      <h1>AI Recipe Generator</h1>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={ingredients.join(', ')} 
          onChange={handleIngredientsChange}
          placeholder="Enter ingredients separated by commas"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Generating...' : 'Generate Recipe'}
        </button>
      </form>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {recipe && (
        <div>
          <h2>Generated Recipe:</h2>
          <p>{recipe}</p>
        </div>
      )}
    </div>
  );
};

export default Home;

Here we are creating a React component for an AI recipe generator. Users input ingredients into a text field, which is then processed to generate a recipe using the generateRecipe function. The component handles form submission, displays loading states, and shows any errors or the generated recipe.

Step7. Styling our component

To style our application, insert the following CSS code in the global.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 50, 50, 50; /* Slightly lighter dark grey for text */
  --background-start-rgb: 255, 248, 240; /* Warm beige for start */
  --background-end-rgb: 255, 255, 255; /* Soft white for end */
  --highlight-color: 255, 140, 0; /* Orange for highlights and accents */
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 240, 240, 240; /* Light grey text for dark mode */
    --background-start-rgb: 34, 34, 34; /* Dark grey for start */
    --background-end-rgb: 0, 0, 0; /* Black for end */
    --highlight-color: 255, 165, 0; /* Lighter orange for highlights in dark mode */
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      rgb(var(--background-start-rgb)),
      rgb(var(--background-end-rgb))
    );
  font-family: 'Poppins', sans-serif;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: rgb(var(--highlight-color)); /* Warm orange color for headings */
  font-family: 'Merriweather', serif; /* Add a serif font for headings */
  text-align: center;
  margin-bottom: 20px;
}

.container {
  width: 90%;
  max-width: 600px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 20px;
}

button {
  background-color: rgb(var(--highlight-color));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

button:hover {
  background-color: #e68a00; /* Darker orange on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

input {
  border: 2px solid rgb(var(--highlight-color));
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

input:focus {
  outline: none;
  border-color: #e68a00; /* Darker orange on focus */
  box-shadow: 0 0 5px rgba(255, 140, 0, 0.5);
}

/* Remove debugging styles */
* {
  border: none;
}

Finally, we've set up a layout.tsx file to define the overall structure of our AI Recipe Generator application. This file applies global styles, sets metadata (like the page title and description), and organizes the main layout by wrapping all content (children) in a consistent header, main section, and footer. The debugging border helps visualize the main content area during development.

// app/layout.tsx
import './globals.css';

export const metadata = {
  title: 'AI Recipe Generator',
  description: 'Generate recipes using AI',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>
          {/* Header content */}
        </header>
        <main>
          <div style={{ border: '1px solid red' }}> {/* Added for debugging */}
            {children}
          </div>
        </main>
        <footer>
          {/* Footer content */}
        </footer>
      </body>
    </html>
  );
}

Run the application and see it in action

npm run dev

That's it guys, if you liked this tutorial kindly share it with others and make sure you follow me for much more 🥂. let me also know if you need the source code.

Follow me on X

Follow me on LinkedIn

How to Center a Div: 5 Simple Methods

Daniel Musembi — Wed, 14 Aug 2024 17:55:16 +0000

Centering a div element in HTML and CSS can be approached in several ways, depending on the layout requirements, browser support, and the complexity of the content within the div. Here's a comprehensive look at various methods:

1. Using Margin: Auto

This is one of the simplest methods for centering a block-level element like a div.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin Auto Centering</title>
    <style>
        .centered-div {
            width: 50%; /* You can adjust this */
            margin: auto; /* This centers the div horizontally */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="centered-div">
        This div is centered horizontally.
    </div>
</body>
</html>

2. Flexbox

Flexbox provides a powerful way to center content both vertically and horizontally.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexbox Centering</title>
    <style>
        .container {
            display: flex;
            justify-content: center; /* Horizontal center */
            align-items: center; /* Vertical center */
            height: 100vh; /* Full viewport height */
        }
        .centered-div {
            width: 50%;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">
            This div is centered both vertically and horizontally.
        </div>
    </div>
</body>
</html>

3. Grid Layout

CSS Grid is another modern way to center elements, offering similar capabilities to Flexbox but with some additional features for layout design.

 html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid Centering</title>
    <style>
        .container {
            display: grid;
            place-items: center; /* Centers both horizontally and vertically */
            height: 100vh;
        }
        .centered-div {
            width: 50%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">
            This div is centered using Grid.
        </div>
    </div>
</body>
</html>

4. Absolute Positioning

For elements that need to be centered within a relatively positioned parent, or within the viewport:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Absolute Positioning</title>
    <style>
        .container {
            position: relative;
            height: 100vh;
        }
        .centered-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">
            This div is centered using absolute positioning.
        </div>
    </div>
</body>
</html>

5. Table Layout

Though less common today, using display: table and table-cell can center content:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Layout Centering</title>
    <style>
        .container {
            display: table;
            width: 100%;
            height: 100vh;
        }
        .centered-div {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 50%;
            margin: auto;
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div">
            This div is centered using table layout.
        </div>
    </div>
</body>
</html>

Each method has its use cases:

Margin: Auto is simple for horizontal centering.

Flexbox and Grid are modern, flexible, and support both vertical and horizontal centering with ease.

Absolute Positioning works well for overlays or fixed elements.
Table Layout can be useful for older browsers or when you need to support very old versions of Internet Explorer.

Choose the method that best fits your project's needs, considering factors like browser support, the complexity of your layout, and the type of content you're centering.

THE ART OF MINIMALIST LIVING

Daniel Musembi — Wed, 14 Aug 2024 17:40:59 +0000

What is Minimalist Living?

Minimalist living is a lifestyle where you intentionally reduce the number of possessions you own and the amount of clutter in your life. It's not just about decluttering your space but also about simplifying your life, focusing on what's truly important, and reducing distractions.

Why Adopt Minimalism?

Mental Clarity: Fewer possessions mean fewer things to worry about, leading to a clearer mind.
Financial Freedom: By buying less, you save more money, which can lead to financial independence.
Time Management: With less to manage, you have more time for activities that bring you joy or growth.
Environmental Impact: Consuming less means a smaller ecological footprint.

How to Start:

Assess Your Belongings: Go through your items room by room. Ask yourself if each item brings you joy or serves a necessary function. If not, consider letting it go.
The One-Year Rule: If you haven't used an item in a year, you might not need it. This rule helps in deciding what to keep or discard.
Digital Minimalism: Apply the same principles to your digital life. Unsubscribe from emails, clear out old files, and limit your time on social media.
Quality Over Quantity: Instead of buying many cheap items, invest in fewer, higher-quality pieces that last longer.
Mindful Consumption: Before buying something new, ask if you really need it. Consider the lifecycle of the product, from production to disposal.
Experiences Over Things: Focus on creating memories rather than accumulating objects. Travel, learn new skills, or spend quality time with loved ones.

A Simple Exercise to Start:

The 30-Day Challenge

Choose a category (like clothes, books, or kitchen gadgets) and commit to not buying anything new in that category for 30 days. This helps you appreciate what you already have and reduces impulse buying.

By embracing minimalism, you're not just decluttering your space; you're creating space for what truly matters in life. It's about living with intention, reducing stress, and finding joy in simplicity.
Ask anything

Beginner's Tutorial for CRUD Operations in NodeJS and MongoDB

Daniel Musembi — Tue, 16 Jul 2024 21:40:48 +0000

Introduction

CRUD operations stand for Create, Read, Update, and Delete. This procedure allows you to work with data from the MongoDB database.

With these four operations, you can create, read, update, and delete data in MongoDB.

What is MongoDB

MongoDB is a powerful and flexible solution for handling modern data needs. As a leading NoSQL database, MongoDB offers a dynamic schema design, enabling developers to store and manage data in a way that aligns seamlessly with contemporary application requirements.

What is Nodejs

Node.js is a runtime environment that allows you to run JavaScript on the server side, rather than just in the browser. It's built on Chrome's V8 JavaScript engine, making it fast and efficient. With Node.js, you can build scalable network applications easily, using a single programming language for both client and server-side code. It's especially good for handling many simultaneous connections and real-time applications like chat servers or online games.

Prequisite

Install Node.js: Download and install Node.js from the official website if you haven't already.
Install MongoDB: Install MongoDB on your machine. Follow the instructions on the official MongoDB website.

Step 1: Initialize a new project

Open your preferred code editor (VS code) and cd into the directory where you want to create the project, then enter the command below to create a new project.

npm init

Next, use the command below to install the necessary packages.

 npm install express mongodb

To ensure that everything is working properly, add '"serve": "node index.js"' beneath the script in the package.JSON for starting the program.

Create and test express.js server

In the root directory create an index.js file and enter the following code in it.

const express = require('express')
const app = express()

app.listen(3000, () =>{
    console.log('Server is running on port 3000')
});

app.get('/', (req, res) =>{
    res.send("Hello Node API")
})

In this code, we create a basic Node.js server using the Express framework, which listens on port 3000. When you visit the root URL ("/"), it responds with the message "Hello Node API".

Now run the application with the command 'npm run serve' to observe the results, as shown below.

To test if the server is working enterlocalhost:3000 on the browser and see the results as shown below.

Creating MongoDB connection

Visit mongodb and sign in into your account or create one if not yet.

Create a new project. Give it a name and click "Create Project."

Click the Create button, and then select the free m0 template. Scroll down, give your cluster a name, and click Create deployment.

On the following screen, enter a username and password for your cluster; make sure to copy or remember the password. Click Create Database user.

After that click on the Choose a connection method button and select Connect
via drivers, copy the connection string.

To access mongodb we need a dependency called mongoose, so make sure to install it npm i mongoose and add it at the top in the index.js file const mongoose = require('mongoose');.

Create a db.js file in the root directory and paste the following code, replacing with the password you created.

const mongoose = require('mongoose');

mongoose.connect("mongodb+srv://admindan:admin1234@crudbackend.5goqnqm.mongodb.net/?retryWrites=true&w=majority&appName=crudbackend")
.then(() => {
    console.log('Connected to the database');
})
.catch((error) => {
    console.log('Connection failed', error);
});

module.exports = mongoose;

Import const mongoose = require('./db'); at the top of the index.js file

To test if the database is connecting run the application and you should see results on the terminal as shown below.

Creating CRUD functions

Now that we've our database connected, we need a model to store our data in the mongodb.

Make a models folder in the root directory, then create a file called "product.model.js" and insert the following code into it.

const mongoose = require("mongoose");

const ProductSchema = mongoose.Schema(
  {
    name: {
      type: String,
      required: [true, "Please enter product name"],
    },

    quantity: {
      type: Number,
      required: true,
      default: 0,
    },

    price: {
      type: Number,
      required: true,
      default: 0,
    },

    image: {
      type: String,
      required: false,
    },
  },
  {
    timestamps: true,
  }
);


const Product = mongoose.model("Product", ProductSchema);

module.exports = Product;

Create: defining a function to insert data into mongodb

We're creating a function for storing data in our MongoDB collection. Create a controllers folder in the root directory and a file called 'product.controller.js' within it. Paste the following code in it.

const Product = require("../models/product.model");

const getProducts = async (req, res) => {
  try {
    const products = await Product.find({});
    res.status(200).json(products);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

const getProduct = async (req, res) => {
  try {
    const { id } = req.params;
    const product = await Product.findById(id);
    res.status(200).json(product);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

const createProduct = async (req, res) => {
  try {
    const product = await Product.create(req.body);
    res.status(200).json(product);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

const updateProduct = async (req, res) => {
  try {
    const { id } = req.params;

    const product = await Product.findByIdAndUpdate(id, req.body);

    if (!product) {
      return res.status(404).json({ message: "Product not found" });
    }

    const updatedProduct = await Product.findById(id);
    res.status(200).json(updatedProduct);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

const deleteProduct = async (req, res) => {
  try {
    const { id } = req.params;

    const product = await Product.findByIdAndDelete(id);

    if (!product) {
      return res.status(404).json({ message: "Product not found" });
    }

    res.status(200).json({ message: "Product deleted successfully" });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

module.exports = {
  getProducts,
  getProduct,
  createProduct,
  updateProduct,
  deleteProduct,
};

In this code, we define CRUD operations for our Product model It includes:

getProducts: Fetches all products.
getProduct: Fetches a product by its ID.
createProduct: Creates a new product with provided data.
updateProduct: Updates a product by its ID.
deleteProduct: Deletes a product by its ID.

Each function handles possible errors and returns appropriate HTTP responses.

Define routes

Create a routes folder at the root directory and in it create product.route.js. Insert the below code in it.

const express = require("express");
const Product = require("../models/product.model.js");
const router = express.Router();
const {getProducts, getProduct, createProduct, updateProduct, deleteProduct} = require('../controllers/product.controller.js');


router.get('/', getProducts);
router.get("/:id", getProduct);

router.post("/", createProduct);

// update a product
router.put("/:id", updateProduct);

// delete a product
router.delete("/:id", deleteProduct);




module.exports = router;

In this code, we set up Express routes for CRUD operations for our Product model. it imports the necessary modules, creates an Express router, and defines routes for:

Fetching all products (GET /).
Fetching a single product by ID (GET /:id).
Creating a new product (POST /).
Updating a product by ID (PUT /:id).
Deleting a product by ID (DELETE /:id).

Finally, it exports the router for use in the main application.

Testing your API

Now that we've created our CRUD operations, let's test them. We are going to use insomnia if you don't have it you can download and create an account.

Follow the steps outlined below to test create operation ( POST REQUEST).

Open Insomnia: Launch the Insomnia application.
Create a New Request: Click on the "+" button to create a new request.
Set Request Type: Select "POST" from the dropdown menu next to the request name.
Enter URL: Input the URL of your API endpoint ( http://localhost:3000/api/products)
Enter Request Body: Click on the "Body" tab, select "JSON," and enter the JSON data you want to send.
Send Request: Click the "Send" button to send the request to the server.
View Response: Inspect the response from the server in the lower pane of Insomnia.

The api for creating a product on the MongoDB was successful, as indicated by the status 200 ok in the image below, which illustrates how it should operate.

Thus, you ought to be able to view the item created when you navigate to the database and select Browse Collection.

Test Read operations

The technique of testing a get request is almost the same as what we discussed above; you make a new request and select GET from the dropdown menu.

Proceed to try the final two options, which are update and remove (PUT, DELETE) from the dropdown menu.

Conclusion

With this beginner's tutorial, you should now have a solid foundation for performing CRUD operations using NodeJS and MongoDB. For more tech insights, follow me on X and connect on LinkedIn.

Building Real-Time Apps with Next.js and WebSockets

Daniel Musembi — Fri, 05 Jul 2024 19:18:06 +0000

Introduction

In today's fast-paced digital world, real-time data exchange is essential for developing dynamic and interactive web applications. WebSockets are a powerful method for enabling real-time, bidirectional communication between clients and servers. In this blog post, we'll look at how to use WebSockets with Next.js to create real-time apps.

A WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. It enables a real-time, event-driven connection between a client and a server.

Unlike traditional HTTP software, which follows a request-response model, WebSockets allow two-way (bi-directional) communication. This means that the client and the server can send data to each other anytime without continuous polling. To learn more about WebSocket check here. Without further ado, let's get started developing our real-time communication application. We'll start by bootstrapping a new Next.js project.

Open your preferred code editor and run the following command on the terminal to create a new project.

 npx create-next-app@latest real-time-app

Make sure to setup the project as shown below.

After it has finished, run the following commands to open the projects folder in the code editor.

cd real-time-app
code .

Installing dependencies

Run the following command to install ws a WebSocket library for Node.js.

npm install ws

Creating a WebSocket server

Let's start by creating server.js file in the root directory and insert the following code in it.

 const { createServer } = require('http');
 const { parse } = require('url');
 const next = require('next');
 const WebSocket = require('ws');

 const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();

 app.prepare().then(() => {
     const server = createServer((req, res) => {
         const parsedUrl = parse(req.url, true);
         handle(req, res, parsedUrl);
     });

     const wss = new WebSocket.Server({ server });

     wss.on('connection', (ws) => {
         console.log('New client connected');

         ws.on('message', (message) => {
             console.log(`Received message: ${message}`);
             ws.send(`Server: ${message}`);
         });

         ws.on('close', () => {
             console.log('Client disconnected');
         });
     });

     server.listen(3000, (err) => {
         if (err) throw err;
         console.log('> Ready on http://localhost:3000');
     });
 });

In this code, we set up a server. It first imports the necessary modules and sets up a Next.js app in development mode if NODE_ENV is not set to 'production'. The app prepares the server to handle HTTP requests with Next.js's request handler. It also creates a WebSocket server (wss) attached to the HTTP server.

When a WebSocket client connects, the server logs the connection. It listens for messages from the client, logs them, and sends back a response. It also logs when the client disconnects. The server listens on port 3000.

Next, modify the Script in the package.json file to use the custom server we've just created.

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
},

Integrating WebSocket client in Next.js

In this part, we will create a WebSocket client in our Next.js application. Begin by creating a hooks folder in the app directory.
Then, create a file called useWebSocket.js.

Insert the following code in that file

 import { useEffect, useState } from 'react';

 const useWebSocket = (url) => {
     const [messages, setMessages] = useState([]);
     const [ws, setWs] = useState(null);

     useEffect(() => {
         const socket = new WebSocket(url);
         setWs(socket);

         socket.onmessage = (event) => {
             setMessages((prevMessages) => [...prevMessages, event.data]);
         };

         return () => {
             socket.close();
         };
     }, [url]);

     const sendMessage = (message) => {
         if (ws) {
             ws.send(message);
         }
     };

     return { messages, sendMessage };
 };

 export default useWebSocket;

In this code we define a custom React hook useWebSocket for managing WebSocket connections. It establishes a connection to a WebSocket server using the provided URL, stores incoming messages in a state array, and provides a function to send messages through the WebSocket.

useEffect: Opens a WebSocket connection when the component mounts and closes it when the component unmounts.

onmessage: Updates the messages state with incoming messages.

sendMessage: Sends a message through the WebSocket if it's connected.
The hook returns the messages array and the sendMessage function for use in components.

Using the WebSocket in a component

To use WebSocket in our component, update the page.js file with the following code.

'use client'

import { useState } from 'react';
import useWebSocket from '@/app/hooks/useWebSocket';

const Home = () => {
    const { messages, sendMessage } = useWebSocket('ws://localhost:4000');
    const [input, setInput] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        sendMessage(input);
        setInput('');
    };

    return (
        <div>
            <h1>Real-time Chat</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                />
                <button type="submit">Send</button>
            </form>
            <div>
                {messages.map((msg, index) => (
                    <div key={index}>{msg}</div>
                ))}
            </div>
        </div>
    );
};

export default Home;

This is a React component for our real-time chat functionality using WebSockets. The component leverages React's useState hook to manage the state of the input field, allowing users to type and send messages.

Key Features:

WebSocket Integration: Utilizes a custom useWebSocket hook to establish a WebSocket connection to ws://localhost:4000.
State Management: Uses useState to handle the current message input.
Message Handling: The handleSubmit function sends the typed message via WebSocket and then clears the input field.
Real-time Updates: Displays received messages in real-time by mapping over the messages array.

How It Works:

Connection: On component mount, useWebSocket initiates a WebSocket connection.
Sending Messages: When the form is submitted, sendMessage sends the message, and the input field is reset.
Displaying Messages: Received messages are displayed dynamically as they arrive.

Running the application

Run the following command on the terminal to start the application. Open your browser and navigate to http://localhost:3000. You should see a simple chat interface where you can send messages and receive real-time updates.

Conclusion

Finally, developing real-time applications with Next.js and WebSockets is an effective way to improve user experiences through instant communication and updates. This post demonstrates how to set up a WebSocket server and a Next.js application to create a smooth real-time chat interface. Using these technologies, developers may incorporate dynamic, interactive features into their online applications, paving the way for more engaging and responsive user engagements. This method not only increases functionality but also lays the groundwork for future real-time application development.

Creating a Tag Input System with React JS: A Step-by-Step Guide

Daniel Musembi — Wed, 31 Jan 2024 17:22:40 +0000

Introduction

We will learn how to develop a tag input system in React JS by following the instructions in this article! Building a tag input system is an excellent project that will help you hone your abilities in state management, processing user input, and rendering dynamic components. If you are starting with React or are seeking to improve your expertise, this project is an excellent choice.

What is a tag input system?

A tag input system is a user interface component that allows users to input and manage tags. Tags are small, keyword-like labels that provide a convenient way to categorise and organise information. Building a tag input system in React will not only give you hands-on experience with fundamental React concepts but also provide a practical and reusable component for your future projects.

What You'll Learn

This tutorial will show you how to build a tag input system from the ground up. You will gain knowledge of fundamental validation, state management, user input, and dynamic component rendering. Upon completion, you will possess an entirely operational tag input system that can be seamlessly incorporated into your React applications.

Prerequisites

Before diving in, make sure you have a basic understanding of React fundamentals, including components, states, and event handling. If you're new to React, consider going through the official React documentation or introductory tutorials to get a solid foundation.

Step 1: Set up your React project

Set up your React project in the Visual Studio code editor by navigating to your selected directory and using the following command:

npx create-react-app input-tag

Following the completion of the process of creating the project, open the project folder in Visual Studio Code by utilizing the following command, and then navigate inside it:

code .cd input-tag

Step 2: Install the react-tag-input package

Run the following command while inside the projects folder to install the react-tag-input package

npm install react-tag-input

Step 3: Creating input tag component

Now, within the src folder of your project, create a file with the name InputTag.js, into which you will paste the code below.

import React from "react";import { WithContext as ReactTags } from "react-tag-input";// specifies which characters should terminate tags input. An array of character codes.const KeyCodes = { comma: 188, enter: 13,};const delimiters = [KeyCodes.comma, KeyCodes.enter];const InputTag = () => { const [tags, setTags] = React.useState([]); // Method to delete tag from Array const handleDelete = (i) => { setTags(tags.filter((tag, index) => index !== i)); }; // Method to Add tag into Array const handleAddition = (tag) => { setTags([...tags, tag]); }; return ( <div id="tags"> <ReactTags tags={tags} delimiters={delimiters} handleDelete={handleDelete} handleAddition={handleAddition} inputFieldPosition="bottom" autocomplete allowDragDrop={false} /> </div> );};export default InputTag;

The above code is a React component named InputTag that utilizes the "react-tag-input" library to create a tag input system. It uses the WithContext wrapper from the library to handle tag input events. The component initializes the state using the useState hook to manage an array of tags. Two functions, handleDelete and handleAddition, are defined to respectively remove and add tags to the array, updating the state accordingly. The ReactTags component is then rendered with various props, including the current tags, delimiters to determine when a tag is added, and callbacks to handle tag deletion and addition. Additionally, specific configurations such as input field position, autocomplete, and drag-and-drop functionality are set within the ReactTags component. This code provides a simple yet functional tag input system in React using the "react-tag-input" library.

Step 4 : Styling InputTag Component

At this point, we will customise our component to make it more pleasing to the eye. In the App.css file, paste the code that is provided below.

#tags { width: 50%; margin: 50px auto;}#tags .ReactTags __tags { position: relative; display: flex; align-items: center; background-color: #e2e2e2; padding: 10px; border-radius: 8px;}#tags .ReactTags__ selected { display: flex;}#tags .ReactTags __clearAll { cursor: pointer; padding: 12px; margin: 12px; background: #ff6b6b; color: #fff; border: none; border-radius: 4px;}#tags .ReactTags__ tagInput { border-radius: 4px; display: inline-block;}#tags .ReactTags __tagInput input.ReactTags__ tagInputField,#tags .ReactTags __tagInput input.ReactTags__ tagInputField:focus { height: 38px; margin: 0; font-size: 14px; min-width: 180px; padding: 0px 12px; border: 1px solid #ccc; border-radius: 4px;}#tags .ReactTags __editInput { border-radius: 4px;}#tags .ReactTags__ editTagInput { display: inline-flex;}#tags .ReactTags __selected span.ReactTags__ tag { border: 1px solid #bbb; background: #5cb85c; color: white; font-size: 14px; display: flex; padding: 8px; margin: 0 8px; border-radius: 4px;}#tags .ReactTags __selected a.ReactTags__ remove { color: #888; margin-left: 8px; cursor: pointer;}#tags .ReactTags __suggestions { position: absolute;}#tags .ReactTags__ suggestions ul { list-style-type: none; box-shadow: 0.1em 0.2em 0.5em rgba(0, 0, 0, 0.1); background: #fff; width: 220px; border-radius: 4px;}#tags .ReactTags __suggestions li { border-bottom: 1px solid #ddd; padding: 10px 12px; margin: 0;}#tags .ReactTags__ suggestions li mark { text-decoration: underline; background: none; font-weight: 600;}#tags .ReactTags __suggestions ul li.ReactTags__ activeSuggestion { background: #a4c2f4; cursor: pointer;}#tags .ReactTags__remove { border: none; cursor: pointer; background: none; color: white; margin-left: 8px;}#tags input { background-color: #e2e2e2; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-size: 14px; color: #333;}#tags input:before { border: none;}

Step 5: Integrating InputTag in the app.js

Now, add the InputTag component to your App.js file.

import "./App.css";import InputTag from "./InputTag";function App() { return ( <div className="App"> <InputTag /> </div> );}export default App;

Step 6: Running the application

The application can be viewed in the browser after it has been executed by using the following command.

npm start

As you can see, we successfully built a tag input system using React.

Conclusion

In wrapping up this guide on crafting a tag input system with React JS, we've navigated through a series of practical steps aimed at empowering web developers in their React journey. By breaking down fundamental concepts like state management and event handling, and seamlessly integrating a third-party library, you now possess the tools to implement an efficient and interactive tag input component. Overcoming challenges in documentation interpretation and CSS styling reflects the real-world problem-solving skills that developers often encounter. Consider this guide not just as a tutorial but as a companion in your React development endeavours, offering a hands-on approach to building a feature-rich tag input system for your web applications.

A comprehensive guide on how to create a weather widget in Next.js

Daniel Musembi — Sun, 28 Jan 2024 14:42:51 +0000

Introduction

Websites and programs no longer function without weather widgets, which provide consumers with instantaneous access to weather data. This detailed tutorial will teach us how to use the Next.js framework to build a highly functional and adaptable weather widget. The demand for attractive and useful widgets that can be seamlessly integrated into dynamic web applications is growing.

Overview of Weather Widgets

Widgets that display the current weather and forecasts on a webpage are known as weather widgets. For websites that focus on geography or travel, they not only improve the user experience but also offer functionality.

Importance of Weather Widgets in Web Development

There are more practical uses for weather widgets in web development than just making the site look nicer. It provides helpful, location-based data, which adds to a user-centric experience. Weather widgets improve the functionality of web apps in many different sectors, making them more useful for travel planning, daily forecast checking, and general news consumption.

Introduction to Next.js for Building Dynamic Web Applications

As a React-based framework, Next.js makes it easy for developers to create powerful and efficient online apps. Because of its modular design and server-side rendering capabilities, it is perfect for making widgets that can respond to user input. Our weather widget now works flawlessly for users on any device, regardless of network circumstances, thanks to Next.js.

Setting Up the Next.js Project

Navigate to your desired location in the VS code and run the following command, either using npx or yarn , to set up the project:

npx create-next-app weather-widget yarn create next-app weather-widget

Next, when prompted, make use of the parameters that are listed below:

After it finishes installing, use the following commands to open the project in VS Code:

cd weather-widgetcode .

Creating a weather widget component

Make a new folder named components in your project root folder. In that folder, create a file called weatherWidget.tsx. Add the following code to it:.

import React, { useState, useEffect } from 'react';import styles from '../styles/widget.module.css';interface WeatherWidgetProps { city?: string; coordinates?: { lat: number; lon: number };}interface WeatherData { name: string; main: { temp: number; feels_like: number; }; weather: { description: string; icon: string; }[];}const WeatherWidget: React.FC<WeatherWidgetProps> = ({ city, coordinates }) => { const [weatherData, setWeatherData] = useState<WeatherData | null>(null); useEffect(() => { const fetchData = async () => { try { let query = ''; if (city) { query = `q=${city}`; } else if (coordinates) { query = `lat=${coordinates.lat}&lon=${coordinates.lon}`; } else { console.error('Please provide either city or coordinates.'); return; } const response = await fetch(`/api/weather?${query}`); const data: WeatherData = await response.json(); setWeatherData(data); } catch (error) { console.error('Error fetching weather data:', error); } }; fetchData(); }, [city, coordinates]); console.log(weatherData); return ( <div className={styles.weatherWidget}> {!weatherData ? ( <div>Loading weather ...</div> ) : ( <> <h2>{weatherData.name}</h2> <p className={styles.weather}>{weatherData.weather[0].description}</p> <div className={styles.currentWeather}> <img src={`https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`} alt={weatherData.weather[0].description} /> <div>{Math.round(weatherData.main.temp)}C</div> </div> <p className={styles.feelsLike}> Feels like: {Math.round(weatherData.main.feels_like)}C </p> </> )} </div> );};export default WeatherWidget;

The aboveWeatherWidget React component fetches weather data from an API based on the provided city or coordinates using useState and useEffect hooks. It dynamically renders weather details, including city name, description, and temperature, with a loading message displayed while data is being fetched. Styled using CSS modules, it ensures a clean and modular structure for presenting weather information in a visually appealing manner.

Setting OpenWeatherMap API Key

You can get 60 calls per minute and 1,000,000 calls per month with OpenWeatherMap's free API tier. Therefore, there is more than enough for this tutorial.

Head over to openweathermap.org and sign up for an account to receive your free key.

After setting up your account:

Copy your API key from the page called API Keys. Add the following code to a new file called **.env.local** in the root folder of your weather widget project. Replace [YOUR_API_KEY_HERE] with the API key you got from OpenWeatherMap:

 # .env.local OPENWEATHERMAP_API_KEY=[YOUR_API_KEY_HERE]

Creating weather data API

In thepages/api folder, create a file calledweather.ts, and add the following code:

// pages/api/weather.tsimport type { NextApiRequest, NextApiResponse } from 'next';const apiKey = process.env.OPENWEATHERMAP_API_KEY;const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';export default async function handler( req: NextApiRequest, res: NextApiResponse) { const { q, lat, lon } = req.query; if (!apiKey) { res.status(500).json({ error: 'API key not set' }); return; } if (!q && (!lat || !lon)) { res .status(400) .json({ error: 'Please provide either city or coordinates.' }); return; } try { const query = q ? `q=${q}` : `lat=${lat}&lon=${lon}`; const response = await fetch( `${apiUrl}?${query}&appid=${apiKey}&units=metric` ); const data = await response.json(); res.status(200).json(data); } catch (error: unknown) { if (error instanceof Error) { res.status(500).json({ error: error.message }); } else { res .status(500) .json({ error: error || 'Server error while trying to fetch weather data', }); } }}

This Next.js API route handles requests for weather data from the OpenWeatherMap API. Key aspects:

Import Statements:
Request Handling:
API Call and Response:
Response to Frontend:
Error Handling:

Styling the weather widget

Please make a new file in the styles folder and name it weather.module.css. Then, add the following CSS code to it:

.weatherWidget { border: 2px solid #4CAF50; /* Green border */ border-radius: 8px; max-width: 300px; padding: 15px; margin: 15px; text-align: center; background-color: #f2f2f2; /* Light gray background */}.currentWeather { margin: 0 auto; display: flex; flex-direction: column; /* Change to column for a cleaner look */ justify-content: center; align-items: center;}.currentWeather div { margin-top: 10px; /* Add some spacing between elements */ font-size: 2rem; /* Adjust font size */ color: #333; /* Darker text color */}.feelsLike { font-size: 1rem; /* Adjust font size */ font-style: italic; color: #666; /* Lighter text color */}.weather { font-weight: normal; /* Remove bold weight */ color: #4CAF50; /* Green text color */}

Updating index page

Our new widget will be implemented in the index.tsx page after we update it. Just copy and paste the following code into pages/index.tsx to replace the original boilerplate:

import React from 'react';import WeatherWidget from '../components/weatherWidget';const Home: React.FC = () => { return ( <div className="App"> {/* Example using city name */} <WeatherWidget city="Montreal" /> {/* Example using coordinates */} {/* <WeatherWidget coordinates={{ lon: -73.5878, lat: 45.5088 }} /> */} </div> );};export default Home;

Run the application using the following command and open the link http://localhost:3000 to see it in the browser:

npm run dev

Conclusion

In conclusion, this comprehensive instruction showed how to use Next.js to create a dynamic and attractive weather widget. This guide gives developers a solid foundation to construct a feature-rich component that gets real-time weather data and provides a seamless user experience.

It teaches you how to easily integrate API calls with Next.js API routes after setting up a project and creating the Weather component. State management and useEffect created a responsive, interactive widget by handling data well.

A Beginner's Guide to Dockerizing React Applications Built with Vite

Daniel Musembi — Fri, 26 Jan 2024 19:53:04 +0000

Introduction

Containerizing React apps introduces developers to Docker, which streamlines deployment, scalability, and consistency across environments. This beginner's guide covers Dockerizing Vite-built React apps. This detailed essay explains Docker containers and provides step-by-step directions for containerising React apps and streamlining the development workflow with Docker and Vite.

Prerequisites for this technical article:

Basic knowledge of React:
Understanding JavaScript and ES6:
Experience with Web Development:
Introduction to Node.js and npm:
Basic Docker Understanding (Optional):
Development Environment Setup:
Access to a Docker Environment (Optional):

Our Vite + React app requires Node 16 or higher and a relevant npm version. Run the following command on the command prompt to check the node version:

node --version

Setting up the project

To set up our project, open up the terminal on VS Code and run the following command: Give a project name, choose React as a framework and Javascript as a variant.

npm create vite@latest

Run the following commands to navigate to your project directory and open it in the VS Code Editor:

cd docker-react-appcode .

The image above shows what the file structure should look like.

Run the following command to install the necessary packages:

npm install

Use the following command to run the application:

npm run dev

When you open the link http://localhost:5173/ in the browser, you should see the following:

Configuring vite. config.js

The Vite configuration is an object having keys like plugins, server, build, preview, optimizeDeps, worker, and more. Check more here config

Only the most essential configuration choices will be covered in this tutorial. You can easily get everything set up by copying and pasting the configuration parameters provided below.

import { defineConfig } from 'vite'import React from '@vitejs/plugin-react'// https://vitejs.dev/config/export default defineConfig({ base: "/", plugins: [react()], preview: { port: 8080, strictPort: true, }, server: { port: 8080, strictPort: true, host: true, origin: "http://localhost:8080", },});

Let's break down the key elements of this configuration:

import { defineConfig } from "vite";
react from "@vitejs/plugin-react";
export default defineConfig({ ... });
base: "/"
plugins: [react()]
preview: { port: 8080, strictPort: true }
server: { port: 8080, strictPort: true, host: true, origin: "http://0.0.0.0:8080" }

Run the following command to build our app for production.

npm run build

Run the following command to serve the build

serve -s dist

Dockerizing the application

Dockerization requires Docker installation. Running docker in the terminal checks if docker is installed. If not installed head here to install it install docker

If it looks like the image above, docker is installed. Remember to start Docker Desktop if you use it.

Let's break down each section of the following Dockerfile:

FROM node:18-alpineWORKDIR /appCOPY package.json.RUN npm installCOPY . .RUN npm run buildEXPOSE 8080CMD ["npm", "run", "preview"]

FROM node:18-alpine

Specifies the base image for the Docker container. In this case, it's using the official Node.js image with Alpine Linux as the base. The Alpine variant is a lightweight distribution, making the resulting Docker image smaller.

WORKDIR /app

Sets the working directory inside the container to /app. This is where your application code will be copied, and subsequent commands will be executed.

COPY package.json

Copies the package.json file from the local directory (the directory where the Dockerfile is located) into the container at the current working directory (/app).

RUN npm install

Runs the npm install command inside the container. This installs the dependencies specified in the package.json file. The node:18-alpine base image includes Node.js and npm, allowing you to use them in your container.

COPY . .

Copies all the remaining files from the local directory into the container at the current working directory (/app). This includes your application source code.

RUN npm run build

Runs the npm run build command inside the container. This assumes that you have a build script defined in your package.json file. The build script is responsible for building your Next.js application.

EXPOSE 8080

Exposes port 8080. This is a declaration rather than an actual command to open the port. It informs anyone who might run the container that the application inside will use port 8080.

CMD ["npm", "run", "preview"]

Specifies the command to run when the container starts. This uses the CMD instruction to set the default command for the container. In this case, it runs the npm run preview command, assuming you have a preview script defined in your package.json file. This command starts the application.

Now create a Dockerfile at the root directory of your application and copy and paste the code above in it.

We can construct a Docker image from this Dockerfile before adding a docker-compose file. The following command can be executed to create an image from a Dockerfile:

docker build . -t "sample-project:v1.0"

This command accomplishes two goals.

Builds a Docker image from the current context; appends the "sample-project" and "v1" versions to the picture.

Now we can run the following command on our local PC to see what docker images are accessible.

docker images

Very well. This image is now known as a container, so let's see if it runs. To launch a container using the "sample-project:v1.0" image, use the following command.

docker run -p 8080:8080 sample-project:v1.0

Here we are! Let's check localhost:8080 now. Within a Docker container, we have an application called Vite + React running.

Use the following command to get an ID in return:

docker run -d -p 8080:8080 sample-project:v1.0

To make sure, we can execute the following command to get a list of all the containers that are now operating.

docker ps

Conclusion

Finally, this beginner's guide has given a thorough rundown of Dockerizing React applications created with Vite, providing an easy way to containerize your apps. For consistent deployment across different settings, developers can package their Vite-based React applications using the Dockerfile and execute the Docker image.

Dockerization improves the scalability and mobility of React apps and makes teamwork in development easier. Docker containers enable a uniform and reproducible development and deployment workflow by encapsulating application code, environment settings, and dependencies.

Developers who can figure out how to incorporate Docker into the React and Vite stack will be in high demand as containerization approaches gain traction. This tutorial helps newcomers to web development lay the groundwork for Dockerizing their React apps and reaping the benefits of this technology.

So that's the end of it. Throughout this post, we have discussed a great deal of material. I hope that you find this post to be informative. Be sure to give it a round of applause if you found it to be enjoyable. Additionally, make sure to share it with your friends and associates.

Installing and Implementing Tailwind CSS on Next.js: A Comprehensive Guide

Daniel Musembi — Thu, 25 Jan 2024 18:13:23 +0000

Introduction

Tailwind CSS is a popular styling method for developers who value quickness and flexibility. In this detailed article, we examine how Tailwind CSS and Next.js work together to seamlessly integrate utility-first styling concepts into the dynamic framework.

Tailwind CSS, a utility-first CSS framework, offers a strong set of pre-defined utility classes to quickly build and style interfaces. Tailwind simplifies styling with a rich library of utility classes for popular design patterns and a utilitarian and pragmatic approach.

Tailwind CSS combined with Next.js, a powerful React framework for web apps, offers many benefits. From easy setup and configuration to seamless responsive design, this combination gives developers a smooth workflow. This post walks through installing Tailwind CSS in a Next.js project and using its features to improve development.

Explain Next.js

Next.js is a popular open-source React framework for building modern web applications. Developed by Vercel, it simplifies the process of building React-based projects by providing a set of conventions and features for server-side rendering, static site generation, and client-side rendering. Key features of Next.js include automatic code splitting, server-side rendering for React components, efficient routing, and support for API routes. It facilitates a seamless developer experience, offering a balance between performance optimization and ease of use. Next.js is widely adopted for its versatility, enabling developers to build scalable, SEO-friendly, and high-performance web applications.

Setting up the Next.js project

Open VS code, navigate to the desired directory to create an application, and run the following command:

npx create-next-app@latest

It will first ask you to name your app; you can name it my-sample-app. Make sure to configure your project as shown below.

Navigate to the projects directory using the following command: Use the second command to open the projects folder in VS Code.

cd my-sample-appcode .

To begin running your server on the available port on your PC, run any of the commands provided below.

Using npm

npm run dev

Using yarn

yarn dev

What you should see in your app when you go to the localhost port in your browser is:

Configuration Tailwind css

In this section, we're going to learn how to configure the tailwind.config.js file in different directories.

Using pages directory

This is the expected structure of your tailwind.config.js file when working with the Next.js pages directory:

/**@type {import('tailwindcss').Config} */module.exports = { content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",], theme: { extend: {}, }, plugins: [],}

Using src directory

Assuming your project's structure has a src folder preceding the pages folder, your tailwind.config.js file needs to resemble the following:

/**@type {import('tailwindcss').Config} */module.exports = { content: ["./src/**/*.{js,ts,jsx,tsx}",], theme: { extend: {}, }, plugins: [],}

Using app directory

In the case of the app directory, the setting of your tailwind.config.js file should resemble this:

/**@type {import('tailwindcss').Config} */module.exports = { content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/ **/*.{js,ts,jsx,tsx}", "./components/** /*.{js,ts,jsx,tsx}",], theme: { extend: {}, }, plugins: [],}

Last but not least, open the globals.css file in your project's root directory and insert the @tailwind directives for every layer of Tailwind, as illustrated below:

@tailwind base;@tailwind components;@tailwind utilities;

Testing

You may check if Tailwind is set up correctly by adding the following code to your index.js file or by using one of the Tailwind utility classes, such as text-red-900 or bg-red-900, in an existing component.

import Head from "next/head";export default function Home() { return ( <> <Head> <title>My Awesome Next.js App</title> <meta name='description' content='A stylish Next.js app' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <link rel='icon' href='/favicon.ico' /> </Head> <main className='bg-gray-100 min-h-screen flex items-center justify-center'> <section className='bg-white p-8 rounded-md shadow-md'> <h1 className='text-4xl font-bold text-gray-800 mb-6'> Welcome to My Awesome Next.js App! </h1> <p className='text-lg text-gray-600 mb-4'> You have successfully installed and configured Tailwind CSS. 🚀 </p> <ul className='list-disc list-inside'> <li className='mb-2'> <p className='flex items-center text-green-600'> <span className='mr-2'>🐈</span> You should see a walking cat! </p> </li> <li className='mb-2'> <p className='bg-yellow-500 text-white p-2 rounded'> This has a yellow background color. </p> </li> </ul> </section> </main> </> );}

If you've added a utility class to an existing component, your browser should display that class. Otherwise, it will appear like the index.js file:

Conclusion

In wrapping up our exploration of integrating Tailwind CSS with Next.js, let's recap the key steps and fundamental concepts covered in this comprehensive guide. We initiated the process by creating a Next.js project with Tailwind CSS using the npx create-next-app command with the with-tailwindcss example. We then delved into configuring, installing, and seamlessly integrating Tailwind CSS into our Next.js application, embracing its utility-first approach for efficient and modular styling.

Throughout the guide, we explored the significance of Tailwind CSS in modern web development, emphasizing its role in promoting rapid prototyping, consistent design language, and streamlined collaboration. By understanding the importance of Tailwind CSS within the context of Next.js, we unlocked the potential for building scalable, performant, and visually appealing web applications.

A Guide to Developing an Account Manager with React Router DOM.

Daniel Musembi — Sun, 21 Jan 2024 22:24:11 +0000

Introduction

Web applications revolve around account management, which allows users to access, interact with, and customize their digital experiences. An efficient account manager is critical for guaranteeing a safe and smooth user experience, whether it's getting access to unique content, protecting personal data, or customizing preferences. Improving user authentication, streamlining navigation, and laying a solid groundwork for personalized interactions within web apps are some of the topics covered in this article as it dives into the complexities of building an account manager using React Router DOM. Come along as we explore what goes into making an account management system that is both user-friendly and dynamic.

Importance of React Router DOM for navigation

React Router DOM is a vital library for React application navigation. Here are several reasons React Router DOM is crucial for navigation:

Declarative Routing: React Router DOM lets developers define application navigation using components like Route and Link. Declarative coding improves readability and maintainability.
The module supports React's philosophy by enabling component-based routing. Each route represents a React component, facilitating code modularization and structure.
For complicated applications like account managers, React Router DOM allows hierarchical routing. This functionality lets you organize account views and sections hierarchically.
The React Router DOM simplifies the extraction of URL parameters and the management of dynamic data in the application. This is necessary for user account management and URL-based information display.
The library allows developers to guide users based on specific conditions or activities. This helps implement user authentication and account management operations.
In React Router DOM, navigation functions mirror standard browser behavior. It makes forward and backward navigation easy and smooth.
Integration with React Ecosystem: React Router DOM works flawlessly with other React frameworks and tools. Compatibility enables a seamless development experience and lets developers use the React ecosystem.

Setting Up the Project

Installing React Router DOM

Open the Visual Studio code editor and run the following command on the terminal to create a new React app. account-manager-app is the name of the application.

npx create-react-app account-manager-app

Navigate to our app directory

cd account-manager-app

To launch our React app in VS Code, type the following command while in the directory:.

code .

Let's install the dependencies we need. For instructions on how to configure tailwind CSS, check here

npm install react-router-domnpm install -D tailwindcssnpm install react-icons --save

Run the application to make sure everything is working well.

npm start

The picture below shows our app running well.

Project structure and organization

In the src folder, create components folder and in it, create Sidebar.js file

Add this code to the sidebar. js: A responsive sidebar with user information and navigation links is defined by this React component. We use Tailwind CSS styles, FontAwesome icons, and custom pictures to dynamically render links with sub-items (changing colors and styles based on conditions).

import React from 'react';import { FaBitbucket, FaRegUser } from 'react-icons/fa';import { CiCreditCard1, CiHeart, CiLogout } from 'react-icons/ci';const Sidebar = () => { return ( <aside className="hidden lg:block w-64 bg-gray-900 text-white p-4"> <div className="border-b border-gray-700 py-5"> <div className="flex items-center"> <img width="40px" height="40px" className="rounded-full object-cover mr-3" src="https://i.imgur.com/m79BpQy.jpg" alt="Red woman portrait" /> <div> <p className="text-gray-500 text-sm">Hello,</p> <p className="font-bold">alice</p> </div> </div> </div> {sidebarItems.map((item, index) => ( <div key={index} className="flex border-b py-4"> <div className="flex w-full"> <div className="flex flex-col gap-2"> {item.subItems ? ( <div> <a href={item.link} className={`flex items-center gap-2 font-medium ${ item.icon ? 'text-yellow-400' : '' } ${index === 0 ? 'text-blue-500' : 'text-gray-400'} hover:text-yellow-400`} > {item.icon && item.icon} {item.text} </a> <div className="ml-8 flex flex-col gap-2"> {item.subItems.map((subItem, subIndex) => ( <a key={subIndex} href={subItem.link} className="text-gray-500 hover:text-yellow-400" > {subItem.text} </a> ))} </div> </div> ) : ( <a href={item.link} className={`flex items-center gap-2 font-medium ${ item.icon ? 'text-yellow-400' : '' } ${index === 0 ? 'text-blue-500' : 'text-gray-400'} hover:text-yellow-400`} > {item.icon && item.icon} {item.text} </a> )} </div> </div> </div> ))} </aside> );};export default Sidebar;

In the components folder, create another file and name it Account.js.

The following React component illustrates an account page with sidebar navigation and choice cards for profile, shipping, and billing address management. Users can access and change their account information by dynamically rendering account choices and fields. A sidebar for navigation and grid-based choice cards make the responsive layout work on small and large screens. Insert it into Account.js.

import React from 'react';import SideBar from './Sidebar';const accountOptions = [{ title: 'Personal Profile', link: 'profile-information', fields: [ { label: 'Name', value: 'Sarah Johnson' }, { label: 'Email', value: 'sarah@yandex.com' }, { label: 'Postal Code', value: '20371' }, { label: 'Card Number', value: '1223 3432 3344 0082' },], }, { title: 'Shipping Address', link: 'manage-adresse', fields: [{ label: 'Name', value: 'Sarah Johnson' }, { label: 'Location', value: 'Belgrade, Serbia' }, { label: 'Postal Code', value: '20371' }, { label: 'Card Number', value: '1223 3432 3344 0082' },], }, { title: 'Billing Address', link: '#', fields: [{ label: 'Name', value: 'Sarah Johnson' }, { label: 'Location', value: 'Belgrade, Serbia' }, { label: 'Postal Code', value: '20371' }, { label: 'Card Number', value: '1223 3432 3344 0082' },], },];const Account = () => { return ( <section className="container mx-auto w-full flex-grow max-w-screen-xl border-b py-8 lg:flex lg:flex-row lg:py-16"> {/* sidebar */} <SideBar /> {/* /sidebar */} {/* option cards */} <div className="mb-8 flex items-center justify-between px-8 md:hidden"> <div className="flex gap-3"> <div className="py-5"> <div className="flex items-center"> <img width="48px" height="48px" className="rounded-full object-cover" src="https://raw.githubusercontent.com/bbulakh/tailwind-ecommerce/2.x/src/assets/images/avatar-photo.png" alt="Red woman portrait" /> <div className="ml-5"> <p className="font-medium text-gray-600 text-lg">Hello,</p> <p className="font-bold">Sarah Johnson</p> </div> </div> </div> </div> <div className="flex gap-3"> <button className="border bg-amber-400 py-2 px-3 rounded"> Profile settings </button> </div> </div> <section className="grid w-full max-w-screen-xl grid-cols-1 gap-6 px-8 pb-16 lg:grid-cols-3"> {accountOptions.map((option, index) => ( <div key={index} className=""> <div className="border py-6 shadow-md"> <div className="flex justify-between px-6 pb-6"> <p className="font-bold text-lg">{option.title}</p> <a className="text-sm text-purple-800" href={option.link}> Edit </a> </div> <div className="px-6"> {option.fields.map((field, fieldIndex) => ( <p key={fieldIndex} className="text-gray-600"> {field.label}: {field.value} </p> ))} </div> </div> </div> ))} </section> </section> );};export default Account;

In the components folder, create another file and call it Adresse.js.

The following React component, "ManageAdresse," manages address information. It has a sidebar for navigation and a form for updating the nation, city, and zip code. The form is responsive and has validation indicators and a save button. Put it in the Adresse.js file.

import Sidebar from './Sidebar';const ManageAdresse = () => { return ( <section className="container flex-grow mx-auto max-w-screen-xl border-b py-8 lg:flex lg:flex-row lg:py-16"> <Sidebar /> <section className="grid w-full max-w-screen-xl grid-cols-1 gap-6 px-8 pb-16"> <div className="py-6"> <div className="w-full" /> <form className="flex w-full flex-col gap-4" action=""> <div className="flex w-full flex-col"> <label className="flex items-center text-gray-600" htmlFor="country"> Country <span className="block text-sm font-medium text-red-500 ml-1">*</span> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="text" placeholder="Serbia" /> </div> <div className="flex w-full flex-col"> <label className="flex items-center text-gray-600" htmlFor="city"> City <span className="block text-sm font-medium text-red-500 ml-1">*</span> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="text" placeholder="Belgrade" /> </div> <div className="flex flex-col"> <label className="text-gray-600" htmlFor="zipCode">Zip Code</label> <input x-mask={999999} className="w-full border px-4 py-2 lg:w-1/2" placeholder={240116} /> </div> <button className="mt-4 w-40 bg-violet-900 px-4 py-2 text-white"> Save changes </button> </form> </div> </section></section> );};export default ManageAdresse;

The next step is to proceed by making a new file called ChangePassword.js in the components folder.

Users can change their password on the ChangePassword page. It has a sidebar for navigation and a form area with fields for the current password, the new password, and the new password again. Visual cues on the form include labels that show which fields are needed and a button that lets you save your changes.

import Sidebar from './Sidebar';const ChangePassword = () => { return ( <section className="container mx-auto flex-grow max-w-screen-xl border-b py-8 lg:flex lg:flex-row lg:py-16"> <Sidebar /> <section className="grid w-full max-w-screen-xl grid-cols-1 gap-6 px-8 pb-16"> <div className="py-6"> <div className="w-full" /> <form className="flex w-full flex-col gap-4" action=""> <div className="flex w-full flex-col"> <label className="flex items-center text-gray-600" htmlFor="currentPassword"> Current Password <span className="block text-sm font-medium text-red-500 ml-1">*</span> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="password" placeholder="" /> </div> <div className="flex w-full flex-col"> <label className="flex items-center text-gray-600" htmlFor="newPassword"> New Password <span className="block text-sm font-medium text-red-500 ml-1">*</span> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="password" placeholder="" /> </div> <div className="flex flex-col"> <label className="flex items-center text-gray-600" htmlFor="repeatNewPassword"> Repeat New Password <span className="block text-sm font-medium text-red-500 ml-1">*</span> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="password" placeholder="" /> </div> <button className="mt-4 w-40 bg-violet-900 px-4 py-2 text-white"> Save Changes </button> </form> </div> </section> </section> );};export default ChangePassword;

We will now make the last component, which is called profile. Make a file in the components folder and name it Profile.js.

The Profile React component displays a user profile page with an avatar image, editable first, last, and bio fields, and a "Save changes" button.

import SideBar from './Sidebar';const Profile = () => { return ( <section className="container flex-grow mx-auto max-w-[1200px] border-b py-5 lg:flex lg:flex-row lg:py-10"> <SideBar /> <section className="grid w-full max-w-[1200px] grid-cols-1 gap-3 px-5 pb-10"> <div className="py-5"> <div className="w-full"> <h2 className="text-2xl font-bold mb-4">Avatar image</h2> <div className="mx-auto mb-5 flex flex-row items-center bg-neutral-100 py-5 lg:mx-0 lg:w-1/2"> <img className="ml-5 h-20 w-20 rounded-full" src="https://imgur.com/JdFbwHZ" alt="John Doe" /> <form> <div> <label className="block"> <span className="sr-only">Choose profile photo</span> <input type="file" className="mx-auto ml-5 flex w-full justify-center border-yellow-400 text-sm outline-none file:mr-4 file:bg-amber-400 file:py-2 file:px-4 file:text-sm file:font-semibold" /> </label> </div> </form> </div> </div> <form className="flex w-full flex-col gap-3" action=""> <div className="flex w-full flex-col"> <label className="flex" htmlFor="name"> First Name <span className="block text-sm font-medium text-slate-700 after:ml-0.5 after:text-red-500 after:content-['*']" /> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="text" placeholder="Sarah" /> </div> <div className="flex w-full flex-col"> <label className="flex" htmlFor="name"> Last Name <span className="block text-sm font-medium text-slate-700 after:ml-0.5 after:text-red-500 after:content-['*']" /> </label> <input className="w-full border px-4 py-2 lg:w-1/2" type="text" placeholder="Johnson" /> </div> <div className="flex flex-col"> <label htmlFor="">Bio</label> <textarea className="w-full border px-4 py-2 text-gray-500 outline-none lg:w-1/2" name="" id="" cols={30} rows={10} defaultValue={' CEO, MayBell Inc.'} /> <button className="mt-4 w-40 bg-violet-900 px-4 py-2 text-white"> Save changes </button> </div> </form> </div> </section> {/* /form */} </section> );};export default Profile;

Lastly, update the App.jsx file with the following code: This code creates React Router routes for Account, Profile, ManageAdresse, and ChangePassword in a React BrowserRouter.

import './App.css';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Profile from './components/Profile';import Account from './components/Account';import Adresse from './components/Adresse';import ChangePassword from './components/ChangePassword';export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Account />}></Route> <Route path="/profile-information" element={<Profile />}></Route>{' '} <Route path="/manage-adresse" element={<Adresse />}></Route> <Route path="/change-password" element={<ChangePassword />}></Route> </Routes> </BrowserRouter> );}

Run the application using the following command:

npm start

We have successfully constructed a multi-page account manager using React Router, which is fully responsive, as shown in the images below.

Conclusion

We built an Account Manager app using the React Router DOM in this post. We demonstrated the organization of routes and components for seamless navigation by covering major components such as Profile, Account, Manage Address, and Change Password.

As you go on with your Account Manager development, think about adding more complex functionalities, investigating more style possibilities, and researching new features. With React Router DOM as your base, you can build a robust navigation system and modify the app to fit your needs. In order to build a powerful yet intuitive account management system, you need to keep trying new things and honing your abilities. Have fun with the code!

Making a RESTful API using Express, MongoDB, and Node.js: A Complete Guide

Daniel Musembi — Sat, 20 Jan 2024 23:21:52 +0000

Introduction

The Representational State Transfer REST architecture style is a way of building applications that may be used in a network. Conceptually, it lays down the rules for how web services should talk to each other using the Hypertext Transfer ProtocolHTTP. Resources in RESTful APIs are accessible by distinct URLs, and operations on these resources are carried out using the normal HTTP methods GET POST, PUT, and DELETE. Because of the design's emphasis on stateless communication, all the necessary information to interpret and process a client request is included inside it. With RESTful APIs, web service development is standardised and scalable, facilitating client-server resource access and manipulation and facilitating system-to-system interoperability.

When it comes to creating RESTful APIs, a popular and powerful stack for web application development is Express, MongoDB, and Node.js. A quick rundown of why each part is important is this:

Node.js:

Devoid of blocking Regarding input/output, Node.js is well-known for efficiently processing concurrent requests due to its event-driven, non-blocking architecture. To construct performant, scalable apps, this is essential.

Express:

Built on top of Node.js, Express is a web application framework that allows for creating powerful APIs and web apps with minimum and adaptable code. Routing, middleware integration, and HTTP request handling are just a few of the typical operations that it streamlines.

MongoDB:

NoSQL database: One well-known NoSQL database is MongoDB, which uses adaptable documents similar to JSON to store data. Agile development and easy scalability are made possible by its schema-less nature. When dealing with massive volumes of unstructured data, it shines.

If you have Visual Studio Code, MongoDB, Node.js, and npm installed, then you should be good to go.

Make sure to check the following if you haven't already:

Installing Nodejs

Download MongoDB

Download VS code

Setting Up the Environment

To begin, let's make a new folder for the project. Launch your terminal and execute each command individually.

mkdir restful-apicd restful-api

On your computer, this will make a new directory.

Run the following command in the terminal to initialize our project. Make sure you're in the folder where you just created it.

npm init

The command above will show you how to make a package.json file. Type in the question's information, then press "Enter" to move on to the next query.

Once you finish setting up the package.json file, enter the following command to launch your application on VS code

code .

Installing Dependencies

Installation of project packages is done with the following terminal command. We install nodemon to restart the server after file changes.

npm install express mongoose dotenvnpm install -g nodemon

This command will install the following:

Express: To construct the web server.
Mongoose is an object data modelling (ODM) library that is compatible with MongoDB.
To load environment variables from a.env file, use the dotenv variable.

Following the execution of the command described above, the structure of your project folder should look like this.

Setting up a simple Express app

Begin by creating a file in your root directory that is called index.js.

To understand how to set up an Express app, head to this website expressjs.com, Then, after clicking on Getting Started, select the Hello World option. You are going to find the code for the basic example of Hello World.

Copy the code and paste it into the index.js file we just made. you can change Example app listening on port ${port} to Server is listening on port ${port}

const express = require("express");const app = express();const port = 3000;app.get("/", (req, res) => { res.send("Hello World!");});app.listen(port, () => { console.log(`Server is listening on port ${port}`);});

Run the server with the following command

index.js

Output on the terminal

A page saying Hello world! will load in your browser when you navigate to localhost:3000. Which means our server is running properly.

Creating a MongoDB database

We will create a Database on MongoDB Atlas in this step.

To begin, visit MongoDB Atlas and either register for an account or log in with the one you currently have.

A username and password are required when making a new account, so be sure to fill them out. After that, enter your IP address and select My Local Environment in the second step. Select Finish and Close from the bottom menu.

After that, locate Database in the left-hand menu and, on the right-hand side of the screen, click the Create button. create a free Shared Cluster. To join the cluster, go to its homepage and look for the "connect" option.

The following window will appear and then click on the Compass link.

Make a copy of the connection string and substitute it with the password you've already generated. If you haven't already, make sure to install the MongoDB Compass.

This is how your connection string ought to appear.

mongodb+srv://dandev20:<password>@cluster0.m56pnex.mongodb.net/

Creating a `.env` file

We can create a new file in the root directory named .env to secure our mongoDB connection string.

Put this code into the.env file.

MONGODB_URL=<Your MongoDB Connection String>

Put the connection string that you got from MongoDB Atlas instead of. After that, your.env file should match this.

mongodb+srv://dandev20: ****** @cluster0.m56pnex.mongodb.net/my-restful-api

At the end of the connection string I have added my-restful-api which is my database name, feel free to customize your database name.

Connecting to MongoDB using Mongoose

The following Node.js script connects to a MongoDB database using the Mongoose module. The dotenv module, which handles environment variables, and Mongoose, which interacts with MongoDB, are among the required dependencies imported at the beginning. The connection is established using the mongoose.connect() method, which retrieves the MongoDB connection URL from the.env file. A message confirming the successful connection to MongoDB is printed to the console when the connection is successful. To link to the MongoDB, include the following code in your index.js file.

require("dotenv").config(); //for using variables from .env file.const app = express();const port = 3000;mongoose.connect(process.env.MONGODB_URL).then(() => { console.log("MongoDB is connected!");});app.get("/", (req, res) => { res.send("Hello World!");});app.listen(port, () => { console.log(`Server is listening on port ${port}`);});

This is the expected terminal output after restarting the server with the node index.js command.

If you don't see that MongoDB is connected, make sure you restart the server and check to see if you added the IP address to MongoDB's network access.

Define simple schema

We begin by creating a basic project schema. To accomplish this, in your project's root directory, make a new folder called model and then in that folder, create a file called todo.js.

The following snippet of code uses the Mongoose module to define a Task schema in MongoDB. It is written in Node.js. The schema is comprised of two fields: title and description both of type String. In order to organize the data model, the Schema class from Mongoose is utilized. To communicate with MongoDB documents that adhere to this schema, a Mongoose model called Task is generated using mongoose.model() after the schema is defined. Last but not least, other components of the app can make use of the Task model by exporting it to the MongoDB database. Add the code to the task.js file.

const mongoose = require("mongoose");const { Schema } = mongoose;const taskSchema = new Schema({ title: { type: String, }, description: { type: String, },});const Task = mongoose.model("Task", taskSchema);module.exports = Task;

Let's import this model in our index.js file

Implementing CRUD Operations

Create, Read, Update, and Delete (CRUD) are the four cornerstones of database administration and data processing. To manage and interact with data inside a system or application, these activities are crucial. Every action has its distinct function:

Creating resources (POST)

During this process, further records will be added to the database. It typically refers to adding a new document to an existing collection when discussing MongoDB and Mongoose.

In the following code;

The /tasks/create endpoint is an HTTP POST method for adding a new task to the list. The code within the async function is executed whenever a POST request is made to /tasks/create. The data in the request body req.body is used to create a new task item using the Task.create method. The newly created task is sent in JSON format along with a status code 201 if the creation is successful. A 500 status code and the words Internal Server Error are the responses it gives if an error occurs during the operation. Add the code to the index.js file

// Create an task itemapp.post("/task/create", async (req, res) => { try { const newTask = await Task.create(req.body); res.status(201).json(newTask); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});

Read resources (GET)

Reading is getting information out of a database using queries and retrieval. You can use this operation to retrieve data according to specific criteria, like whether you need to get one document, a few documents, or the entire collection.

The following Express.js route handler handles /tasks GET requests. Todo.find() fetches all todos from MongoDB and returns a JSON response with a 200 status code on success. The process logs errors and sends a JSON response with a 500 status code for internal server errors. add the code to the index.js file

// Read all tasksapp.get("/tasks", async (req, res) => { try { const tasks = await Task.find(); res.status(200).json(tasks); } catch (error) { console.log(error); res.status(500).json({ error: "Internal Server Error" }); }});

Updating resources (PUT/PATCH)

Updating includes changing database records. It can involve changing document fields or replacing the whole thing.

The following Express.js route handler updates tasks by ID via a PUT request at "/tasks/:id". The Task.findByIdAndUpdate method finds the task by ID and updates it with request body data. Updated tasks are provided as JSON responses with a 200 status code on success and a 500 status code on failure, signalling an internal server fault. Add the code to the index.js file.

// Update a task by IDapp.put("/tasks/:id", async (req, res) => { try { const updatedTask = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true, }); res.status(200).json(updatedTask); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});

Deleting resources (DELETE)

The delete procedure removes database records. This usually implies removing documents from a MongoDB collection.

This Node.js and Express code define a route handler for handling HTTP DELETE requests to "/tasks/:id". It uses MongoDB/Mongoose to delete a task by its ID, responding with a status code of 204 if successful, or 500 with an error message if an internal server error occurs.

app.delete("/tasks/:id", async (req, res) => { try { await Task.findByIdAndDelete(req.params.id); res.status(204).send(); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});

Since we will be reading the data in JSON format, we must add the following line of code to our index.js file before testing our API.

//middleware provided by Express to parse incoming JSON requests.app.use(express.json());

index.js

const express = require('express')const mongoose = require("mongoose");const Task = require("./model/task");require("dotenv").config(); //for using variables from .env file.const app = express()const port = 3000//middleware provided by Express to parse incoming JSON requests.app.use(express.json()); mongoose.connect(process.env.MONGODB_URL).then(() => { console.log("MongoDB is connected!"); });app.get('/', (req, res) => { res.send('Hello World!')})// Create an task itemapp.post("/tasks/create", async (req, res) => { try { const newTask = await Todo.create(req.body); res.status(201).json(newTask); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});// Read all todosapp.get("/tasks", async (req, res) => { try { const tasks = await Task.find(); res.status(200).json(tasks); } catch (error) { console.log(error); res.status(500).json({ error: "Internal Server Error" }); }});// Update a task by IDapp.put("/tasks/:id", async (req, res) => { try { const updatedTask = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true, }); res.status(200).json(updatedTask); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});// Delete a todo by IDapp.delete("/tasks/:id", async (req, res) => { try { await Task.findByIdAndDelete(req.params.id); res.status(204).send(); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});// Delete a todo by IDapp.delete("/tasks/:id", async (req, res) => { try { await Task.findByIdAndDelete(req.params.id); res.status(204).send(); } catch (error) { res.status(500).json({ error: "Internal Server Error" }); }});app.listen(port, () => { console.log(`Server is listening on port ${port}`)})

Testing the API

Run your server using this command.

nodemon index.js

When it comes to testing the API, I'm making use of the Thunder Client extension for Visual Studio Code.

To install the Thunder Client extension, click on manage icon on bottom left corner and select extensions.

Use the search bar to look for it, and then install it. After installing a thunder client icon will apper on the left screen, click on it and then click on new request on top to start working with it.

Creating a new Task item using POST request

Make sure that the Content-Type is set to application/json in the Headers tab, then select POST and write the URL along the lines as in the image below.

Make sure to include a title and description of the Task item in the Body tab, just like we see in the image.

The following response will be displayed after you click the Send button.

We completed our first duty. You can create more task items with different titles and descriptions using the same approach. The MongoDB compass app can also display these items after connecting with your connection string, as shown below.

Select compass as the tool to connect to MongoDB compass by clicking connet on MongoDB. substitute with your own password and insert it into the campass connection string.

Get all tasks using a GET request

To access the tasks, select GET, copy the URL (as seen in the figure below), and then hit the Send button.

As can be seen in the image, you will receive the response.

Update task using PUT request

We are going to require the id of the task item in order to properly update the task. It is therefore necessary for you to copy the id of the task that you obtained in the previous response. To write the URL, select the PUT option and write it down as seen in the image.

Now, change the title and description in the Body tab.

When you click "Send," you'll get the message below.

Delete a task item using the DELETE request

Prior to deleting the task, we will need to know its ID. You need to copy the ID that you got in the last response . Select "DELETE" and write down the URL, as shown in the picture below.

This is what you'll get after hitting the "Send" button.

Conclusions

Using Express, MongoDB, and Node.js, this detailed article has provided you with a full walkthrough of the main processes and concepts involved in the process of developing a RESTful application programming interface (API). We went over the fundamental components of establishing routes, interacting with MongoDB by means of Mongoose, and putting in place important HTTP methods. Developing a robust and scalable application programming interface (API) is ensured by placing a strong emphasis on error handling, the utilization of middleware, and adherence to best practices.

A Comprehensive Guide on Using Tailwind CSS with React Icons to Create an Engaging Contact Page

Daniel Musembi — Wed, 17 Jan 2024 10:34:01 +0000

Introduction

One of the most important places for customers to reach out to companies online is the contact page. Beyond mere aesthetics, a visually appealing contact page improves the user experience, establishes trust, and promotes meaningful engagement. A contact page in the ever-changing world of web design is more than simply a static form; it's a portal to significant user interactions. Users' impressions of a company or brand are frequently shaped at the contact page, which is a crucial point of interaction when navigating through websites. An attractive contact page may greatly affect user engagement and the public's perception of your business, so you must take the time to design one.

Introduction to the technologies used: Tailwind CSS and React Icons

Two robust technologies, Tailwind CSS and React Icons, are essential in our pursuit of making an aesthetically appealing contact page. The complementary qualities of each element help to ensure that form and function are well-coordinated. Let's take a quick look at these technologies and see why they work so well together to make interesting user experiences.

Tailwind CSS: Unleashing Utility-First Styling

Tailwind Regarding web development, CSS is a game-changer since it is a utility-first framework. Tailwind gives a large collection of utility classes that developers may use to compose styles directly in the HTML markup, rather than depending on pre-defined styles. The unprecedented efficiency and adaptability of this method make it possible to build cutting-edge, user-responsive interfaces in a flash. some of the key features are:

Putting Utility First:

Tailwind is utility-first, letting developers apply styles directly. This granular approach improves agility and reduces bespoke style.

Responsive Design Made Simple:

Tailwind makes responsive design easy. Responsive utility classes provide screen size adaptation without media queries in the framework.

Large Component Library:

Tailwind has a large pre-built component library. With these components and utility classes, developers can focus on creating great user experiences faster.

React Icons: Dynamic Iconography in React

Many developers turn to the widely used React Icons package for easy icon integration into React apps. A wide variety of well-known font sets, including Material Design, Font Awesome, and more, are available for customization in its extensive icon library. Using React Icons, adding dynamic and aesthetically pleasing icons to your React components is a breeze. some of the key features are as follows:

Flexible Icons:

React Icons provides developers with a variety of icon sets for different settings and design preferences.

Simple Integration:

Adding icons to React components is easy with React Icons. Icons can be imported and used directly in React code, making apps more visually appealing.

Customizing & Theming:

React Icons makes icon customisation and theming easy. Developers can match icon size, colour, and other styling to the design language.

Setting Up the Project

To begin, open Visual Studio Code and run the following command in the console to create a new React app. Give it the name contact form and navigate to it using the second command.

npx create-react-app contact-formcd contact-form

Install the necessary dependencies by running the following command

npm install

Installing Tailwind CSS in a React project

Run the following command to install tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

Configuring Tailwind CSS to suit project requirements

To turn the tailwind configuration file run the following command:

npx tailwindcss init -p

Image showing tailwind CSS configuration file

The next step is to add the paths to all of your template files into the tailwind.config.js file

'./index.html', './src/**/*.{js,ts,jsx,tsx}',

Image showing where to add the paths in tailwind.config.js

Lastly, add tailwind directives to the index.css file

@import 'tailwindcss/base';@import 'tailwindcss/components';@import 'tailwindcss/utilities';

Installing React Icons

Install react icons using the following command:

npm install react-icons --save

Designing the Contact Form

In the src folder, create a folder and name its components. In the components folder create a file and name it ContactPage.jsx

The following code is a contact page with classified contact information and an interactive form for user inquiries is provided by the ContactPage React component. It dynamically generates a visually pleasing grid structure with the contact details for various departments, including Careers, Delivery, and Support. The form has email and full name input fields, a drop-down menu for selecting a category, a text field for comments, and a checkbox for the terms and conditions agreement. The component, which has been styled with Tailwind CSS, has a contemporary and responsive design.

JavaScript import React from "react";import { MdEmail } from "react-icons/md";import { FaPhoneAlt, FaMessage } from "react-icons/fa";const ContactPage = () => { const ContactInfo = [{ title: "Delivery", email: "delivery@gmail.com", phone: "+254 780341267", message: "+254 789065432", }, { title: "Support", email: "support@gmail.com", phone: "+254 765890231", message: "+254 756421190", }, { title: "Careers", email: "careers@gmail.com", phone: "+254 768905413", message: "+254 711748900", },]; return (

Contact Us

Have questions? We're here to help!

{ContactInfo.map((info, index) => (

{info.title}

{info.email} {info.phone} {info.message} ))}

Have another question?

Fill the form below

Please choose a category Delivery Support Profile Careers Another category I have read and agree with {" "} terms & conditions Send Message );};export default ContactPage;


## Enhancing User Experience with Icons

- Visual Representation: The `react-icons` library is utilized to provide icons like `MdEmail`, `FaPhoneAlt`, and `FaMessage`. Users will find it easier to recognize and comprehend the material when these symbols are used to visually represent the various sorts of contact information.

- Differentiation by Category: The contact information is set up in groups, such as **Careers** , **Delivery** and **Support.** An icon is used to represent each group, which makes it easier for users to find the information they need.

- Accessibility and Readability: Icons come with text information, which makes them easy for people who use screen readers to reach. Putting icons and words together makes things look better and easier to read.

- Styling for Visual Appeal: To keep the look of the contact page uniform, icons are styled with certain colours (text-violet-700). This helps with the overall look and feel of the business.

## Integrating into the App

Import and return the `ContactPage` component in the `app.js`

import "./App.css";import ContactPage from "./components/ContactPage";export default function App() { return (

);}


The following code will run the app in the terminal and show the contact form we just made in the browser.

npm start


An image displaying the contact form on the web browser

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705487052488/7bdc431b-c19f-4a59-bb79-f4deb16b6a86.png)

## Animating Icons for Engagement

You can make your user interface more interesting and interactive using animated icons. Using the supplied React component for a contact page, you can add basic icon movements with Tailwind CSS. Here's a way to make animations more engaging for users:

- Hover Effects: You can add styles explicitly on hover using the hover classes provided by Tailwind CSS. Add a professional touch by combining them with transition classes. Here, the icon's size and colour will vary as you hover over it.

;


- Apply Animation Classes: Tailwind CSS provides utility classes for various animations. You can apply these classes to your icons to create animation effects. For example, you can use the `animate-bounce` class for a bouncing effect.


- Add Transitions: Apply transition classes to create smooth transitions for hover effects. For example, you can use the transition-transform class to smoothly transition the transform property. This will scale the icon to 110% on hover with a smooth transition.

;


- Balancing Aesthetics: Find the sweet spot between visual appeal and user engagement by experimenting with various transition and animation classes. Pick animations that go with the aesthetic motif of your contact page while keeping the entire design in mind.

;




Use these ways to bring your icons to life, making the contact page more visually appealing and engaging. Test and iterate to find the optimal animation styles for your app's design and user experience.

## Optimizing for Accessibility

Web development requires accessibility to make digital material usable by all. This comprehensive guide optimizes icon and form element accessibility to meet and exceed accessibility standards. Follow these best practices to make the web more inclusive.

1. Icons Accessibility

2. Focus on ARIA Roles

3. Form Elements Accessibility

4. Testing for Accessibility

## Troubleshooting and Debugging

Building a contact page with `Tailwind CSS` and `React` icons will cause complications. Let's discuss troubleshooting and debugging basics:

### Missing Styles or Classes

- Make sure `Tailwind CSS` and `React Icons` are installed and set up.

- Imported Statements: Recheck your project's import statements for both libraries.

- Check your `Tailwind CSS` configuration for mistakes and missing settings.

- Adjust `PurgeCSS` parameters to avoid accidentally removing styles.

### Browser Developer Tools

- Use browser developer tools to inspect components and detect styles.

- Examine computed styles to understand how styles cascade and affect components.

- The `Tailwind CSS DevTools` extension provides browser-specific debugging capabilities.

- Interactive Mode: Interactive mode lets you test utility classes in real time.

### Cross-Browser Compatibility

- Find anomalies by testing your contact page on different browsers.

- Vendor Prefixes: Address vendor-prefix issues for certain CSS properties that may vary across browsers.

- Versions of Libraries: Check that your `React icons` work with the latest version of `React`.

- Make sure you're using the `React Icons` components correctly in your JSX by checking their usage.

### Optimizing Styles

- Maximize the efficiency of your build process by adjusting [PurgeCSS](https://purgecss.com/) to delete unnecessary styles.

- Prioritize the loading of vital styles to speed up the initial page rendering in critical `CSS`.

- Use `cache-busting techniques` on `CSS` files to ensure users always see the most recent styles.

- Versioning Your Libraries: To Take Advantage of Performance and Bug Fix Updates, Always Use the Most Recent Versions of Your Libraries.

## Conclusion

The focus is on accessibility optimization when creating an interesting contact page with `Tailwind` CSS and `React` Icons. The use of accessible icons and form elements must be strictly enforced. You may ensure a smooth and accessible user experience by using ARIA properties that are made expressly for screen readers. Your contact page will be both aesthetically pleasing and usable for all users, regardless of their skills, thanks to thorough testing of accessibility elements and subsequent improvements. The significance of making user-friendly and accessible web content is shown by this dedication to accessibility.