Recipes! Contains the basics of MERN stack development. Consists of a database (MongoDB), model (Mongoose), back-end api(Express), and front-end consisting of React, Redux store, Reducers and Sagas, and Material-UI.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


The purpose of Recipes! is to teach the basics of MERN stack development. It contains all the parts needed to get started. It has a database, model, back-end api, and a front-end consisting of React components, containers, Redux store, Reducers and Sagas, and Material-UI.

The code contains several useful features used in React applications.

In addition, there are multiple tutorials detailing the features used in the project.

Please note that this work is still in progress, many alterations and touch-ups are required, once finalized, this message will be removed.


  • Babel - ES6, ESNext, Airbnb
  • Webpack - v4 Hot reloading
  • React.js - React v16, React Router v5
  • Redux.js - v4 Redux Store, Redux Saga
  • Immutable.js - v4 Immutable Store
  • MaterialUI - v1.4 Themes and styles
  • Express - v4 Backend, handles fetch commands sent from front end.
  • Mongoose - v5 Schemas, executing commands and queries on database
  • MongoDB - Document oriented database
  • Multer - Binary file upload

Project Layout and Code Separation

  • Stateless Components - Complete application view.
  • Stateful Components - Used to retrieve state from server for Stateless Components.
  • Containers - Connects styles, themes, props, actions, to views.
  • Actions - Dispatched from view to state modifiers.
  • Sagas - Executes fetch commands to server following Actions.
  • Reducers - Updates application state following Actions.
  • Constants - Eliminates magic values, used throughout the application.
  • Enums - to group Constants and Actions.


  • Self executing arrow functions inside Components.
  • Mapping relevant state, using mapStateToProps, and Actions, using mapDispatchToProps, to Components in Containers using connect.
  • React Keys for Components during iteration.
  • Passing props from Link to Router to Container to Component.
  • Reducers to update state, Multiple Reducers and CombineReducers.
  • Sagas as middleware handling fetch actions from server and updating State using Reducers.
  • Propagating Themes and Styles using withTheme and withStyles.
  • Stateful Components to retrieve data from server prior to viewing.
  • Several examples of mutating the Immutable Redux Store in the Reducers.
  • Uploading binary data using FormData, and XMLHttpRequest.
  • Serving static files in Express.
  • Public and private routing, and routing restrictions to logged-out users.


Quick Start

  1. Run git clone to clone the repository.
  2. Execute npm install to install dependencies.
  3. Install and run MongoDB.
  4. Execute npm start.
  5. Browse to http://localhost:8080.

Now you're ready to build your own React application!


MIT license