React Milkshake🥤

A React boilerplate that comes with a custom CLI for increased productivity and that is designed for scalable and high-performance web applications.

CLI

This project includes a custom CLI for generating components & features. The CLI can handle a lot of the redux boilerplate for you. First mark the scripts as executable (with the command chmod +x ./cli/*) and you’re good to go.

npm run make:component COMPONENT_NAME

• creates the component folder
• add a component file to the folder
• add a styles file to the folder (styled-components)
• include the styles file in the component

npm run make:connected_component COMPONENT_NAME

This will do the same as make:component but connects the component to the redux store.

npm run make:feature FEATURE_NAME FEATURE_TYPE FEATURE_URL

• creates the feature folder
• sets up a action with the given name and type
• sets up a reducer for the created action
• sets up a sagas file for the created action
• sets up a services file for making an API call

Examples:

• npm run make:component Button
• npm run make:connected_component Container
• npm run make:feature books getBooks GET_BOOKS
• npm run make:feature users getUsers GET_USERS www.example.com/api/users

Try it out to see how it looks or check the code_templates folder. You can customize these files to your own needs.

Firebase

Firebase is built on Google infrastructure and scales automatically, for even the largest apps. To use Firebase in your application follow these steps:

• Sign into Firebase using your Google account.
• Create a Firebase project. In the Firebase console, click Add project, then select or enter a Project name.
• Register your app with Firebase. After you have a Firebase project, you can add your web app to it. Visit Understand Firebase Projects to learn more about best practices and considerations for adding apps to a Firebase project.
• Go to constants.js and fill in your projects credentials to the firebaseConfig object.

Authenticated routes

This boilerplate comes with a AuthenticatedRoute helper so you can easily redirect users that are not logged in. Inside this component we check if an user object is present inside the auth state in the store to determine if the user should be redirected to /sign_in.

Messages

This boilerplate comes with a notification component that will show users success and error messages. You can easily use this component for all kinds or notifications you want to show to your users. It works for different type of messages like success, error, warning and info. You can find the messagesTypes inside constants.js.

This component will look at the Redux store to see if there are any messages present. If so, it will show op the Notification component with the text that is present in the store. Clicking the component will call the clearMessages action that will remove all the messages from the store.

If you want to show an error message when fetching some data from an API goes wrong, you simply add a message object (with a type and a text) to the fail action inside the saga

Styled Components

React Milkshake is a boilerplate for kick-starting your new projects. It is not a component library and does not come with a template or theme. But, it does come with a couple of styled components, like a sidebar layout or card component, that you can use to quickly develop your application. If you want to set your own theme colors and styling, just customize the theme.js file. These variables will be available in every component (thanks to the ThemeProvider inside index.js).

Dependencies

• React
• React Router
• Redux
• Redux Saga
• Redux Persists
• React Loadable
• React Helmet
• Styled Components
• Firebase
• React Hook Form

Create React App

This project was bootstrapped with Create React App.

Quick Start

In the project directory, first run yarn or npm install, then run yarn start or npm start.