Frontend And Backend Setup Of Cloudnotebook

Frontend & Backend Setup of New Project: Cloudnotebook 📝☁️ Cloudnotebook is a full-stack notes-taking application built using the MERN stack — MongoDB, Express, React, and Node.js. In this tutorial, we start from a completely empty folder and set up both the React frontend and the Node/Express backend so they can talk to each other. By the end, you'll have two servers running side by side — one serving your React UI, and one powering your API — ready for building real features like signup, login, and saving notes.

Why Separate Frontend and Backend Folders?

Keeping the React frontend and the Node/Express backend in separate folders (instead of one mixed project) makes Cloudnotebook easier to deploy, scale, and maintain. The frontend can be hosted on a static host like Vercel or Netlify, while the backend can be deployed independently on a service like Render or Railway — a common pattern in real-world MERN stack projects.

Project structure we're aiming for:

cloudnotebook/
├── backend/
│   ├── models/
│   ├── routes/
│   ├── .env
│   ├── index.js
│   └── package.json
└── frontend/
    ├── public/
    ├── src/
    └── package.json

Step 1: Create the Root Project Folder

Open your terminal and create the main cloudnotebook folder with two subfolders — backend and frontend.

mkdir cloudnotebook
cd cloudnotebook
mkdir backend frontend

Step 2: Initialize the Backend (Node + Express)

Move into the backend folder and initialize a Node.js project with npm init.

cd backend
npm init -y

Now install the core backend dependencies we'll need for Cloudnotebook:

• express — the web server framework
• mongoose — to connect and talk to MongoDB
• cors — to allow the frontend to call our API
• dotenv — to manage environment variables
• nodemon (dev dependency) — to auto-restart the server on file changes

npm install express mongoose cors dotenv
npm install --save-dev nodemon

Step 3: Create the Express Server (index.js)

Inside backend, create an index.js file. This is the entry point of our API server.

const express = require("express");
const cors = require("cors");
require("dotenv").config();
 
const app = express();
const PORT = process.env.PORT || 5000;
 
app.use(cors());
app.use(express.json());
 
app.get("/", (req, res) => {
  res.send("Cloudnotebook API is running 🚀");
});
 
app.listen(PORT, () => {
  console.log(`Cloudnotebook backend running on port ${PORT}`);
});

Step 4: Add Environment Variables

Create a .env file in the backend folder to store sensitive config values like the port number and your MongoDB connection string.

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/cloudnotebook

Add a start script using nodemon inside package.json so the server restarts automatically while you develop:

"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js"
}

Step 5: Connect to MongoDB with Mongoose

Update index.js to connect to MongoDB before starting the server. This ensures Cloudnotebook doesn't accept requests until the database connection is ready.

const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
require("dotenv").config();
 
const app = express();
const PORT = process.env.PORT || 5000;
 
app.use(cors());
app.use(express.json());
 
mongoose
  .connect(process.env.MONGO_URI)
  .then(() => console.log("MongoDB connected successfully"))
  .catch((err) => console.error("MongoDB connection error:", err));
 
app.get("/", (req, res) => {
  res.send("Cloudnotebook API is running 🚀");
});
 
app.listen(PORT, () => {
  console.log(`Cloudnotebook backend running on port ${PORT}`);
});

Run the backend in development mode and confirm everything works:

npm run dev

Step 6: Set Up the React Frontend

Now let's move to the frontend folder and create our React app. You can use Create React App or Vite — this example uses Vite for a faster dev server.

cd ../frontend
npm create vite@latest . -- --template react
npm install

Install a few extra packages we'll rely on throughout the Cloudnotebook build:

npm install react-router-dom bootstrap

Step 7: Clean Up the Default Vite Boilerplate

Remove the default demo content in src/App.jsx and replace it with a simple starting point for Cloudnotebook.

import "bootstrap/dist/css/bootstrap.min.css";
 
function App() {
  return (
    <div className="container my-4">
      <h2 className="text-center">Welcome to Cloudnotebook ☁️📝</h2>
    </div>
  );
}
 
export default App;

Step 8: Connect the Frontend to the Backend

To confirm the two servers can communicate, let's call our backend's root route from React using fetch inside a useEffect hook.

import { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
 
function App() {
  const [message, setMessage] = useState("");
 
  useEffect(() => {
    fetch("http://localhost:5000/")
      .then((res) => res.text())
      .then((data) => setMessage(data))
      .catch((err) => console.error("Backend connection failed:", err));
  }, []);
 
  return (
    <div className="container my-4">
      <h2 className="text-center">Welcome to Cloudnotebook ☁️📝</h2>
      <p className="text-center text-muted">Backend says: {message}</p>
    </div>
  );
}
 
export default App;

Start the frontend dev server in a separate terminal:

npm run dev

If everything is wired up correctly, you should see "Backend says: Cloudnotebook API is running 🚀" displayed on your React page — confirming the frontend and backend are successfully connected.

Backend vs Frontend: Quick Reference

Frequently Asked Questions

Do the frontend and backend need to run on the same port?
No. During development they run on different ports (typically 5173 for React and 5000 for Express), and cors allows them to communicate safely.

Can I use Create React App instead of Vite?
Yes — the setup steps for the backend stay exactly the same. Only the frontend scaffolding command changes.

Do I need MongoDB installed locally?
You can either install MongoDB locally or use a free MongoDB Atlas cluster and paste its connection string into your .env file as MONGO_URI.

Features and Learnings:-