Skip to content

MERN stack boilerplate with JWT authentication, MongoDB connection, React routing, and Tailwind CSS for fast and responsive front-end development.

Notifications You must be signed in to change notification settings

Chauhanvishal01/MERN-Boilerplate-Starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

MERN Boilerplate

A boilerplate project for quickly starting full-stack development with the MERN (MongoDB, Express.js, React, Node.js) stack. This setup includes JWT authentication, database connection, and routing with essential packages like bcrypt, cookie-parser, and axios for a seamless development experience.

Table of Contents

Technologies Used

Backend

  • Node.js with Express.js
  • MongoDB and Mongoose
  • JWT Authentication
  • bcrypt for password hashing
  • cookie-parser, cors, dotenv
  • Nodemon for auto-reloading during development

Frontend

  • React (via Vite for fast development)
  • React Router DOM for routing
  • Axios for API requests
  • React Toastify for notifications
  • Tailwind CSS for styling

Features

  • JWT Authentication: Token-based authentication for secure login and protected routes.
  • User Management: Register, login, and manage users.
  • Database Integration: Seamlessly connect to MongoDB.
  • Responsive Frontend: Using Tailwind CSS for clean and responsive UI.
  • API Routes: Pre-configured backend routes and middleware.
  • Error Handling: Centralized error handling for clean, readable code.

Installation

Prerequisites

  • Node.js installed
  • MongoDB running locally or remotely
  • Git (to clone the repository)

Backend Setup

  1. Clone the repository:

    git clone https://github.com/Chauhanvishal01/MERN-Boilerplate-Starter.git
    cd mern-boilerplate
  2. Install backend dependencies:

    cd backend
    npm install
  3. A .env file is included in the boilerplate. Open it and add your values for the following environment variables:

    PORT=5000                # The port on which the server will run
    MONGO_DB_URI=your_mongo_db_uri  # Replace with your MongoDB connection URI
    JWT_SECRET_KEY=your_jwt_secret_key  # Replace with your JWT secret key
    JWT_EXPIRE=7d           # Duration for which the JWT token will be valid
    FRONTEND_URL=http://localhost:3000  # Change this if your frontend is running on a different port or host
    
    
    
  4. Start the backend server:

    npm run dev

Frontend Setup

  1. Navigate to the frontend directory:

    cd frontend
  2. Install frontend dependencies:

    npm install
  3. Start the frontend development server:

    npm run dev

Folder Structure

mern-boilerplate/
│
├── backend/
│   ├── controllers/
│   ├── database/
│   ├── middlewares/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   ├── .env
│   └── server.js
│
├── frontend/
│   ├── src/
│   ├── public/
│   └── index.html
│
├── README.md

Contributing

Feel free to contribute by opening a pull request. Any improvements to code organization, security, or features are welcome!😊

License

This project is licensed under the MIT License.


About

MERN stack boilerplate with JWT authentication, MongoDB connection, React routing, and Tailwind CSS for fast and responsive front-end development.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published