React Full Stack App Boilerplate

This project aims to help beginners to get started on a full stack app with React, Redux, Express and MongoDB

Live App

Getting Started

Prerequisites

• yarn or npm
• node
• mocha

Installing

yarn
cd client && yarn

Running the app locally

First, you need to connect your own database using mLab, if you don't know how to do it, follow this tutorial

Then modify the object in ./server/config.js :

{
    'port': process.env.PORT || 3000,
    'database': process.env.MY_DATABASE_LINK,
    'jwt': {
        'secret': 'my_secret_key'
    }
}

WARNING : The database link does include your username and password, your link must be an environment variable !

SECOND WARNING : Your jwt secret key should be an environment variable too ! This is used for your authentication. For more explanations, go here.

yarn dev

Open a second terminal window and execute this command :

cd client && yarn start

Running the tests

For now, just the backend has been partially tested.

yarn test

Technologies and frameworks used

• Create React App
• Redux
• React
• React Router
• Bootstrap
• Express
• Mongoose
• Font Awesome

How to ...

... Add a flash message

import { flash } from './client/src/';

flash('This is a flash message');

By default, it displays a Bootstrap success alert. But you can give a second parameter to the function to customize the alert.

flash('Fatal Error', 'danger');
flash('You must be logged to acces that page', 'warning');

... Add a reducer

Create your reducer in ./client/src/reducers then in ./client/src/index.js import your reducer and modify this line :

const rootReducer = combineReducers({auth, messages, errors, /* ADD YOUR REDUCER HERE */});

More how tos are coming...

Authors

• Thomas Lombart