Step 4: Launch the Full Application

🎯 Final Project Structure

C:\Projects\my-notes-app> tree
├───backend
│ ├───.env
│ ├───package.json
│ └───server.js
└───frontend
    ├───package.json
    ├───public
    └───src
        └───App.jsx

🖥️ Two Terminal Tabs

Tab 1: Backend | Tab 2: Frontend

--- TAB 1 (Backend) ---

user@egotech:~/my-notes-app/backend$ node server.js

Server is running on port 5000

--- TAB 2 (Frontend) ---

user@egotech:~/my-notes-app/frontend$ npm run dev

➜ Local: http://localhost:5173/

🟢

4.1 Start the Backend Server

To run a full-stack application, both parts need to be running at the same time. Open your first terminal, navigate to the backend, and start the Node.js server.

Terminal (Tab 1)

cd backend
node server.js

🔵

4.2 Start the Frontend Server

Leave the backend running! Open a second terminal tab (or split your VS Code terminal), navigate to the frontend folder, and start Vite.

Terminal (Tab 2)

cd frontend
npm run dev

🎉

4.3 View Your Completed App

With both servers running concurrently, open http://localhost:5173 in your browser. You will now see your complete, functioning application!

Congratulations! You have successfully built and connected a full-stack MERN application structure.

🌐 Final Result in Browser

🔒 http://localhost:5173/dashboard

YOUR PERSONAL NOTE STUDIO

Welcome back, sura 👋

Capture ideas, tasks and moments in one place.

SAVED NOTES

1

ACTIVE FILTER

All

MOST RECENT

Name

NEW NOTE

Capture your next idea

Title

Note

Name

PERSONAL

My name is sura

Jul 17, 2026

🎥

4.4 Video Walkthrough

Check out this complete video walkthrough showing the application in action and summarizing the steps we just took to build it.

Course Modules

Introduction 1. Setup & Folders 2. Backend 3. Frontend 4. Run App (Completed) ✓ Extra Help

⬅️ Back: 3. Frontend 🏆 Finish Course