Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
4 views2 pages

Mern Template Guide

The MERN Template Guide outlines the project structure for a full-stack application using Node.js, Express, MongoDB, React, and TailwindCSS. It includes installation instructions, deployment steps, and links to relevant documentation. The template is designed for quick setup and supports environment variables, making it suitable for both personal and commercial use under the MIT License.

Uploaded by

famef96310
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

Mern Template Guide

The MERN Template Guide outlines the project structure for a full-stack application using Node.js, Express, MongoDB, React, and TailwindCSS. It includes installation instructions, deployment steps, and links to relevant documentation. The template is designed for quick setup and supports environment variables, making it suitable for both personal and commercial use under the MIT License.

Uploaded by

famef96310
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

■ MERN Template Guide

■ Project Structure
mern-template/
■
■■■ backend/ # Node.js + Express + MongoDB
■ ■■■ src/
■ ■ ■■■ config/db.js
■ ■ ■■■ server.js
■ ■■■ package.json
■ ■■■ .env.example
■
■■■ frontend/ # React + Tailwind
■ ■■■ src/
■ ■ ■■■ App.jsx
■ ■ ■■■ main.jsx
■ ■■■ package.json
■ ■■■ tailwind.config.js
■
■■■ README.md

■ Features
- ■ Backend: Express server with MongoDB connection
- ■ Frontend: React + TailwindCSS
- ■ Ready for deployment (Render + Netlify/Vercel)
- ■ Clean folder structure (controllers, routes, models)
- ■ Environment variable support
- ■ Fast setup for new projects

■■ Installation
1. Clone Repository:
git clone https://github.com/your-username/mern-template.git
cd mern-template

2. Backend Setup:
cd backend
npm install

# Create .env file


MONGO_URI=your_mongodb_atlas_url
PORT=5000

npm run dev

3. Frontend Setup:
cd ../frontend
npm install
npm run dev

Frontend → http://localhost:5173
Backend → http://localhost:5000

■ Deployment
Frontend (Netlify or Vercel):
npm run build
# Deploy 'dist/' folder

Backend (Render):
- Push backend to GitHub
- Create new Web Service
- Add environment variables (MONGO_URI, etc.)
- Get live API URL: https://yourapp.onrender.com

Connect Frontend to Backend (frontend/src/services/api.js):


import axios from "axios";
const API = axios.create({ baseURL: "https://yourapp.onrender.com/api" });
export default API;

■ Example Live Demo


Frontend: https://yourname.netlify.app
Backend: https://yourapp.onrender.com

■ Documentation
- Express: https://expressjs.com/
- MongoDB Atlas: https://www.mongodb.com/atlas
- React: https://react.dev/
- TailwindCSS: https://tailwindcss.com/
- Render Hosting: https://render.com/
- Netlify Hosting: https://www.netlify.com/

■ Contributing
Fork repo → Submit pull requests → Open issues for bugs or features.

■ License
MIT License - Free for personal & commercial use.

You might also like