That moment kicked off a massive shift in how healthcare gets delivered.

Telehealth became more than a workaround. It’s now a core part of modern care. As demand grows, developers are stepping up to build secure, real-time platforms that connect patients and providers from anywhere.

In this article, you’ll learn how to build a telehealth application with Stream’s React Video and Chat SDKs. You’ll set up authentication, create video calls, enable messaging, and design a functional user interface that mimics real-world telehealth workflows.

Let’s dive in.

Outline

• Introduction

• Prerequisites

• App Structure

• Project Setup

• Backend Setup

• Frontend Setup

• Stream Chat and Video Integration

• Chat and Video Function (Frontend)

• Project Demo

• Conclusion

Prerequisites

Before you start this tutorial, make sure you have:

• A basic understanding of React.

• Node.js and npm/yarn installed on your computer

• A free account with Stream

• Familiarity with Stream SDKs

• A basic understanding of Tailwind CSS for styling

• Experience with VS Code and Postman (for testing APIs)

App Structure

Before diving into the code, it’s helpful to understand how the app is structured.

# App Flow Structure

- Landing Page  
  - Navigation  
    - Home  
    - About  
    - Sign Up  
      - Verify Account  
        - Log In  
          - Dashboard  
            - Stream Chat  
            - Stream Video  
            - Log Out

Project Setup

Before getting started, create two folders: “Frontend” to handle the client-side code and “Backend” for the server-side logic. This separation allows you to manage both parts of your application efficiently.

Set Up React for the Frontend

Once the folders are created, you can set up the React application in the Frontend folder.

First, navigate to the Frontend directory using the command cd Frontend.

Now you can initialize your React project. You’ll use Vite, a fast build tool for React applications.

To create your React project, run the following command:

npm create vite@latest [project name] -- --template react

Next, navigate to your new project folder, using the command:

cd [project name]

Once there, install the required dependencies by running:

npm install

