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.
- Redux Store, Immutablejs, Redux Reducers, Actions, Action Constants
- React, React Components, React Containers
- Redux Saga
- Simple Login
- Binary Data Upload, FormData, XMLHttpRequest, Multer, base64Img
- Back-end API, Mongoose, MongoDB
- Material-UI, Material Components, Material Icons, Material Colors, Styles, Themes
git clone https://github.com/majeek/react-redux-mongoose-boilerplate-basicsto clone the repository.
npm installto install dependencies.
- Install and run MongoDB.
- Browse to
Now you're ready to build your own React application!