IdentityVault — MERN Authentication Platform

👋 Overview

IdentityVault is a modern MERN authentication app with:

• React + Vite frontend
• Node.js + Express backend
• MongoDB Atlas database
• secure password hashing with bcrypt
• JWT-based authentication and protected routes

✅ Local setup

1. Clone the repo:

git clone https://github.com/tharun0135/WebDev-Projects.git
cd WebDev-Projects

2. Install frontend dependencies:

cd frontend
npm install

3. Install backend dependencies:

cd ../backend
npm install

4. Create backend/.env with:

PORT=5000
MONGO_URI=<your-mongodb-atlas-connection-string>
JWT_SECRET=<your-secret-key>

5. Create frontend/.env using the example file:

cd frontend
copy .env.example .env

6. Start backend:

cd backend
npm start

7. Start frontend:

cd frontend
npm run dev

8. Open the frontend in browser:

• http://localhost:5173

🌐 Deploy to GitHub + Vercel + Render + MongoDB Atlas

1. Push the project to GitHub

From the repository root:

git add .
git commit -m "Update MERN auth app with deployment docs"
git push origin main

If your local repo does not have the remote configured, add it with:

git remote add origin https://github.com/tharun0135/WebDev-Projects.git

2. Set up MongoDB Atlas

1. Create a free MongoDB Atlas cluster.
2. Create a database user and password.
3. Allow your app IP or enable access from anywhere during testing.
4. Copy the connection string and replace <password> and database name.

Example:

mongodb+srv://<user>:<password>@cluster0.69ik4ny.mongodb.net/practice_mern?retryWrites=true&w=majority

3. Deploy backend to Render

1. Create a Render account.
2. Choose Web Service and connect your GitHub repo.
3. Set build command:

npm install

4. Set start command:

npm start

5. Add environment variables in Render:

• PORT=5000
• MONGO_URI=<your MongoDB Atlas URI>
• JWT_SECRET=<your strong secret>

4. Deploy frontend to Vercel

1. Create a Vercel account.
2. Import the repository from GitHub.
3. If you configure the project with the repository root, use the root build command below.
4. Set build command:

npm run build

5. Set output directory:

dist

6. Add an environment variable in Vercel:

• VITE_API_BASE=https://<your-render-backend-url>/api/auth

If you configured the Vercel project to use the frontend/ folder as the root, you can still use npm run build there.

5. Connect frontend to deployed backend

The frontend uses VITE_API_BASE to locate the backend API. After your backend is live, set that variable in Vercel to:

https://<your-render-backend-url>/api/auth

No code change is needed in Login.jsx, Register.jsx, or Home.jsx after deployment because the app reads the API host from the environment.

🧠 Deployment tips

• Keep backend/.env private and never push it to GitHub.
• Use strong random values for JWT_SECRET.
• Use Render or Railway for the backend and Vercel for the frontend.
• For production, allow only required CORS origins and secure MongoDB Atlas IP access.

🛠 Tech stack

• React + Vite
• Express + Node.js
• MongoDB Atlas
• bcrypt password hashing
• JSON Web Tokens (JWT)
• Bootstrap for UI

Screenshot