This command installs both the node_modules folder (which contains all your project's packages) and the package-lock.json file (which records exact versions of installed packages).

Next, you’ll need to install Tailwind CSS for styling. Follow the Tailwind Docs for step-by-step instructions.

Then, it’s time to set up the website. Using React, you’ll create the home sign-in/log-in pages. Both will be nested together using React-router-dom.

Here’s what the home page looks like:

Now, the user has a place to land whenever they visit the website.

Let’s set up the backend.

Backend Setup

Installing Required Packages

Before setting up your project's backend, it's important to define what your project needs to offer. This will help you install all the necessary packages in one go.

Start by moving into the backend folder using the command: cd Backend

Inside the Backend directory, initialize your Node.js project using npm install

This will create a package.json file, which stores metadata and dependencies for your project.

Next, install all the dependencies needed to build your backend. Run the following command:

npm i bcryptjs cookie-parser cors dotenv express jsonwebtoken mongoose nodemailer validator nodemon

Here’s a brief overview of what each package does:

• bcryptjs: Encrypts user passwords for secure storage.

• Cookie-parser: Handles cookies in your application.

• CORS: Middleware that enables cross-origin requests – essential for frontend-backend communication.

• dotenv: Loads environment variables from a .env file into process.env.

• Express: The core framework for building your server and API routes.

• jsonwebtoken: Generates and verifies JWT tokens for authentication.

• Mongoose: Connects your app to a MongoDB database.

• nodemailer: Handles sending emails from your application.

• Validator: Validates user inputs like email, strings, and so on.

• nodemon: Automatically restarts your server when changes are made to files.

Once your packages are installed, create two key files in the backend directory: App.js, which contains your app logic, middleware, and route handlers, and server.js, responsible for initializing and configuring your server.

Next, you have to update your package.json start script. Head to the package.json file in your backend directory and replace the default script:

"scripts": {
    "test": "echo\”Error: no test specified\" && exit 1”
  }

with this:

"scripts": {
    "start": "nodemon server.js"
  }

This setup allows you to run your server using nodemon, automatically reloading it when changes are made. This helps boost productivity during development.

To check if your backend setup is correct, open the server.js file and add a test log: console.log (“Any of your Log Message”). Then, head to your terminal in the backend directory, and run npm start. You should see the log message in the terminal, confirming that your backend is running.

App.js Setup

In the App.js file, start by importing the packages you initially installed.

const express = require("express");

const cors = require("cors");

const cookieParser = require("cookie-parser");

const app = express();


app.use(

  cors({

origin: [

   "http://localhost:5173",

],

credentials: true,

  })

);

app.use(express.json({ limit: "10kb" }));

app.use(cookieParser());

module.exports = app;

Here’s what the code above does:

The require statements import express, cors, and cookie-parser, which are essential for creating your backend server, handling cross-origin requests, and parsing cookies.

The const app = express(); command sets up a new instance of an Express application.

app.use(cors({ origin: ["http://localhost:5173"], credentials: true })); grants permission or allows requests from your frontend and enables cookie sharing between the frontend and backend of your application. This is important for authentication.

The app.use(express.json({ limit: "10kb" })); command is a middleware function that ensures the server can process incoming JSON payloads and protects against overly large requests, which could be used in DoS attacks.

The app.use(cookieParser()); command makes cookies available via req.cookies.

Last, the module.exports = app; command allows the app to be imported in other files, especially in server.js, which is where the app will be started.

Server.js Setup

Once App.js is set up, the next step is to create and configure your server in a new file called server.js.

Before doing that, ensure you have a MongoDB database set up. If you don’t have one yet, you can follow this video tutorial to set up a MongoDB database.

After setting up MongoDB, you will receive a username and password. Copy the password, head to your backend directory, and create a .env file to store it.

After you have stored the password, head back to complete your database setup.

Next, click on the “Create Database User” button, then click on the choose connection method option. Since we are using Node.js for this project, choose the “Drivers” option. This gives you the database connection string (you should see it at No. 3).

Then head to your .env and paste it there, and add auth immediately after you have “.net/”.

Here’s what it looks like:

mongodb+srv://<username>:<password>@cluster0.qrrtmhs.mongodb.net/auth?retryWrites=true&w=majority&appName=Cluster0

Lastly, whitelist your IP address. This ensures your backend can connect to MongoDB from your local machine or any environment during development.

To allow your application to connect to the database:

• Go to the "Network Access" section in the Security sidebar of your MongoDB dashboard.

• Click on “ADD IP ADDRESS.”

• Choose “Allow Access from Anywhere”, then click on Confirm.

At this point, you can set up your server.js

//server.js
require("dotenv").config();
const mongoose = require("mongoose");
const dotenv = require("dotenv"); //to Manage our environment variable

dotenv.config({ path: "./config.env" });
// console.log(process.env.NODE_ENV);

const app = require("./app");

const db = process.env.DB;
//connect the application to database using MongoDB

mongoose
  .connect(db)
  .then(() => {
    console.log("DB connection Successful");
  })
  .catch((err) => {
    console.log(err);
  });

const port = process.env.PORT || 3000;
// console.log(process.env.PORT)

app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

The server.js file is responsible for handling all server-related functions and logic. From the code above, the server.js file loads the environment variables using dotenv, connects your backend to MongoDB using mongoose, and starts the Express server. It gets the database URL and port from the config.env file, connects to the database, then runs your application on the specified port (8000).

If the specified port is not found, it falls back to port 3000 and a confirmation message is printed to the console indicating that the server is up and running on the specified port.

Connect the Database to MongoDB Compass

First, download the MongoDB Compass app. (Go here to download and install: https://www.mongodb.com/try/download/compass). The MongoDB Compass app makes it easy for us to manage our data.

Once the installation is complete, open the app and click on Click to add new connection. Go to your .env file, copy the connection string you initially got when setting up MongoDB, paste it in the URL section, and then click on “connect.” This setup helps you manage your data when you create and delete users.

Set up an Advanced Error Handling Method

You’ll now create an advanced error-handling mechanism. To do so, create a utils folder in your backend, a catchAsync.js file in the utils folder, and add this code:

//catchAsync.js
module.exports = (fn) => {
  return (req, res, next) => {
    fn(req, res, next).catch(next);
  };
};

Next, create an appError.js file still in your utils folder. In the appError.js file, add the following command:

class AppError extends Error {
  constructor(message, statusCode) {
    super(message);

    this.statusCode = statusCode;
    this.status = `${statusCode}`.startsWith("4") ? "fail" : "error";
    this.isOperational = true;

    Error.captureStackTrace(this, this.constructor);
  }
}

module.exports = AppError;

The code above is helpful in tracking and tracing errors. It also provides you with the URL and file location where your error might be occurring, which helps with cleaner error handling and debugging.

Next, let’s create a global error handler. Start by creating a new folder in the backend directory, and name it “controller”. In the controller folder, create your global error handling file. You can name it anything you like. In this example, it’s called globalErrorHandler.js.

Your globalErrorHandler file will define several functions that handle specific error types, such as database issues, validation failures, or even JWT problems and return a nicely formatted error response for users. For the globalErrorHandler to work properly, you have to create a controller function.

So, next, create an errorController.js file (still inside the controller folder). The errorController.js file responds to the user whenever an error is caught, sending the error in JSON format.

globalErrorHandler.js:

// globalErrorHandler.js
const AppError = require("../utils/appError");

const handleCastErrorDB = (err) => {
  const message = `Invalid ${err.path}: ${err.value}.`;
  return new AppError(message, 400);
};

const handleDuplicateFieldsDB = (err) => {
  const value = err.keyValue ? JSON.stringify(err.keyValue) : "duplicate field";
  const message = `Duplicate field value: ${value}. Please use another value!`;
  return new AppError(message, 400);
};

const handleValidationErrorDB = (err) => {
  const errors = Object.values(err.errors).map((el) => el.message);
  const message = `Invalid input: ${errors.join(". ")}`;
  return new AppError(message, 400);
};

const handleJWTError = () =>
  new AppError("Invalid token. Please log in again!", 401);
const handleJWTExpiredError = () =>
  new AppError("Your token has expired! Please log in again.", 401);

module.exports = {
  handleCastErrorDB,
  handleDuplicateFieldsDB,
  handleValidationErrorDB,
  handleJWTError,
  handleJWTExpiredError,
};

Here’s what the code above does:

The const handleCastErrorDB = (err) =>.. section handles MongoDB CastError which usually happens when an invalid ID is passed, and returns a 400 Bad Request error response using your AppError class.

The const handleDuplicateFieldsDB = (err) =>... checks and handles MongoDB duplicate key errors, such as trying to register an email or username that’s already taken and returns a 400 Bad Request error.

The const handleValidationErrorDB = (err) =>... handles Mongoose validation errors (like required fields missing or wrong data types). It gathers all the individual validation error messages and combines them into one.

The const handleJWTError = () => and const handleJWTExpiredError = () => handle errors which might occur as a result of invalid, tampered, or expired JWT tokens and return a 401 Unauthorized error response.

The module.exports = {……}; section exports all the individual error handlers so they can be used in the errorController.js file.

errorController.js:

//errorController.js
const errorHandlers = require("./globalErrorHandler");

const {
  handleCastErrorDB,
  handleDuplicateFieldsDB,
  handleValidationErrorDB,
  handleJWTError,
  handleJWTExpiredError,
} = errorHandlers;

module.exports = (err, req, res, next) => {
  err.statusCode = err.statusCode || 500;
  err.status = err.status || "error";

  let error = { ...err, message: err.message };

  if (err.name === "CastError") error = handleCastErrorDB(err);
  if (err.code === 11000) error = handleDuplicateFieldsDB(err);
  if (err.name === "ValidationError") error = handleValidationErrorDB(err);
  if (err.name === "JsonWebTokenError") error = handleJWTError();
  if (err.name === "TokenExpiredError") error = handleJWTExpiredError();

  res.status(error.statusCode).json({
    status: error.status,
    message: error.message,
    ...(process.env.NODE_ENV === "production" && { error, stack: err.stack }),
  });
};

To ensure your error-handling function works properly, head to your App.js and add the command:

//import command
const globalErrorHandler = require("./controller/errorController");
const AppError = require("./utils/appError");

//Catch unknown routes
app.all("/{*any}", (req, res, next) => {
  next(new AppError(`Can't find ${req.originalUrl} on this server!`, 404)); });

app.use(globalErrorHandler);

This ensures that all errors are properly handled and sends the error response to the user.

Create User Model

To build a user model, create a new folder in the backend directory and name it “model.” Inside the model folder, create a new file named userModel.js.

The userModel.js file is built essentially for user authentication and security. It provides a validation-rich schema for managing users using Mongoose, which maps how user data is structured in the MongoDB database. It includes validations, password hashing, and methods to compare user passwords securely.

//userModel.js
const mongoose = require("mongoose");
const validator = require("validator");
const bcrypt = require("bcryptjs");

const userSchema = new mongoose.Schema(
  {
    username: {type: String, required: [true, "Please provide username"], trim: true, minlength: 3, maxlength: 30, index: true,},
    email: {type: String, required: [true, "Please Provide an email"], unique: true, lowercase: true, validate: [validator.isEmail, "Please provide a valid email"],},
    password: {type: String, required: [true, "Please provide a Password"], minlength: 8, select: false,},
    passwordConfirm: {type: String, required: [true, "Please confirm your Password"],
     validate: {validator: function (el) {return el === this.password;},
        message: "Passwords do not match",
      },
    },
    isVerified: {type: Boolean, default: false,}, otp: String,
    otpExpires: Date,
     resetPasswordOTP: String,
      resetPasswordOTPExpires: Date,
    createdAt: {type: Date, default: Date.now,},}, { timestamps: true });

// Hash password before saving
userSchema.pre("save", async function (next) {
  if (!this.isModified("password")) return next();

  this.password = await bcrypt.hash(this.password, 12);
  this.passwordConfirm = undefined; // Remove passwordConfirm before saving
  next();
});

const User = mongoose.model("User", userSchema);
module.exports = User;

Auth Controller

Now, you can create logic that regulates your user's authentication process. This authentication logic consists of the sign-up, sign-in (log-in), OTP, and so on.

To do so, first head to your controller folder and create a new file. Call it authController.js because it handles the authentication flow of your project.

After you’ve created the file, you’ll create your sign-up function.

//import
const User = require("../model/userModel");
const AppError = require("../utils/appError");
const catchAsync = require("../utils/catchAsync");
const generateOtp = require("../utils/generateOtp");
const jwt = require("jsonwebtoken");
const sendEmail = require("../utils/email")

exports.signup = catchAsync(async (req, res, next) => {
  const { email, password, passwordConfirm, username } = req.body;

  const existingUser = await User.findOne({ email });

  if (existingUser) return next(new AppError("Email already registered", 400));

  const otp = generateOtp();

  const otpExpires = Date.now() + 24 60 60 * 1000; //when thhe otp will expire (1 day)

  const newUser = await User.create({
    username,
    email,
    password,
    passwordConfirm,
    otp,
    otpExpires,
  });

  //configure email sending functionality
  try {
    await sendEmail({
      email: newUser.email,
      subject: "OTP for email Verification",
      html: `<h1>Your OTP is : ${otp}</h1>`,
    });

    createSendToken(newUser, 200, res, "Registration successful");
  } catch (error) {
    console.error("Email send error:", error);
    await User.findByIdAndDelete(newUser.id);
    return next(
      new AppError("There is an error sending the email. Try again", 500)
    );
  }
});

const { email, password, passwordConfirm, username } = req.body; extracts the necessary registration details from the incoming request: email, password, password confirmation, and username during user sign-up.

const existingUser = await User.findOne({ email }); checks the database to see if a user already exists with the given email. If yes, it sends an error response using your AppError utility.

const otp = generateOtp(); generates the OTP, and const otpExpires = Date.now()….. is used to set the OTP to expire at a specified time or day.

With const newUser = await User.create({…});, the new user is saved in MongoDB with their credentials and the OTP info, with the password automatically hashed.

await sendEmail({…}); sends an email to the user. This email contains their sign-in OTP. If the email is sent successfully, createSendToken(newUser, 200, res, "Registration successful"); (which is a utility function) generates a JWT token and sends it in the response with a success message.

If the email fails to send or something goes wrong, await User.findByIdAndDelete(newUser.id); deletes the user from the database to keep things clean, and an error message of There is an error sending the email. Try again", 500 is returned.

Generate OTP

To ensure that your users' OTP is successfully sent to them, in the utils folder, create a new file and name it generateOtp.js. Then add the code:

module.exports = () => {
  return Math.floor(1000 + Math.random() * 9000).toString();
};

The code above is a function that generates a user's random 4-digit OTP and returns it as a string.

After completing the code above, go to your authController.js and ensure you import the generateOtp.js in the import section.

Create User Token

Next, the user sign-in token will be created, and it will be assigned to the user upon sign-in.

const signToken = (userId) => {
  return jwt.sign({ id: userId }, process.env.JWT_SECRET, {
    expiresIn: process.env.JWT_EXPIRES_IN || "90d",
  });
};

//function to create the token
const createSendToken = (user, statusCode, res, message) => {
  const token = signToken(user._id);

  //function to generate the cookie
  const cookieOptions = {
    expires: new Date(
      Date.now() + process.env.JWT_COOKIE_EXPIRES_IN 24 60 60 1000
    ),

    httponly: true,
    secure: process.env.NODE_ENV === "production", //only secure in production
    sameSite: process.env.NODE_ENV === "production" ? "none" : "Lax",
  };

  res.cookie("token", token, cookieOptions);

  user.password = undefined;
  user.passwordConfirm = undefined;
  user.otp = undefined;

Before the code above can work perfectly, create a JWT in your .env file.

//.env
JWT_SECRET = kaklsdolrnnhjfsnlsoijfbwhjsioennbandksd;
JWT_EXPIRES_IN = 90d
JWT_COOKIE_EXPIRES_IN = 90

The code above is how the .env file should look. Your JWT_SECRET can be anything, just as you can see in the code.

Note: The user token creation logic should run before the sign-in logic. So in that case, the signToken and createSendToken logic should be placed at the top before the signup logic.

Send Email

Next, you need to configure your email sending functionality so you can automatically send the user's OTP to their email whenever they sign in. To configure the email, head to the utils folder, create a new file, and give it a name. In this example, the name is email.js.

In email.js, we will send emails using the nodemailer package and Gmail as a provider.

//email.js
const nodemailer = require('nodemailer');

const sendEmail = async (options) => {
  const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
      user: process.env.HOST_EMAIL,
      pass: process.env.EMAIL_PASS
    }
  })

  //defining email option and structure

  const mailOptions = {
    from: `"{HOST Name}" <{HOST Email} >`,
    to: options.email,
    subject: options.subject,
    html: options.html,
  };
  await transporter.sendMail(mailOptions);
};

