MERN Boilerplate

Introduction

This is a full-stack boilerplate using MongoDB, Express.js, React.js, Node.js, and JavaScript

The main branch contains the starter code for a basic React project (initialized with vite) using MUI and TailwindCSS for styling, and an Express server connected to MongoDB.

Requirements

• Node.js (Installation)
• MongoDB (Community edition)

Recommended VsCode extensions

• Prettier
• ESLint

Setup

Install all dependencies for client/ and server/.

In two separate terminals:

cd client
npm install

cd server
npm install

Create .env files in both client/ and server/

root/
  client/
    .env
  server/
    .env

client/.env

NODE_ENV=development
REACT_APP_SERVER_URL=http://localhost:8080

server/.env

NODE_ENV=development
PORT=8080
MONGO_URI=mongodb:<link to mongo databse>
CLIENT_URL=http://localhost:5173

Running client and server

In two separate terminals:

cd client
npm run dev

cd server
npm start

Technologies

Frontend

• React.js
  • Vite
• TailwindCSS
• MUI
• Axios

Backend

• MongoDB
  • Mongoose
• Express.js

Others

• Babel (Transpiler)
• Eslint (Linter)