MERN Client

For those who wish to separate MERN Boilerplate into the client and server, this repo is for the client. This project is meant to be used alongside MERN Server.

Requirements

Operating System: MacOS or Linux
Node.js (I recommend installing with NVM)

Quick Start

Setup

npm install

for Development

Start the client

npm run start

for Production

npm run build

Other Commands

npm test
npm run lint
npm run lint:fix
npm run test:coverage
npm run test:verbose
npm run test:watch

Setup Instructions

Note: This is now a github template project. This makes copying the contents of the project into a new repo very simple.

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
  - api
  - assets
    - images
    - icons
  - components
    - atoms
    - molecules
    - organisms
    - templates
    - pages
    - environment
  - hooks
  - store
    - actions
    - reducers
    - thunks
    - tests
  - styles
  - utils
- config
- scripts

Component Heirarchy:

Environment > Pages > Templates > Organisms > Molecules > Atoms

This is based on atomic design. Learn more about atomic design.

Technologies

React - View Library

Redux - State Manager

Webpack - Module Bundler

React Notifications Component - Notification System

Bulma - CSS Framework

React Bulma Companion - Bulma Component Library

FontAwesome - Icons

Ramda - Functional Library

date-fns - Date Functions Library

SuperAgent - HTTP Request Library

ESLint - Code Linter

Jest - Testing Framework

hme772 / mern-client