module.exports = sendEmail;

From the code above, the const nodemailer = require('nodemailer'); command imports the nodemailer package. This is a popular Node.js library for sending emails.

The const transporter = nodemailer.createTransport({…..}) is an email transporter. Since we will be using the Gmail service provider, service will be assigned to Gmail and auth pulls your Gmail address and password from the .env file where it’s stored.

Note: The password is not your actual Gmail password but rather your Gmail app password. You can see how you can get your Gmail password here.

Once you’ve successfully gotten your Gmail app password, store it in your .env file.

Route Creation

At this point, you have finished setting up your project's signup function. Next, you need to test whether your signup works properly using Postman. But before that, let’s set up and define a route where the signup function will be executed.

To set up your route, create a new folder in your backend directory named "routes" and a file named userRouter.js.

const express = require("express");
const {signup} = require(“../controller/authController”);

const router = express.Router();
router.post("/signup", signup);

module.exports = router;

Next, go to your App.js file and add the router to it.

const userRouter = require("./routes/userRouters"); //Route import statement
app.use("/api/v1/users", userRouter) //common route for all auth, i.e sign up, log in, forget password, etc.

After setting up your routes, you can test your signup to see if it works. This is a post request, and the route URL will be http://localhost:8000/api/v1/users/signup.

The image above shows that the signup function works perfectly with a statusCode of 200 and an OTP code being sent to the user’s email.

Congratulations on reaching this point! You can check your MongoDB database to see if the user is displayed there.

From the image above, you can see that the user details are obtained and the password is in an encrypted form, which ensures the user credentials are safe.

Create a Verify Account Controller Function

In this section, you’ll create a Verify Account controller function. This function verifies a user’s account using the OTP code sent to their email address.

First, go to your authController.js file and add:

exports.verifyAccount = catchAsync(async (req, res, next) => {
  const { email, otp } = req.body;

  if (!email || !otp) {
    return next(new AppError("Email and OTP are required", 400));
  }

  const user = await User.findOne({ email });

  if (!user) {
    return next(new AppError("No user found with this email", 404));
  }

  if (user.otp !== otp) {
    return next(new AppError("Invalid OTP", 400));
  }

  if (Date.now() > user.otpExpires) {
    return next(
      new AppError("OTP has expired. Please request a new OTP.", 400)
    );
  }

  user.isVerified = true;
  user.otp = undefined;
  user.otpExpires = undefined;

  await user.save({ validateBeforeSave: false });

  // ✅ Optionally return a response without logging in
  res.status(200).json({
    status: "success",
    message: "Email has been verified",
  });
});

Next, create a middleware function to authenticate the currently logged-in user.

In your backend directory, create a new folder called middlewares. Inside the middlewares folder, create a file named isAuthenticated.js.

Add the following code:

//isAuthenticated.js
const jwt = require("jsonwebtoken");
const catchAsync = require("../utils/catchAsync");
const AppError = require("../utils/appError");
const User = require("../model/userModel");

const isAuthenticated = catchAsync(async (req, res, next) => {
  let token;

  // 1. Retrieve token from cookies or Authorization header
  if (req.cookies?.token) {
    token = req.cookies.token;
  } else if (req.headers.authorization?.startsWith("Bearer")) {
    token = req.headers.authorization.split(" ")[1];
  }

  if (!token) {
    return next(
      new AppError(
        "You are not logged in. Please log in to access this resource.",
        401
      )
    );
  }

  // 2. Verify token
  let decoded;
  try {
    decoded = jwt.verify(token, process.env.JWT_SECRET);
  } catch (err) {
    return next(
      new AppError("Invalid or expired token. Please log in again.", 401)
    );
  }

// 3. Confirm user still exists in database
  const currentUser = await User.findById(decoded._id);
  if (!currentUser) {
    return next(
      new AppError("User linked to this token no longer exists.", 401)
    );
  }

  // 4. Attach user info to request
  req.user = currentUser;
  req.user = {
    id: currentUser.id,
    name: currentUser.name,
  };

  next();
});

module.exports = isAuthenticated;
```
Now, go to your `userRouter.js` file and add the route for the verify account function:
```
const { verifyAccount} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");
router.post("/verify", isAuthenticated, verifyAccount);

Here is what these two sets of code are doing:

When a user sends a request to the /verify route, the isAuthenticated middleware runs first. It checks whether a valid token exists in the cookie or authorization header. If no token is found, it throws an error: You are not logged in. Please log in to access this resource.

If a token is found, it verifies the token and checks if the associated user still exists. If not, another error is thrown: "User linked to this token no longer exists."

If the user exists and the token is valid, their details are attached to the request (req.user). The request then proceeds to the verifyAccount controller, which handles OTP verification.

You can test this endpoint using Postman with a POST request to: http://localhost:8000/api/v1/users/verify

The image above shows that the verify token function is working well, and a status code of 200 is displayed.

Login Function

If you’ve reached this point, you’ve successfully signed up and verified a user’s account.

Now it’s time to create the login function, which allows a verified user to access their account. Here’s how you can do that:

Go to your authController.js file and create your login function by adding the following:

exports.login = catchAsync(async (req, res, next) => {
  const { email, password } = req.body;

  // 1. Validate email & password presence
  if (!email || !password) {
    return next(new AppError("Please provide email and password", 400));
  }

  // 2. Check if user exists and include password
  const user = await User.findOne({ email }).select("+password");
  if (!user || !(await user.correctPassword(password, user.password))) {
    return next(new AppError("Incorrect email or password", 401));
  }

  // 3. Create JWT token
  const token = signToken(user._id);

  // 4. Configure cookie options
  const cookieOptions = {
    expires: new Date(
      Date.now() +
        (parseInt(process.env.JWT_COOKIE_EXPIRES_IN, 10) || 90) 24 60 60 1000
    ),
    httpOnly: true,
    // secure: process.env.NODE_ENV === "production",
    // sameSite: process.env.NODE_ENV === "production" ?
    //  "None" : "Lax",

    //set to false during or for local HTTP and cross-origin
    secure: false,
    sameSite: "Lax",
  };

  // 5. Send cookie
  res.cookie("token", token, cookieOptions);

});

if (!email || !password) {…} checks if the user actually provided both an email and a password. If not, it returns the error: Please provide email and password", 400.

const user = await User.findOne({ email }).select("+password"); searches the database for a user with the provided email and explicitly includes the password field, since it’s normally hidden by default in the schema.

if (!user || !(await user.correctPassword(…))) {…} checks if the user exists and if the password entered matches the one stored in the database (after hashing comparison). If either is wrong, it throws: Incorrect email or password.

The line signToken(user._id) generates a JWT using the user's unique ID. The cookieOptions object configures how the cookie behaves – it sets the cookie to expire after a specific number of days defined in the .env file, marks it as httpOnly to prevent JavaScript access for security, sets secure to false since the app is currently in development, and uses sameSite: "Lax" to allow cross-origin requests during local testing.

Finally, res.cookie(...) sends the token as a cookie attached to the HTTP response, enabling the client to store the token for authentication purposes.

From the code above, you may have noticed that the password stored in the database is hashed for security reasons. This means it looks completely different from the user's password when logging in. So, even if a user types in the correct password, it won't match the stored hash directly through a simple comparison.

To fix this, you need to compare the entered password with the hashed one using the bcryptjs package.

Head over to your userModel.js file and create a method that handles password comparison. This method will take the plain text password provided by the user and compare it to the hashed password stored in the database.

//userModel.js
//create a method responsible for comparing the password stored in the database

userSchema.methods.correctPassword = async function (password, userPassword) {
  return await bcrypt.compare(password, userPassword);
};

This correctPassword method uses bcrypt.compare(), which internally hashes the plain password and checks if it matches the stored hashed version. This ensures that login validation works correctly and securely, even though the actual password is not stored in plain text.

Next, add the Login functionality to the userRouter.js file.

const {login} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");

router.post("/login", login);

You can test this endpoint using Postman with a POST request to: http://localhost:8000/api/v1/users/login

Logout Function

At this point, you can implement the logout function to end a user's session securely. To do this, navigate to your authController.js file and add the following function:

//creating a log out function
exports.logout = catchAsync(async (req, res, next) => {
  res.cookie("token", "loggedout", {
    expires: new Date(0),
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
  });

  res.status(200).json({
    status: "success",
    message: "Logged out successfully",
  });
});

This function works by overwriting the authentication cookie named token with the value "loggedout" and setting its expiration time to the past using new Date(0). This effectively invalidates the cookie and removes it from the browser.

The httpOnly: true flag ensures that the cookie cannot be accessed via JavaScript, which protects it from XSS attacks, while the secure flag ensures that the cookie is only sent over HTTPS in a production environment. Once the cookie is cleared, a success response is returned with the message "Logged out successfully" to confirm the action.

Next, add the logout functionality to your route:

const {logout} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");

router.post("/logout", logout);

Then, head to Postman to test your logout function and see if it works.

Frontend Setup

Now that your backend is up and running, you can integrate it into your frontend application.

First, navigate to the frontend directory using the command cd Frontend.

Create a new folder in the src folder where your authentication-related files will live. Depending on your preference or app structure, you can name it something like auth or pages. Then, create a new file called NewUser. js. This file will handle user signup functionality.

import axios from 'axios';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Loader } from 'lucide-react';
import { useDispatch } from 'react-redux';
import { setAuthUser, setPendingEmail } from '../../../../store/authSlice';

