More Premium Hugo Themes Premium React Themes

React Redux Flask

Boilerplate application for a Python/Flask JWT Backend and a Javascript/React/Redux Front-End with Material UI.

React Redux Flask

Boilerplate application for a Python/Flask JWT Backend and a Javascript/React/Redux Front-End with Material UI.

Author Avatar Theme by dternyak
Github Stars Github Stars: 1501
Last Commit Last Commit: Nov 21, 2017 -
First Commit Created: Dec 18, 2023 -
React Redux Flask screenshot

Overview:

The React-Redux-FlaskBoilerplate is an application that combines a Flask JWT Backend with a React/Redux Front-End. It also utilizes Material UI for the user interface. This boilerplate is designed for developers familiar with Python and React/Redux to quickly set up a project with authentication functionality.

Features:

  • Flask JWT Backend: The application uses Flask and JWT (JSON Web Tokens) for authentication on the server-side.
  • React/Redux Front-End: The front-end of the application is built using React and Redux to manage the state and handle user interactions.
  • Material UI: The user interface is designed using Material UI, providing a modern and sleek look for the application.
  • Pytest: The application includes Pytest for testing the back-end functionality.
  • Heroku Deployment: The application can be easily deployed to Heroku, allowing for seamless deployment and hosting.

Installation:

To install the React-Redux-FlaskBoilerplate, follow these steps:

  1. Ensure that you have Python 2.7+ or 3.x installed on your system.
  2. Install Pytest by running the following command in your terminal:
    pip install pytest
    
  3. Set up a Heroku account if you haven’t already.
  4. Install Flask by running the following command:
    pip install flask
    
  5. Install React and Redux by running the following commands:
    npm install react
    npm install redux
    
  6. Install React-Router 2.0 and React-Router-Redux by running the following commands:
    npm install react-router@2.0
    npm install react-router-redux
    
  7. Install Babel 6 for compiling your JavaScript code by running the following command:
    npm install babel-core@6 babel-loader@6 babel-preset-env@1 babel-preset-react@6 --save-dev
    
  8. Set up SCSS processing by installing node-sass and sass-loader:
    npm install node-sass sass-loader --save-dev
    
  9. Set up Webpack for bundling your JavaScript code by installing webpack and webpack-cli:
    npm install webpack webpack-cli --save-dev
    
  10. Create the database for your application. Refer to the Flask config guide for more information on connection strings.
  11. Update the database with new migrations by running the following command:
    python manage.py db upgrade
    
  12. Install the front-end requirements by running the following command:
    npm install
    
  13. Test the back-end by running the following command:
    python manage.py test
    
  14. Run the back-end by running the following command:
    python manage.py runserver
    
  15. Build the front-end by running the following command:
    npm run build
    
  16. Finally, open your browser and go to http://localhost:3000/register to set up your first account.

Summary:

The React-Redux-FlaskBoilerplate is a useful tool for developers looking to quickly set up a project with a Flask JWT Backend and a React/Redux Front-End. It provides all the necessary configuration and dependencies to get started, including authentication functionality and a modern user interface design. By following the installation guide, developers can easily create an account and login without any errors.