MERN Boilerplate

MongoDB Express.js React.js Node.js

A Full MERN Stack Boilerplate for Web Apps. Includes a local authentication system using passport. User is given a simple profile with Full Name and Profile Picture. User is also able to reset password and username case.

Quick Start

Setup

brew install mongodb
npm install

for Development

Start the database

mongod

Start the client

npm run dev

Start the server

npm start

for Production

Start the database

mongod

Start the Server

npm run prod

Other Commands

npm run build
npm test
npm run test:verbose
npm run lint
npm run lint:fix

Setup Instructions

To setup your own project, you will need to copy the contents of this project into a new repo. You will need to update the content in these files to names of your project and yourself:

• package.json: name, version, description, repository, author, bugs, homepage,
• LICENSE: (update to your preferred license)
• client/index.html: description and title
• this README.md

This is also a good time to go through the included libraries to add or remove features that you want.

After this you can commit the files into a new repository and push up to your github. You can now start updating files in your client to begin working on your own project!

Code Structure

- client
  - assets
    - images
    - icons
  - components
    - components
    - elements
    - layouts
    - pages
    - sections
    - structures
  - store
    - actions
    - reducers
  - styles
  - utils
- server
  - config
  - routes
- test
  - client
  - server
- scripts

Component Heirarchy:

Layouts > Pages > Sections > Structures > Components > Elements

This is somewhat based on atomic design with names that make more sense for the web. If you were to rename the element groups to the match atomic design it would look like this:

Environment > Pages > Templates > Organisms > Molecules > Atoms

Learn more about atomic design.

Technologies

React - View Library

Redux - State Manager

Webpack - Code Packager for React

Express - Node Application Framework

Mongoose - MongoDB Framework

Passport - Authentication Framework

React Notification System - Notification System

Bulma - CSS Framework

FontAwesome - Icons

Ramda - Functional Library

SuperAgent - HTTP Request Library

ESLint - Code Linter

Code / Lab - JS Testing Framework

Enzyme - React View Testing