const API_URL = import.meta.env.VITE_API_URL;

function NewUser() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    passwordConfirm: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const submitHandler = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await axios.post(`${API_URL}/users/signup`, formData, {
        withCredentials: true,
      });
      const user = response.data.data.user;
      dispatch(setAuthUser(user));
      dispatch(setPendingEmail(formData.email)); // Save email for OTP
      navigate('/verifyAcct'); // Navigate to OTP verification page
    } catch (error) {
      alert(error.response?.data?.message || 'Signup failed');
    } finally {
      setLoading(false);
    }
  };

  return (
<div>
// visit the frontend Github repository to see the remaining code for the OTP Verification

https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/Join/NewUser.jsx
    </div>
  );
}

export default NewUser;

The code above renders a signup form with fields for username, email, password and passwordConfirm. When the user submits the form, the frontend sends a POST request to the backend’s /users/signup endpoint using Axios. The withCredentials: true option ensures cookies like the auth token are properly set by the backend.

If the signup is successful, the user data is dispatched into Redux using setAuthUser(), and their email is saved with setPendingEmail() so it can be used during OTP verification. Then, the user is redirected to the /verifyAcct route, where they can enter their OTP.

OTP Verification Page

The OTP verification page is the next step in the user authentication process. Once a user signs up, they are redirected to enter the 4-digit OTP sent to their email. This verifies their account before allowing login access.

import React, { useState, useRef, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
import { clearPendingEmail } from '../../../../store/authSlice';

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api'; // adjust as needed

function VerifyAcct() {
  const [code, setCode] = useState(['', '', '', '']);
  const [loading, setLoading] = useState(false);
  const [resendLoading, setResendLoading] = useState(false);
  const [timer, setTimer] = useState(60);

  const inputsRef = useRef([]);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const email = useSelector((state) => state.auth.pendingEmail);

  useEffect(() => {
    let interval;
    if (timer > 0) {
      interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
    }
    return () => clearInterval(interval);
  }, [timer]);

  const handleChange = (value, index) => {
    if (!/^\d*$/.test(value)) return;
    const newCode = [...code];
// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/login/VerifyAcct.jsx
}
export default VerifyAcct;

Here’s what the code does:

The OTP is stored as an array of 4 characters ([‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘]). Each box only accepts digits, and focus automatically moves to the next input as the user types in the digit. The focus returns to the previous input box if the user presses the backspace button on an empty box.

When the OTP has been added and the form is submitted, the 4-digit code is joined into a string and an HTTP POST request is made to the backend /user/verify/ endpoint along with the stored email and OTP. If the verification is successful, the user is alerted and redirected to the login page, and if not, an error is shown.

Log In

Now you can create the login interface for your application. First, create a Login.jsx file and input the code:

//Login.Jsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

function Join() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const res = await axios.post(`${API_URL}/users/login`, formData, {
        withCredentials: true,
      });

      if (res.data.status === 'success') {
        const { token, user, streamToken } = res.data;

        // Save to localStorage
        localStorage.setItem('authToken', token);
        localStorage.setItem('user', JSON.stringify(user));
        localStorage.setItem('streamToken', streamToken);

        navigate('/dashboard');
      }
    } catch (err) {
      console.error(err);
      setError(
        err.response?.data?.message || 'Something went wrong. Please try again.'
      );
    } finally {
      setLoading(false);
    }
  };

  return (
<div>
{// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/login/Login.jsx
 </div>
);
}

The Export default Join; component allows a registered and verified user to log into your application using their email and password. It handles form submission, talks to the backend, and securely stores user data if login is successful.

handleChange() updates the email or password field as the user types.

handleLogin() is triggered when the login form is submitted. When the login button is triggered, it sends a Post request to /users/login with the form data, which includes {withCredentials: true} to enable cookie handling.

If login is successful, it extracts the JWT token, user data, and Stream Chat token from the response and stores them in the localStorage so the user stays logged in across sessions. Then it redirects the user to the dashboard page using navigate(‘/dashboard’).

Set Up the Frontend Route

Just as you set up the backend route, you have to do the same for the frontend.

Head to App.jsx. Before adding the route, make sure you have installed the react-router-dom package. If not, run this command in the frontend terminal:

npm install react-router-dom

Then, add the command to your App.jsx file:

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomeIndex from './pages/Home/HomeIndex';
import Hero from './pages/Home/Hero';

//Authentication Section
import NewUser from './pages/Auth/Join/NewUser';
import Login from './pages/Auth/login/Login'
import VerifyAcct from './pages/Auth/login/VerifyAcct';

// Dashboard
import Dashboard from './pages/Dashboard/Dashboard';
import VideoStream from './components/VideoStream';

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomeIndex />,
    children: [
      { index: true, element: <Hero /> }
    ],
  },

  {
    path: 'signup',
    element: <NewUser />,
    children: [
      { index: true, element: <NewUser /> }
    ],
  },

  {
    path: 'login',
    element: <Login />,
    children: [
      {index:true, element:<Login />}
    ]
  },

]);
{// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/App.jsx}

function App() {
  return (
    <div className='border border-red-700 w-full min-w-[100vw] min-h-[100vh]'>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

Stream Chat and Video Integration

Before proceeding to the dashboard, let’s integrate the Stream Chat and Video functionality into the project.

First, create a free Stream account, start a new project in your dashboard, and get your APP KEY and API_SECRET.

STREAM_API_KEY=your_app_key
STREAM_API_SECRET=your_api_secret

Watch the Stream Chat React Quick Start Guide to see how you can set it up.

Next, store your Stream APP KEY and API_SECRET in your .env.

Install Stream Packages (Frontend)

Now, install the Stream Chat and Video packages in your terminal.

npm install stream-chat stream-chat-react
npm install @stream-io/video-react-sdk
npm install @stream-io/stream-chat-css

Stream Token Handler

First, create a new file in your frontend Src directory and name it. In this example, it’s StreamContext.jsx. This file sets up a context to fetch and manage the Stream Chat token on login and includes logout functionality.

import React, { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

// 1. Create the context
const StreamContext = createContext();

// 2. Provider component
export const StreamProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const res = await axios.get(`${API_URL}/stream/get-token`, {
          withCredentials: true,
        });

        if (res.data?.user && res.data?.token) {
          setUser(res.data.user);
          setToken(res.data.token);
          console.log("Stream user/token:", res.data);
        } else {
          console.error("Token or user missing in response:", res.data);
        }
      } catch (error) {
        console.error("Error fetching Stream token:", error);
      }
    };

    fetchToken();
  }, []);

  //Log out Functionality
  const logout = async () => {
    try {
      await axios.post(`${API_URL}/users/logout`, {},
        {
          withCredentials: true
        });

      // Clear localStorage
      localStorage.removeItem('authToken');
      localStorage.removeItem('user');
      localStorage.removeItem('streamToken');

      // Clear context
      setUser(null);
      setToken(null);
    } catch (error) {
      console.error("Logout failed", error);
    }
  };

  // Expose Logout with capital L
  return (
    <StreamContext.Provider value={{ user, token, Logout:logout }}>
      {children}
    </StreamContext.Provider>
  );
};

// 3. Custom hook for easy access
export const useStream = () => useContext(StreamContext);

The code above creates a StreamContext using React’s Context API. In the useEffect section, it makes a GET request to /stream/get-token to fetch the authenticated user and their Stream token. Then it stores them in user and token states. It also provides the user/token through the context so that any component that needs it can make use of it.

Finally, it adds a Logout method that hits the logout endpoint and clears all stored auth data from localStorage.

Next, open your main.jsx and wrap your entire application with the StreamProvider so all child components can access the Stream context.

// main.jsx
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import App from './App';
import { StreamProvider } from './components/StreamContext';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <StreamProvider>
      <App />
    </StreamProvider>
  </StrictMode>
);

Set Up Stream API

After successfully creating the streamContent, the next step is to set up the Stream API. This will be the endpoint from which the user ID and user Stream token can be generated and fetched during login.

To set it up, navigate to your backend directory by running cd Backend in your terminal. Then install the Stream package using the command:

npm install getstream
npm install stream-chat stream-chat-react

Open your .env file and add your Stream API KEY and API_SECRET:

STREAM_API_KEY=your_app_key
STREAM_API_SECRET=your_api_secret

Next, open your authController.js and create your Stream Chat logic:

//Initialize the Stream Client
const {StreamChat} = require("stream-chat");
const streamClient = StreamChat.getInstance(
  process.env.STREAM_API_KEY,
  process.env.STREAM_API_SECRET
);

// Modifies the `createSendToken to include `streamToken`
const createSendToken = (user, statusCode, res, message) => {
……
const streamToken = streamClient.createToken(user._id.toString());

  //structure of the cookie response when sent to the user
  res.status(statusCode).json({
    status: "success",
    message,
    token,
    streamToken,
    data: {
      user: {
        id: user._id.toString(),
        name: user.username,
      },
    },
  });
};

