Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


Login
← Back to Lessons

Start a React + Flask (Full-Stack) Project

Front end
Manual Installation (only if necessary)

This template has backend files and frontend files together, it is the perfect combination of the React.js and Flask API templates so you can create a Full Stack application applying all the concepts used in the professional world.

Front end

You can find a complete explanation on how to create new pages, components, add styles, and use context, within this previous documentation we created for the React, useReducer, and useContext template. This is because the Full-Stack template was created under the same structure and concepts as that one.

Backend

You can find a complete explanation on creating your Flask API endpoints, creating new models, database migrations, and using the Flask admin in this documentation, this is because this template was created with the same structure and concepts as the Flask API template.

Manual Installation (only if necessary)

Manual Back-End Installation

  1. Install the python packages: $ pipenv install
  2. Create a .env file based on the .env.example: $ cp .env.example .env
  3. Install your database engine and create your database. Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure to replace the values with your database information:
EngineDATABASE_URL
SQLitesqlite:////test.db
MySQLmysql://username:password@localhost:port/example
Postgrespostgres://username:password@localhost:5432/example
  1. Migrate the migrations: $ pipenv run migrate (skip if no changes have been made to the models in ./src/api/models.py)
  2. Run the migrations: $ pipenv run upgrade
  3. Run the application: $ pipenv run start.

Manual Front-End Installation

  • Make sure you are using node version 20 and that you have already installed and successfully run the backend.
  1. Install the packages: $ npm install
  2. Start the webpack development server $ npm run start.

Publish your website

This template is 100% compatible with Heroku and Render.com, just make sure to read the quick deployment guides.

  1. How to deploy on Render.com (free)
  2. How to deploy on Heroku.com (from $0.01 monthly)