This is a MERN (MongoDB, Express, React, Node.js) Template with pre-configured dependencies for both frontend and backend. It includes Tailwind CSS, Chakra UI, Axios, Nodemailer, and Bcrypt, making it a perfect boilerplate for quickly setting up new projects.
Root
│── 📁 Frontend (React + Vite)
│── 📁 Backend (Express + Node.js)
│── 📄 .env (Environment variables)
│── 📄 README.md (This file)
- React Router DOM – For navigation
- Tailwind CSS – Utility-first CSS framework
- Chakra UI – Component-based UI library
- Framer Motion – Animations
- Axios – HTTP requests
- React Icons – Icon library
- Express.js – Backend framework
- MongoDB (Mongoose) – NoSQL database
- JWT (jsonwebtoken) – Authentication
- Nodemailer – Email sending
- Bcrypt – Password hashing
- Cookie Parser – For handling cookies
- CORS – Cross-origin resource sharing
- Dotenv – Environment variable management
- Nodemon – Auto-restart server
git clone <repo_url>
cd <project_folder>cd backend
npm installcd frontend
npm installCreate a .env file in the root directory with the following variables:
DATABASE_URL=mongodb+srv://<your_db_user>:<your_db_password>@<cluster_url>/dbname
JWT_SECRET=your_jwt_secret
PORT=5000
[email protected]
EMAIL_PASSWORD=your_email_password
cd backend
npm run devcd frontend
npm run devThe frontend will start on http://localhost:5173
The backend will start on http://localhost:5000
✅ Pre-configured UI with Tailwind CSS & Chakra UI
✅ Ready-to-use authentication with JWT & Bcrypt
✅ Email integration using Nodemailer
✅ Clean folder structure for scalability
✅ Axios setup for easy API requests
✅ Mongoose integration for MongoDB
- Ensure MongoDB Atlas is set up and the connection string is correct in
.env. - For email functionality, use an App Password instead of your real password if using Gmail.
This project is open-source. Feel free to use it to build projects.