//login functionality
exports.login = catchAsync(async (req, res, next) => {
 {…………………..}

// Generate Stream token
  await streamClient.upsertUser({
    id: user._id.toString(),
    name: user.username,
  });
  const streamToken = streamClient.createToken(user._id.toString());

user.password = undefined;

  res.status(200).json({
    status: "success",
    message: "Login successful",
    token,
    user: {
      id: user._id.toString(),
      name: user.username,
    },
    streamToken,
  });

streamRoutes Endpoint

Next, create an endpoint from which the Stream token can be called. To do this, go to your routes folder and create a new file called streamRoutes.js. In streamRoutes.js, add the command:

const express = require("express");
const { StreamChat } = require("stream-chat");

const protect = require("../middlewares/protect");

const router = express.Router();

const apiKey = process.env.STREAM_API_KEY;
const apiSecret = process.env.STREAM_API_SECRET;

if (!apiKey || !apiSecret) {
  throw new Error(
    "Missing Stream credentials. Check your environment variables."
  );
}

const streamClient = StreamChat.getInstance(apiKey, apiSecret);

router.get("/get-token", protect, async (req, res) => {
  try {
    const { id, username } = req.user || {};
    console.log(req.user.id, "User");
    // TRY LOGGING THE ID AND NAME FROM YOUR REQUEST FIRST

    if (!id || !username) {
      return res.status(400).json({ error: "Invalid user data" });
    }

    // const userId = _id.toString();
    const user = { id, username };

    // Ensure user exists in Stream backend
    await streamClient.upsertUser(user);

    // Add user to my_general_chat channel
    const channel = streamClient.channel("messaging", "my_general_chat");
    await channel.addMembers([id]);


    // Generate token
    const token = streamClient.createToken(id);
    res.status(200).json({ token, user });
  } catch (error) {
    console.error("Stream token generation error:", error);
    res.status(500).json({ error: "Failed to generate Stream token" });
  }
});

/**
 * @route   POST /api/stream/token
 * @desc    Generate a Stream token for any userId from request body (no auth)
 * @access  Public
 */
router.post("/token", async (req, res) => {
  try {
    const { userId, name } = req.body;

    if (!userId) {
      return res.status(400).json({ error: "userId is required" });
    }

    const userName = name || "Anonymous";
    const user = { id: userId, name: userName };

    await streamClient.upsertUser(user);

    // Add user to my_general_chat channel
    const channel = streamClient.channel("messaging", "my_general_chat");
    await channel.addMembers([userId]);


    const token = streamClient.createToken(userId);

    res.status(200).json({
      token,
      user: {
        id: userId,
        name: name,
        role: "admin",
        image: `https://getstream.io/random_png/?name=${name}`,
      },
    });
  } catch (error) {
    console.error("Public token generation error:", error);
    res.status(500).json({ error: "Failed to generate token" });
  }
});

module.exports = router;

User Logout Endpoint

Go to your authController.js and create a functionality that handles logging out the user:

exports.logout = catchAsync(async (req, res, next) => {
  res.cookie("token", "loggedout", {
    expires: new Date(0),
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
  });

  res.status(200).json({
    status: "success",
    message: "Logged out successfully",
  });
});

Then register your logout route to your userRouters.js:

const express = require("express");
const {logout}= require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");


router.post("/logout", isAuthenticated, logout);

module.exports = router;

Chat and Video Function (Frontend)

After setting up your backend Stream API, the last task is setting up chat and video in your frontend application.

Dashboard.jsx

Create a new file Dashboard.jsx in your frontend directory. This is where you will set up your Stream and video function.

import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  Chat,
  Channel,
  ChannelHeader,
  MessageInput,
  MessageList,
  Thread,
  Window,
  useCreateChatClient,
} from "stream-chat-react";
import "stream-chat-react/dist/css/v2/index.css";
import { useStream } from "../../components/StreamContext";
import VideoStream from "../../components/VideoStream";
import { useNavigate } from "react-router-dom";



const apiKey = import.meta.env.VITE_STREAM_API_KEY;

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

function App() {
  const [channel, setChannel] = useState(null);
  const [clientReady, setClientReady] = useState(false);
  const navigate = useNavigate();

  // const ChatComponent = () => {
    const { user, token, Logout } = useStream();

    // Always call the hook
    const chatClient = useCreateChatClient({
      apiKey,
      tokenOrProvider: token,
      userData: user?.id ? { id: user.id } : undefined,
    });

  // Debug: See when user/token is ready
  useEffect(() => {
    console.log("Stream user:", user);
    console.log("Stream token:", token);
  }, [user, token]);

    // Connect user to Stream
    useEffect(() => {
      const connectUser = async () => {
        if (!chatClient || !user || !token || !user?.id) {
          console.warn("Missing chat setup data:", { chatClient, token, user });
          return;
        }


        try {
          await chatClient.connectUser(
            {
              id: user.id,
              name: user.name || "Anonymous",
              image:
                user.image ||
                `https://getstream.io/random_png/?name=${user.name || "user"}`,
            },
            token
          );

          const newChannel = chatClient.channel("messaging", "my_general_chat", {
            name: "General Chat",
            members: [user.id],
          });

          await newChannel.watch();
          setChannel(newChannel);
          setClientReady(true);
        } catch (err) {
          console.error("Error connecting user:", err);
        }
      };

      connectUser();
    }, [chatClient, user, token]);

    const handleVideoCallClick = () => {
      navigate("/videoCall");
  };

  const handleLogout = async () => {
    await Logout();
    navigate("/login");
  }

  if (!user || !token) {
    return <div className="text-red-600">User or token not ready.</div>;
  }

  if (!clientReady || !channel) return <div>Loading chat...</div>;


  return (
{ checkout the github repo}
            <ChannelHeader />
            <MessageList />
            <MessageInput />
          </Window>
          <Thread />
        </Channel>
      </Chat>


      </div>

    );
  }

export default App;

Video Setup

You’ll now set up the video function for your frontend. To do so, create a new file VideoStream.jsx and add the command:

import React, { useEffect, useState } from "react";
import { StreamVideoClient } from "@stream-io/video-client";
import { StreamVideo, StreamCall } from "@stream-io/video-react-sdk";
import { useNavigate } from "react-router-dom";


import { useStream } from "./StreamContext";
import { MyUILayout } from "./MyUILayout";


const apiKey = import.meta.env.VITE_STREAM_API_KEY;

function VideoStream() {

  const [client, setClient] = useState(null);
    const [call, setCall] = useState(null);
  const { user, token } = useStream();
  const navigate = useNavigate();

  useEffect(() => {

    let clientInstance;
    let callInstance;


    const setup = async () => {
      if (!apiKey || !user || !token) return;

      clientInstance = new StreamVideoClient({ apiKey, user, token });

      callInstance = clientInstance.call("default", user.id); // Use user.id as callId


      await callInstance.join({ create: true });

      setClient(clientInstance);
      setCall(callInstance);
    };

    setup();

    return () => {
      if (callInstance) callInstance.leave();
      if (clientInstance) clientInstance.disconnectUser();

    };
  }, [user, token]);

  const handleLeaveCall = async () => {
    if (call) await call.leave();
    if (client) await client.disconnectUser();

    setCall(null);
    setClient(null);

    navigate("/dashboard"); // or any other route
  };

  if (!apiKey) return <div>Missing Stream API Key</div>;

  if (!client || !call)
    return (
  <div className="flex items-center justify-center h-screen text-xl font-semibold">
    Connecting to the video call...
  </div>
    );

  return (
    <div className="relative h-screen w-full p-2 sm:p-4 bg-gray-50">
      <StreamVideo client={client}>
        <StreamCall call={call}>
          <MyUILayout />
        </StreamCall>
      </StreamVideo>

      <button
        onClick={handleLeaveCall}
        className="absolute top-2 right-2 sm:top-4 sm:right-4 bg-red-600 text-white text-sm sm:text-base px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg shadow hover:bg-red-700 transition"
      >
        Leave Call
      </button>
    </div>
    );
  }

export default VideoStream;

//MYUILayout.jsx
import React from 'react';
import {
  useCall,
  useCallStateHooks,
  CallingState,
} from '@stream-io/video-react-sdk';

export function MyUILayout() {
  const call = useCall();
  const { useCallCallingState, useParticipantCount } = useCallStateHooks();
  const callingState = useCallCallingState();
  const participantCount = useParticipantCount();

  if (callingState !== CallingState.JOINED) {
    return <div>Joining call...</div>;
  }

  return (
    <div style={{ padding: '1rem', fontSize: '1.2rem' }}>
      ✅ Call "<strong>{call?.id}</strong>" has <strong>{participantCount}</strong> participants.
    </div>
  );
}

Project Demo

Congratulations! You have successfully integrated Stream’s chat and video function into your application.

Conclusion

And that’s a wrap!

You’ve built a telehealth app with secure video, real-time chat, and user authentication – all powered by Stream’s Chat and Video SDKs.

This foundation gives you the flexibility to expand further with features like appointment scheduling, patient history, or HIPPA-compliant file sharing.

You can find the frontend and backend applications on GitHub. The frontend app is hosted using the Vercel hosting service, and the backend is hosted on Render.

Check out the repository of the application.

Happy coding! 🚀

We just published a complete MERN stack course on the freeCodeCamp.org YouTube channel. It’s beginner-friendly, and it walks you through everything from setting up your development environment to deploying a real-world notes app with full CRUD functionality. Burak, your instructor, explains every step clearly and doesn’t skip over the parts that usually trip people up.

You’ll build something useful while picking up important backend concepts like route handling, controllers, middleware, and rate limiting. On the frontend, you’ll create a clean, responsive UI using React. It’s practical and hands-on, so by the end, you’ll not only understand how to build and connect a REST API with a frontend, but you’ll have deployed your app too.

What’s covered:

• Project Preview: A quick look at what you'll be building: a simple but polished notes app.

• Backend Setup: Start by initializing your Node.js project and learning the basics of Express.

• Nodemon & Routes: Set up development tools like Nodemon and build your first API routes.

• Organizing Your Code: Structure your folders and files in a clean, scalable way.

• MongoDB: Connect to a MongoDB database and start storing your notes.

• Controllers: Create controller functions to handle your API logic cleanly.

• Middleware & Rate Limiting: Add middleware functions for error handling and security features like rate limiting.

• Frontend Setup: Start building the React frontend and connect it to your backend.

• Home Page: Display all notes pulled from the backend.

• Create Page: Add the UI and logic for creating new notes.

• Delete Functionality: Let users delete notes and sync the frontend with the backend.

• Detail Page: Show individual note details on a separate page.

• Deployment: Learn how to deploy the whole app, step by step, with extra attention to details that most tutorials skip.

If you’re serious about learning web dev or need a project for your portfolio, this is a great place to start. Watch the full course now on the freeCodeCamp.org YouTube channel.

Before diving into this article, I recommend that you have a foundational understanding of HTML, CSS, and JavaScript, as well as some knowledge of frontend and backend frameworks and libraries.

My primary focus will be on functionality, allowing you to customize the design as you see fit. The commands I’ll use here are tailored for Windows, so if you're using Linux, macOS, or Ubuntu, you may need to adjust them accordingly.

By the end of this guide, you'll have a fully functional To-Do app up and running on your system.

Table of Contents

• Introduction to the MERN Stack

• How to Set Up Your Development environment

  • Install Node.js and npm - Node Package Manager

• How to Set Up a New MERN Project

  • Frontend Setup

  • Build the To-Do App UI

  • Displaying your tasks in the UI

  • Give Your App Customized Styling

  • Backend Setup

  • Set Up MongoDB Atlas

  • Run the Application

• Conclusion

Introduction to the MERN Stack

The MERN stack is a popular JavaScript stack for building modern web applications. It consists of:

• MongoDB: A NoSQL database for storing data.

• Express.js: A backend framework for building APIs.

• React (UI library) + Vite (build tool) + TypeScript (typed JavaScript): A modern frontend stack for building scalable and maintainable user interfaces.

• Node.js: A runtime environment for executing JavaScript on the server.

How to Set Up Your Development environment

Install Node.js and npm (Node Package Manager)

Instead of installing Node.js and npm in your project folder, I advise you to install them in your system's root directory so that you can use them in any project, not just this one.

First, download and install Node.js (which includes npm) from the official website if you don’t have it already.

After installation, open your command line (I am using Git Bash) and verify the installation by running the following commands:

node -v
npm -v

You should see the installed versions of Node.js and npm if correctly installed.

How to Set Up a New MERN Project

Create a project folder and open your code editor by running these commands:

mkdir mern-todo-app
cd mern-todo-app
code .

The command code . automatically opens VS Code. If it doesn’t, open VS Code manually and navigate to your mern-todo-app folder.

Frontend Setup

Set Up Vite with React and TypeScript

Make sure you are in your project root directory (mern-todo-app), then run the following command:

npm create vite@latest frontend --template react-ts

This command will create a TypeScript-based React frontend inside the frontend folder within your mern-todo-app directory.

Install Axios for Making API Requests

Axios is a popular JavaScript library used to make HTTP requests from the frontend to a backend API. It simplifies sending GET, POST, PUT, and DELETE requests and handling responses.

To install Axios, run the following command:

cd frontend
npm install axios

Build the To-Do App UI

Inside the src folder, create an App.tsx file if it doesn’t already exist, and add the below code. It’s a lot, but don’t worry – I’ll break it down bit by bit afterwards:

frontend/src/App.tsx:

// BLOCK 1: Importing Dependencies
import React, { useState, useEffect } from "react";
import axios from "axios";
import TodoList from "./components/TodoList.tsx";
import "./App.css";

// BLOCK 2: Defining Task Interface
interface Task {
  _id: string;
  title: string;
  completed: boolean;
}

// BLOCK 3: Setting Up State Variables
const App: React.FC = () => {
  // State for tasks, new task text, and editing controls
  const [tasks, setTasks] = useState<Task[]>([]);
  const [task, setTask] = useState<string>("");
  const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
  const [editingTitle, setEditingTitle] = useState<string>("");

  // BLOCK 4: Fetch tasks from the backend on component mount
  useEffect(() => {
    const fetchTasks = async () => {
      try {
        const response = await axios.get<Task[]>(`http://localhost:5000/api/tasks`);
        console.log("Fetched tasks:", response.data); // Debugging log
        setTasks(response.data);
      } catch (error) {
        console.error("Error fetching tasks:", error);
      }
    };
    fetchTasks();
  }, []);

  // BLOCK 5: Adding a Task
  const addTask = async () => {
    if (!task) return;

    try {
      console.log("Adding task:", task); // Debugging log
      const response = await axios.post<Task>(
        `http://localhost:5000/api/tasks`,
        { title: task },
        { headers: { "Content-Type": "application/json" } }
      );
      console.log("Task added response:", response.data);
      setTasks([...tasks, response.data]);
      setTask("");
    } catch (error) {
      console.error("Error adding task:", error);
    }
  };

  // BLOCK 6: Delete a task
  const deleteTask = async (id: string) => {
    try {
      await axios.delete(`http://localhost:5000/api/tasks/${id}`);
      setTasks(tasks.filter((t) => t._id !== id));
    } catch (error) {
      console.error("Error deleting task:", error);
    }
  };

  // BLOCK 7: Updating a Task
  const updateTask = async (id: string, updatedTask: Partial<Task>) => {
    try {
      const response = await axios.put(
        `http://localhost:5000/api/tasks/${id}`,
        updatedTask,
        { headers: { "Content-Type": "application/json" } }
      );

      setTasks(
        tasks.map((task) =>
          task._id === id ? { ...task, ...response.data } : task
        )
      );
      setEditingTaskId(null);
      setEditingTitle("");
    } catch (error) {
      console.error("Error updating task:", error);
    }
  };

  // BLOCK 8: Handling Edits
  const startEditing = (id: string) => {
    setEditingTaskId(id);
  };

  // Handle title change during editing
  const handleEditChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEditingTitle(e.target.value);
  };

  // BLOCK 9: Render the app
  return (
    <div className="App">
      <h1>Todo App</h1>
      <div>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
        />
        <button onClick={addTask}>Add Task</button>
      </div>
      <TodoList
        tasks={tasks}
        deleteTask={deleteTask}
        updateTask={updateTask}
        editingTitle={editingTitle}
        setEditingTitle={setEditingTitle}
        editingTaskId={editingTaskId}
        setEditingTaskId={setEditingTaskId}
        startEditing={startEditing}
        handleEditChange={handleEditChange}
      />
    </div>
  );
};

