Frontend Setup And Installing Required Modules For Cloudnotebook

Frontend Setup and Installing Required Modules for CloudNoteBook ⚙️📦 CloudNoteBook is a full-stack, cloud-based note-taking app where users can create, edit, delete, and securely store their personal notes online — accessible from anywhere, on any device. Before we write a single line of app logic, we need a solid React frontend setup with all the right npm modules installed, so our project has a clean foundation to build on.

In this tutorial, we will learn:

What is CloudNoteBook?

CloudNoteBook is a MERN-based note management application (MongoDB, Express, React, Node.js) that lets users sign up, log in, and manage their personal notes with full CRUD functionality — Create, Read, Update, and Delete. Over this tutorial series, we'll build the frontend in React and connect it to a REST API backend. This first article focuses purely on getting the React frontend environment ready.

Step 1: Create the React App Using Vite

We'll use Vite instead of Create React App because it's significantly faster to start up and build, which makes development smoother for a multi-page app like CloudNoteBook. Open your terminal and run:

npm create vite@latest cloudnotebook -- --template react
cd cloudnotebook
npm install

This creates a new folder called cloudnotebook with a minimal React setup pre-configured and ready to run.

Step 2: Install the Required npm Modules

CloudNoteBook needs a few extra packages for routing, API calls, styling, icons, and toast notifications. Install them all in one go:

npm install react-router-dom axios bootstrap react-icons react-toastify

Then import Bootstrap's CSS once in your main.jsx so its classes are available throughout the app:

import "bootstrap/dist/css/bootstrap.min.css";

Step 3: Clean Up the Default Boilerplate

Vite's starter template comes with sample content we don't need. Open src/App.jsx and strip it down to a clean starting point:

import React from "react";
 
function App() {
  return (
    <div className="container my-4">
      <h2 className="text-center">Welcome to CloudNoteBook 📝</h2>
    </div>
  );
}
 
export default App;

You can also delete unused default files like App.css content, the sample logo assets, and anything else the starter template added that we won't use.

Step 4: Set Up a Scalable Folder Structure

Before writing more code, let's organize our src folder so the project stays maintainable as CloudNoteBook grows:

src/
├── components/     # Reusable UI pieces (Navbar, NoteItem, Spinner, etc.)
├── pages/          # Route-level pages (Home, Login, Signup, Notes)
├── context/        # Global state (NoteContext, AuthContext)
├── assets/         # Images, icons, static files
├── App.jsx
└── main.jsx

Step 5: Run the Development Server

Let's confirm everything is wired up correctly by starting the dev server:

npm run dev

Open the local URL shown in your terminal (usually http://localhost:5173) — you should see the "Welcome to CloudNoteBook 📝" heading rendered on the page.

What Each Installed Module Does

Features and Learnings:-