MERN Boilerplate

Introduction 👋

This is a full-stack boilerplate using MongoDB, Express.js, React.js, Node.js, and Typescript. For the Javascript boilerplate, switch to the js branch.

The main branch contains the starter code for a basic React project (initialized with create-react-app) using MUI and an Express server connected to MongoDB.

The completed branch contains the code to a fully-functioning, dockerized, web app with user authentication.

Read the guide here! 📖

Requirements 📝

• Node.js (Recommended to install through NVM)
• 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://localhost:27017/mern-db
CLIENT_URL=http://localhost:3000

Running client and server

In two separate terminals:

cd client
npm start

cd server
npm start

Technologies ⚙

Frontend

• React.js
  • Create-react-app
• MUI
• React-Redux
  • Redux-toolkit
• Axios

Backend

• MongoDB
  • Mongoose
• Express.js

Others

• Eslint (Linter)
• Prettier (Formatter)