// BLOCK 10: Exporting the Component
export default App;

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing dependencies

• React, { useState, useEffect }: Manages component state and side effects.

• axios: Handles API requests.

• TodoList.tsx: A child component to display and manage tasks.

• App.css: Styles the app.

BLOCK 2: Defining the task interface

• Defines the structure of a task (_id, title, completed).

BLOCK 3: Setting up state variables

• tasks: Stores the list of tasks.

• task: Holds input for new tasks.

• editingTaskId: Tracks the task being edited.

• editingTitle: Stores the updated title while editing.

BLOCK 4: Fetching tasks from the backend (useEffect)

• Runs once when the app loads.

• Calls the API (GET /api/tasks) to get tasks and updates tasks.

• Error handling**:** Logs an error message if the fetching request fails

BLOCK 5: Adding a task

• Sends a POST request to add a new task.

• Updates tasks with the new task.

• Error handling**:** Logs an error message if the adding task request fails

BLOCK 6: Deleting a task

• Sends a DELETE request to remove a task.

• Updates tasks by filtering out the deleted task.

• Error handling**:** Logs an error message if the deleting task request fails

BLOCK 7: Updating a task

• Sends a PUT request to update a task’s title.

• Updates tasks with the new title.

• Error handling**:** Logs an error message if the update request fails

BLOCK 8: Handling edits

• startEditing(id): Sets a task into edit mode.

• handleEditChange(e): Updates the editing input.

BLOCK 9: Rendering the UI

• Displays an input field and button to add tasks.

• Passes task data and functions (deleteTask, updateTask, etc.) to TodoList.tsx.

BLOCK 10: Exporting the component

• export default App;: Makes App usable in other files.

Displaying your tasks in the UI

Inside the src folder, create a new folder named components. Then add a TodoList.tsx file inside it with the below code.

src/components/TodoList.tsx:

// BLOCK 1: Importing Dependencies
import React from "react";

// BLOCK 2: Defining Interfaces
interface Task {
  _id: string; // Unique ID for the task
  title: string; // Task name
  completed: boolean; // True if done, False if not
}

