MERN STACK project structure & development

The MERN Stack development session is held as two days hands on interactive session with the various integration features which is useful to understand the basic functions and structure from cmd to hosting using multiple platforms.

1. Create a account in the vercel , render , Mongodb compass.
2. install all the dependencies for the project . -> node.js to run the server and connect it

create a React.js page to run the frontend file :

cmd :

1. first we need to check the node version (node -v). 2.npm install -g create-vite 3.npm create vite@latest my-react-app -- --template react
   1. selecting react + js to choose the language use for the development process.

CREATING THIS TABLE STRUCTURE USING THE BASIC HTML AND CSS .

THE BELOW CODE IS USED TO FORM THE STRUCTURE...

I editing these thing in the App.jsx and App.css and that is imported in the route of the main.jsx and from there it will be exported

My React App Project Structure

my-react-app/
│
├── frontend/
│ ├── node_modules/
│ ├── public/
│ ├── src/
│ │ ├── App.jsx
│ │ ├── main.jsx
│ │ ├── calculator.js
│ │ └── index.css
│ │
│ ├── package.json
│ ├── package-lock.json
│ ├── vite.config.js
│ └── .gitignore
│
├── backend/
│ ├── server.js
│ ├── calculator.js
│ ├── package.json
│ ├── package-lock.json
│ └── .gitignore
│
└── README.md

Backend Server Code

const { createServer } = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;

const server = createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World 23AI053 SABARI SEKARAN MU');
});

server.listen(port, hostname, () => {
console.log(Server running at http://${hostname}:${port}/);
});

Frontend Run Commands

cd frontend
npm install
npm run dev

Backend Run Commands

cd backend
node server.js

.gitignore File

node_modules/
.env
dist/

Git Commands

git init
git add .
git commit -m "Initial project setup"
git branch -M main
git remote add origin
git push -u origin main

Project Features

• React + Vite Frontend
• Node.js Backend Server
• Calculator UI Design
• HTTP Server Integration
• GitHub Repository Setup
• .gitignore Configuration
• Frontend Running on Port 5173
• Backend Running on Port 3000

The project setup and version control process was completed successfully using Git and GitHub. Initially, the repository was cloned and connected to the local project folder. Necessary Git operations such as initializing the repository, configuring the remote origin, staging files, committing changes, and pushing the project to GitHub were performed correctly. During the process, issues related to nested repositories, missing modules, and unwanted files were identified and resolved effectively.

A proper .gitignore file was created to exclude unnecessary and large files such as node_modules, environment files, build folders, and editor configurations from being uploaded to the repository. Previously tracked unwanted files were removed from Git tracking using cache removal commands, ensuring a clean and optimized repository structure.

Additionally, MongoDB CRUD operations such as insert, find, update, and delete were practiced successfully using mongosh, improving understanding of database handling and query syntax. Errors caused by incorrect method names, case sensitivity, and syntax mistakes were identified and corrected step by step.

Overall, the project environment is now properly configured with Node.js, Express.js, MongoDB, Git, and GitHub integration. The repository is clean, organized, and ready for future development, collaboration, deployment, and version management.