interface TodoListProps {
  tasks: Task[];
  deleteTask: (id: string) => void;
  updateTask: (id: string, updatedTask: Partial<Task>) => void;
  editingTitle: string;
  setEditingTitle: (title: string) => void;
  editingTaskId: string | null;
  setEditingTaskId: (id: string | null) => void;
  startEditing: (id: string) => void;
  handleEditChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

// BLOCK 3: Declares the TodoList Component
const TodoList: React.FC<TodoListProps> = ({
  tasks,
  deleteTask,
  updateTask,
  editingTitle,
  setEditingTitle,
  editingTaskId,
  setEditingTaskId,
  startEditing,
  handleEditChange,
}) => {

  // BLOCK 4: Rendering the Task List and handling task actions
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task._id}>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => updateTask(task._id, { completed: !task.completed })}
          />
          {editingTaskId === task._id ? (
            <>
              <input type="text" value={editingTitle} onChange={handleEditChange} />
              <button
                onClick={() => {
                  updateTask(task._id, { title: editingTitle });
                  setEditingTaskId(null);
                }}
              >
                Save
              </button>
            </>
          ) : (
            <>
              <span style={{ textDecoration: task.completed ? "line-through" : "none" }}>
                {task.title}
              </span>

              <div>
                <button onClick={() => deleteTask(task._id)}>Delete</button>
                <button
                  onClick={() => {
                    startEditing(task._id);
                    setEditingTitle(task.title);
                  }}
                >
                  Edit
                </button>
              </div>
            </>
          )}
        </li>
      ))}
    </ul>
  );
};

// BLOCK 5: Exporting the Component
export default TodoList;

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing dependencies

• React: Enables functional component creation.

BLOCK 2: Defining interfaces

• Task interface: Defines _id, title, and completed properties.

• TodoListProps interface: Defines props passed to the TodoList component

BLOCK 3: Declares the TodoList component

• Defines a functional React component (TodoList) using TypeScript (React.FC<TodoListProps>).

• Extracts the listed props from TodoListProps and prepares the component for rendering.

BLOCK 4: Rendering the Task List and handling task actions

• Maps through tasks to display each task inside a <ul>.

• Checkbox toggles completed status using updateTask().

• Conditional rendering:

  • If a task is being edited, an input field appears for editing.

  • Otherwise, the task title is displayed with a strikethrough if completed

• Save button: Updates the task title using updateTask(), then exits edit mode.

• Delete button: Calls deleteTask() to remove a task.

• Edit button: Enables edit mode, setting editingTaskId and editingTitle.

BLOCK 5: Exporting the component

• Makes TodoList available for use in other components.

Give Your App Customized Styling

Inside your src folder, create App.css if it doesn’t exist and replace the content with your desired styling. Let’s give the frontend a finishing touch.

src/App.css:

/* Center the app in the middle of the screen */
html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4; /* Light gray background */
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Style the main app container */
.App {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
  width: 90%; /* Make it flexible */
  max-width: 350px; /* Prevent exceeding max size */
  box-sizing: border-box;
}

/* Add spacing below the title */
h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

/* Style input fields */
input {
  width: 100%; /* Full width */
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Style buttons */
button {
  width: 100%; /* Make buttons full width */
  padding: 10px;
  margin-top: 5px;
  border: none;
  background-color: #007bff; /* Blue background */
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  transition: background-color 0.3s ease-in-out;
}

/* Change button color when hovered */
button:hover {
  background-color: #0056b3;
}

/* Remove default list styles */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style list items */
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  width: 100%;
  box-sizing: border-box;
}

/* Allow task text to take available space */
span {
  flex: 1;
  font-size: 16px;
  color: #333;
}

/* Style completed tasks */
span.completed {
  text-decoration: line-through;
  color: #888;
}

/* Adjust the width of input fields inside the list */
input[type="text"] {
  width: 70%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Style the checkbox */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007bff; /* Blue checkbox to match buttons */
  margin-right: 10px;
}

/* Styling for editing mode */
.editing-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Responsive styling for smaller screens */
@media (max-width: 400px) {
  .App {
    width: 95%;
    padding: 15px;
    max-width: none; /* Remove fixed width restriction */
  }

  li {
    flex-direction: column;
    align-items: flex-start;
  }

  input {
    width: 100%;
  }

  button {
    width: 100%;
    padding: 10px;
  }
}

Here’s what this CSS code does:

First, it centers the app (html, body):

• Uses flexbox to center the app vertically and horizontally.

• Sets height: 100vh for full-screen height.

• Prevents horizontal scrolling with overflow-x: hidden.

Then it styles the main app container (.App):

• Adds a white background with rounded corners and a shadow.

• Ensures responsiveness with width: 90% and max-width: 350px.

Next, we handle typography and layout:

• Sets Arial, sans-serif as the font.

• Adds spacing below the title (h1).

• Ensures task text takes available space with span { flex: 1; }.

Then we deal with input and button styling:

• Inputs are full-width, styled with padding, borders, and rounded corners.

• Buttons are blue, full-width, with hover effects (background-color: #0056b3).

And then task list styling (ul, li, span.completed):

• Removes default list styles.

• Each task (li) has a white background, padding, rounded corners, and a shadow.

• Completed tasks are styled with a line-through and faded text color.

Next, we handle checkbox and editing mode styling:

• Styled blue checkboxes (accent-color: #007bff).

• Adds an editing-container with display: flex; for edit mode.

And finally, we make the design responsive (@media (max-width: 400px)):

• Adjusts .App width and padding for small screens.

• Stacks list items (li) vertically instead of side-by-side.

Backend Setup

In your VS Code terminal, make sure you are in your project root directory (inside mern-todo-app) and then create a folder called backend. Navigate to the backend folder and initialize Node.js:

mkdir backend
cd backend
npm init -y

Install Dependencies

Still inside your backend folder, run this command:

npm install express mongoose dotenv cors

In this command,

• express is a fast and minimal web framework for Node.js used to create server-side applications and APIs.

• mongoose is an Object Data Modeling (ODM) library for MongoDB, simplifying database interactions.

• dotenv loads environment variables from a .env file, keeping sensitive data secure.

• cors enables Cross-Origin Resource Sharing, allowing frontend applications to communicate with the backend across different domains.

Create a server.js File

Inside your backend folder, create a file named server.js and enter the following code:

backend/server.js:

// BLOCK 1: Importing Dependencies
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const dotenv = require("dotenv");

// BLOCK 2: Configuring the Express App
dotenv.config();

const app = express();

// BLOCK 3: Setting Up Middleware
app.use(cors());
app.use(express.json());

// BLOCK 4: Connecting to MongoDB
const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI);
    console.log("MongoDB Connected");
  } catch (err) {
    console.error("MongoDB Connection Failed:", err);
    process.exit(1); // Exit process with failure
  }
};

// Call the database connection function
connectDB();

// BLOCK 5: Defining Routes
const tasksRoutes = require("./routes/tasks");
app.use("/api/tasks", tasksRoutes);

// BLOCK 6: Starting the Server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing dependencies

• express**:** Creates the server.

• mongoose**:** Connects to MongoDB.

• cors**:** Enables cross-origin requests.

• dotenv**:** Loads environment variables.

BLOCK 2: Configuring the Express app

• Loads environment variables using dotenv.config().

• Initializes express() to create an app instance.

BLOCK 3: Setting up middleware

• cors(): Allows API access from different origins.

• express.json(): Parses incoming JSON requests.

BLOCK 4: Connecting to MongoDB

• Defines connectDB() to connect to MongoDB using MONGO_URI.

• Logs success or failure and exits on error.

BLOCK 5: Defining routes

• Imports tasksRoutes from ./routes/tasks.

• Uses /api/tasks as the base route for task operations.

BLOCK 6: Starting the server

• Sets PORT from .env or defaults to 5000.

• Starts the server and logs the running port.

Define Task Model

In your backend folder, create a model folder. Inside model, create a file named Task.js and add the following code:

backend/model/Task.js:

// BLOCK 1: Importing Mongoose
const mongoose = require("mongoose");

// BLOCK 2: Defining Task Schema
const TaskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    completed: { type: Boolean, default: false },
});

// BLOCK 3: Creating and Exporting the Model
module.exports = mongoose.model("Task", TaskSchema);

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing Mongoose

• mongoose: Used to define the schema and interact with MongoDB.

BLOCK 2: Defining the task schema

• title: A required string field for the task title.

• completed: A boolean field indicating task status (default: false).

BLOCK 3: Creating and exporting the model

• Creates a Mongoose model named "Task" based on TaskSchema.

• Exports the model for use in other parts of the application

Define Routes

In your backend folder, create a routes folder. Inside routes, create a file named tasks.js and add the following code:

backend/routes/tasks.js:

// BOCK 1: Import dependencies
const express = require("express");
const Task = require("../models/Task");

const router = express.Router();

// BLOCK 2: GET all tasks
router.get("/", async (req, res) => {
  try {
    const tasks = await Task.find();
    res.json(tasks);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// BLOCK 3: POST a new task
router.post("/", async (req, res) => {
  const { title } = req.body;
  console.log("Received title:", title); // Debugging log

  if (!title) {
    return res.status(400).json({ error: "Task title is required" });
  }

  try {
    const newTask = new Task({ title });
    await newTask.save();
    res.status(201).json(newTask);
  } catch (err) {
    console.error(err.message);
    res.status(500).json({ error: err.message });
  }
});

// BLOCK 4: DELETE a task
router.delete("/:id", async (req, res) => {
  try {
    const { id } = req.params;
    await Task.findByIdAndDelete(id);
    res.json({ message: "Task deleted" });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// BLOCK 5: UPDATE a task
router.put("/:id", async (req, res) => {
  try {
    const { id } = req.params;

    const updatedTask = await Task.findByIdAndUpdate(
      id,
      req.body,
      { new: true } // Return the updated task
    );
    res.json(updatedTask);
  } catch (error) {
    res.status(500).json({ error: "Error updating task" });
  }
});

// BLOCK 6: Export the router
module.exports = router;

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Import dependencies

• express: Handles routing.

• Task: Imports the Task model.

• express.Router(): Creates a router for task-related routes.

BLOCK 2: GET all tasks

• Fetches all tasks from the database.

• Sends the tasks as a JSON response.

• Handles errors with a 500 status.

BLOCK 3: POST a new task

• Extracts title from the request body.

• Logs the received title for debugging.

• Validates the title (returns 400 if missing).

• Saves the task to the database and returns it.

BLOCK 4: DELETE a task

• Extracts id from the request params.

• Deletes the task from the database.

• Returns a success message.

BLOCK 5: UPDATE a task

• Extracts id from the request params.

• Updates the task using request body data.

• Returns the updated task.

BLOCK 6: Export the router

• Exports router for use in other parts of the app.

This Express.js router handles CRUD operations for a Task model using MongoDB. It defines routes to get all tasks, add a new task, delete a task by ID, and update a task's title by ID. Error handling ensures proper responses for missing data or server issues.

Create a .env file

In your backend folder, create a .env file and add the following:

backend/.env:

MONGO_URI=your_mongodb_atlas_uri

Set Up MongoDB Atlas

MongoDB Atlas is a cloud-based MongoDB service. We'll use the free tier for this project.

To get started, go to MongoDB Atlas and create an account or log in.

Follow the steps to create a free cluster. Once the cluster is created, click Connect and follow the instructions to:

• Whitelist your IP address to allow MongoDB access using your environment variable.

• Create a database user.

• Get the connection string.

Replace the your_mongodb_atlas_uri in .env file with your MongoDB Atlas connection string.

If you are still not comfortable with how to set up MongoDB atlas, read this: MongoDB Atlas Tutorial – How to Get Started.

Run the Application

To run the application successfully using npm run dev, you need to install a dependency that will start both the frontend and backend simultaneously. You can do this using concurrently.

Install concurrently:

Open your terminal, navigate to your project root directory (mern-todo-app), and run:

npm install concurrently

Configure package.json:

After installing concurrently, ensure that you have a package.json file in your project root directory. If it doesn't exist, create one and add the following code:

mern-todo-app/package.json:

{
    "name": "mern-todo-app",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "start": "cd backend && npm start",
        "client": "cd frontend && npm run dev",
        "dev": "concurrently \"npm run start\" \"npm run client\""
    },
    "dependencies": {
        "concurrently": "^8.2.2"
    }
}

This package.json file configures the application by defining:

• Project metadata (name, version, private flag).

• Scripts (start, client, and dev) to start the backend, run the frontend, and execute both simultaneously.

• Dependencies, including concurrently, which enables running multiple scripts in parallel.

• The project is set to private to prevent accidental publishing.

Start the Application

Ensure everything is set up and saved, then run the following command from the project root:

npm run dev

If the application starts successfully, you should see messages like:

Server running on port 5000
MongoDB Connected

View the Application

Open your browser and navigate to:

• Frontend (To-Do app interface): http://localhost:5173

• Backend (Stored tasks in the database): http://localhost:5000/api/tasks

Test the functionality by adding, editing, saving, deleting tasks, and checking off completed tasks to ensure everything works properly.

Conclusion

Congratulations! You have successfully built a MERN To-Do app. You can further enhance it by adding features such as time and date tracking, and deploying it to a cloud platform.

Feel free to copy the code or clone the GitHub repository to add more functionalities and customize the styling to your preference. If you found this guide helpful, please consider sharing it and connecting with me!

For more learning resources:

• React.js Docs

• TypeScript Docs

• Vite Docs

• MongoDB Docs

• Node.js Docs

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to build an AI chat application using the MERN stack (MongoDB, Express.js, React, and Node.js). Developed by Harris from Coding Cleverly, this hands-on course will guide you through the entire development process. You'll work with cutting-edge AI tools like the ChatGPT API, Google’s BERT, and the DeepSeek R1 model. By the end, you'll have a fully functional AI chat app and a strong understanding of backend setup, API integration, and database management.

What You’ll Learn

This course provides a structured approach to building an AI chat app from scratch. Here’s what you’ll cover:

• Introduction – Get an overview of the project and the technologies used.

• npm init – Set up the Node.js project with the necessary dependencies.

• Backend Folder – Organize the backend structure for efficient development.

• MongoDB Integration – Learn how to connect and manage data with MongoDB.

• OpenAI Tokens – Set up and securely manage API keys for ChatGPT integration.

• MongoDB Issues – Troubleshoot common database connection issues.

• chat.js File – Build the core chat logic to process and respond to user messages.

• .env File – Manage environment variables to keep sensitive data secure.

• Frontend Folder – Set up the React frontend for user interaction.

• Testing Endpoints – Ensure your backend API is working correctly.

• Hugging Face Models – Integrate AI models from Hugging Face for enhanced functionality.

• Response Handling – Manage and format AI-generated responses.

• DeepSeek R1 Model – Incorporate the DeepSeek R1 model for additional AI capabilities.

• Results – Test and refine your AI chat application.

Why Take This Course?

This course is ideal for developers who want to gain practical experience in full-stack AI application development. You'll not only learn how to build a scalable chat application but also explore the latest AI technologies that power intelligent conversations. By working with the ChatGPT API, Google's BERT, and the DeepSeek R1 model, you’ll expand your knowledge of natural language processing and AI-driven web apps.

Whether you're a beginner looking to strengthen your MERN stack skills or an experienced developer eager to integrate AI into your projects, this course offers a valuable learning experience.

Watch the full course on the freeCodeCamp.org YouTube channel.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about building a comprehensive fullstack MERN stack bookstore website. In this course, you'll learn to work with the MERN stack, which includes MongoDB for the database, Express.js and Node.js for the backend, and React for the frontend. Along the way, you'll also integrate powerful tools like Tailwind CSS for responsive design, Redux and RTK Query Toolkit for state management, Mongoose for handling MongoDB queries, and JWT (JSON Web Tokens) for authentication.

The project begins with setting up a bookstore website that allows users to browse books, add them to their cart, and place orders through a cash-on-delivery system. You'll create a responsive, user-friendly frontend using React and Tailwind CSS. The course also covers important ecommerce features like inventory management, where users can add and remove books from their carts and proceed to checkout.

For admins, the course guides you through building a secure admin dashboard where books can be managed efficiently. Admins can log in using a secure username and password, upload new books, edit existing book details, and delete entries when necessary. This not only adds real-world complexity to your application but also teaches you how to handle user roles and permissions—an important skill in fullstack development.

Key Highlights of the Course:

• Frontend Development: You'll use React to build a dynamic, responsive user interface for your bookstore. From creating reusable components to building a navigation bar, product display sections, and a cart system, you'll cover all the essential aspects of a modern web application's front end.

• Backend Development: Learn to set up a Node.js server with Express.js and handle data storage with MongoDB. You'll define schemas using Mongoose, create API routes for books and orders, and integrate user authentication with JWT.

• State Management: Discover how to manage the application's state effectively using Redux and RTK Query Toolkit, ensuring a seamless user experience as data flows between the frontend and backend.

• Authentication & Security: Secure the bookstore with JWT-based authentication. Implement private routes to restrict admin functionalities and ensure only authorized users can manage the inventory.

• Admin Dashboard: Build a full-featured admin panel for adding, editing, and deleting books. You'll learn how to manage this secure section of the site and ensure it operates smoothly.

• Deployment: The course concludes with guidance on deploying your MERN stack project, so you can make your bookstore live and accessible to the world.

This project will help you build a fully functional MERN stack application from scratch. You'll start with setting up the project and installing essential dependencies like React Router DOM for navigation, Redux for state management, and RTK Query for data fetching. You'll then move into creating individual features like a responsive navbar, a book display system, a cart page, and a checkout system.

Watch the full course on the freeCodeCamp.org YouTube channel (9-hour watch).

We just released a new course on the freeCodeCamp.org YouTube channel that will guide you through building dynamic, responsive web applications using the popular MERN stack.

The MERN stack, consisting of MongoDB, Express.js, React, and Node.js, is a powerful combination of technologies that allows developers to create robust, scalable web applications. This comprehensive course, developed by Burak Orkmez, offers a hands-on approach to learning these technologies and how they work together.

Here is a brief overview of the core technologies:

1. MongoDB: Learn to work with this flexible, document-based NoSQL database.

2. Express.js: Master this minimal and flexible Node.js web application framework.

3. React: Dive into building interactive user interfaces with this popular JavaScript library.

4. Node.js: Understand how to use JavaScript on the server-side with this runtime environment.

The course is structured to provide a comprehensive learning experience:

1. App Showcase: Get inspired by seeing the final product you'll be building.

2. Server Setup: Learn how to set up your Node.js server with Express.js.

3. MongoDB Setup: Understand how to integrate MongoDB into your application.

4. SQL vs NoSQL: Gain insights into the differences between SQL and NoSQL databases.

5. Creating a Product Model: Learn about data modeling in MongoDB.

6. Building the API: Develop a robust RESTful API for your application.

7. Frontend Development: Create an interactive user interface with React.

8. Deployment: Master the process of deploying your full-stack application.

This course is perfect for aspiring web developers, those looking to expand their skill set, or anyone interested in modern web development practices. By the end of this course, you'll have the skills to build and deploy your own full-stack web applications using the MERN stack.

Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).