Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server

Related tags

Boilerplatereactflaskauthenticationappseed
Overview

React Flask Authentication

Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server. React Flask Authentication sample can be used to bootstrap fast a new project using a tested development-ready stack or simply for eLearning purposes by beginners. For newcomers, React is a popular Javascript library for coding user interfaces baked by Facebook and Flask is a leading web framework written in Python.

Links


Quick-start in Docker

Clone/Download the source code

$ git clone  https://github.com/app-generator/react-flask-authentication.git

Start the Flask API

$ cd flask-api
$ docker-compose pull   # download dependencies 
$ docker-compose build  # local set up
$ docker-compose up     # start the app

At this point, the API should be up & running at http://localhost:5000, and we can test the interface using POSTMAN or curl.


Start the React UI (use another terminal)

$ cd react-ui
$ docker-compose pull   # download dependencies 
$ docker-compose build  # local set up
$ docker-compose up     # start the app

Once all the above commands are executed, the React UI should be visible in the browser. By default, the app redirects the guest users to authenticate. After we register a new user and signIN, all the private pages become accessible.


React Flask Authentication - Open-source full-stack seed project crafted by CodedThemes and AppSeed.


General Information

The product is built using a two-tier pattern where the React frontend is decoupled logically and physically from the API backend. In order to use the product in a local environment, a few simple steps are required:

  • Compile and start the Flask API Backend
    • be default the server starts on port 5000
  • Compile and start the React UI
    • UI will start on port 3000 and expects a running backend on port 5000
  • Configuration (Optional)
    • Change the API port
    • Configure the API port used by the React UI to communicate with the backend

Manual build

Start the Flask API

$ cd flask-api
$ 
$ # Create a virtual environment
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules
$ pip install -r requirements.txt
$
$ # Set Up the Environment
$ export FLASK_APP=run.py
$ export FLASK_ENV=development
$ 
$ # Start the API
$ flask run

Compile & start the React UI

$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start

Configuration (Optional)

Change the port exposed by the Flask API

$ flask run --port 5001

Now, the API can be accessed on port 5001


Update the API port used by the React Frontend

API Server URL - src/config/constant.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};

API

For a fast set up, use this POSTMAN file: api_sample

Register - api/users/register (POST request)

POST api/users/register
Content-Type: application/json

{
    "username":"test",
    "password":"pass", 
    "email":"[email protected]"
}

Login - api/users/login (POST request)

POST /api/users/login
Content-Type: application/json

{
    "password":"pass", 
    "email":"[email protected]"
}

Logout - api/users/logout (POST request)

POST api/users/logout
Content-Type: application/json
authorization: JWT_TOKEN (returned by Login request)

{
    "token":"JWT_TOKEN"
}

Product UI

React Flask Authentication - Login

React Flask Authentication - Login.


React Flask Authentication - Icons

React Flask Authentication - Icons.


React Flask Authentication - Colors

React Flask Authentication - Colors.


Links & Resources


React Flask Authentication - Open-source full-stack seed project provided by AppSeed App Generator

You might also like...
simple flask starter app utilizing docker

Simple flask starter app utilizing docker to showcase seasonal anime using jikanpy (myanimelist unofficial api).

Kennedy Ngugi Mwaura 5 Dec 15, 2021
Launchr is an open source SaaS starter kit, based on Django.
Launchr is an open source SaaS starter kit, based on Django.

Launchr Launchr is an open source SaaS starter kit. About Launchr is a fully-equipped starter template, ready to start a SaaS web app. It implements t

Jannis Gebauer 183 Jan 6, 2023
Starter project for python based lambda project.

Serverless Python Starter Starter project for python based lambda project. Features FastAPI - Frontend dev with Hot Reload API Gateway Integration (+r

null 4 Feb 22, 2022
A low dependency and really simple to start project template for Python Projects.
A low dependency and really simple to start project template for Python Projects.

Python Project Template A low dependency and really simple to start project template for Python Projects. HOW TO USE THIS TEMPLATE DO NOT FORK this is

Yurii Dubinka 5 Jan 21, 2022
Basic Docker Compose template application with Flask, Celery, Redis, MySQL, SocketIO, Nginx and Gunicorn.

Nginx / Gunicorn / Flask 🐍 / Celery / SocketIO / MySQL / Redis / Docker 🐳 sample application Basic Docker Compose template application for orchestat

Alex Oarga 8 Aug 6, 2022
A Boilerplate repo for Scientific Python Open Science projects

A Boilerplate repo for Scientific Python Open Science projects Installation Clone this repo If you need a fresh python environment, run $ conda env cr

Vincent Choqueuse 2 Dec 23, 2021
Template repository to build PyTorch projects from source on any version of PyTorch/CUDA/cuDNN.

Template repository to build PyTorch projects from source on any version of PyTorch/CUDA/cuDNN.

Joonhyung Lee/이준형 651 Dec 12, 2022
A command-line utility that creates projects from cookiecutters (project templates), e.g. Python package projects, VueJS projects.
A command-line utility that creates projects from cookiecutters (project templates), e.g. Python package projects, VueJS projects.

Cookiecutter A command-line utility that creates projects from cookiecutters (project templates), e.g. creating a Python package project from a Python

null 18.7k Jan 8, 2023
A Django project skeleton that is modern and cutting edge.

{% comment "This comment section will be deleted in the generated project" %} Edge A Fantastic Django project starter. Features Ready Bootstrap-themed

Arun Ravindran 827 Dec 15, 2022
Releases(v1.0.1)

  • v1.0.1(Nov 12, 2021)

  • v1.0.0(Nov 12, 2021)

    First Release

    • Flask API
      • Docker Support
      • Persistance: SQLite3
      • Stack: Flask / Flask-JWT-Extended / SQLAlchemy
      • API:
        • Sign UP: /api/users/register
        • Sign IN: /api/users/login
        • Logout: /api/users/logout
        • Edit User: /api/users/edit
    • React UI
      • Docker Support
      • Added JWT Authentication
      • UI: Berry v1.3.0 (free version)
    Source code(tar.gz)
    Source code(zip)
Owner
App Generator
App Generator and Boilerplate Code.
App Generator
GitHub Repository https://blog.appseed.us/react-flask-authentication/
Python-boilerplate - Python Boilerplate Project Structure

python-boilerplate Python Boilerplate Project Structure Folder Structure .github

1 Jan 18, 2022
CRUD app to create and save code snippets, Flask/Python restful Api/backend and React/Typescript frontend

MS3 Cheat-Hub A cheatsheet hub. An app that organizes your code snippets into collections of cheat sheets and allows you to view, like and save others

Joem Elias Sanez 21 Dec 28, 2022
Template repository to build PyTorch projects from source on any version of PyTorch/CUDA/cuDNN.

Template repository to build PyTorch projects from source on any version of PyTorch/CUDA/cuDNN.

Joonhyung Lee/이준형 651 Dec 12, 2022
Mad-cookiecutter - Cookiecutter templates for MaD projects

MaD Cookiecutter Templates A set of templates that can be used to quickly get st

Machine Learning and Data Analytics Lab FAU 1 Jan 10, 2022
Launchr is an open source SaaS starter kit, based on Django.

Launchr Launchr is an open source SaaS starter kit. About Launchr is a fully-equipped starter template, ready to start a SaaS web app. It implements t

Jannis Gebauer 183 Jan 06, 2023
Code Kata Python Template

Code Kata Python Template This is the code kata template for python created by Aula de Software Libre de la Universidad de Córdoba Step 1. Use this re

Sergio Gómez 2 Nov 30, 2021
A test Django application with production-level docker setup

DockerApp A test Django application with production-level docker setup. Blog: https://medium.com/@siddharth.sahu/the-near-perfect-dockerfile-for-djang

Siddharth Sahu 44 Nov 18, 2022
This is a boilerplate for a basic backend app using Python, Django and SQLite, as developed after tutorials with Programming with Mosh

This is a boilerplate for a basic backend app using Python, Django and SQLite, as developed after tutorials with Programming with Mosh

Gustavo Catala Sverdrup 1 Jan 07, 2022
Forkable, Minimal Template for Starknet Projects.

Forkable, Minimal Template for Starknet Projects.

andreas 44 Oct 09, 2022
Setup a flask project using a single command, right from creating virtual environment to creating Procfile for deployment.

AutoFlask-Setup About AutoFlask-Setup can help you set up a new Flask Project, right from creating virtual environment to creating Procfile for deploy

Ashutosh Krishna 1 Oct 21, 2021
Creating Templates and components so those can be reusable some time and makes workflow a lot easier!

TEMPLATES AND COMPONENTS IN ANY LANG! This is an Open Repository For Students to Contribute code in Hackoctoberfest in different Languages and Tech me

SriSravyaN 9 Feb 19, 2022
A platform for developers 👩‍💻 who wants to share their programs and projects.

Hacktoberfest-2021 A platform for developers 👩‍💻 who wants to share their projects and programs. Hacktoberfest has updated their rules and now this

Mayank Choudhary 40 Nov 07, 2022
A boilerplate for Django web applications

Django Hackathon Starter A boilerplate application for Django web applications. If you've attented hackathons, you already know how much time can be w

David Leonard 1.6k Dec 31, 2022
This is a FastAPI, React, MongoDB stack Boilerplate. It's as glorious as a highland coo.

Coo - F.A.R.M stack BoilerPlate F.A.R.M - FastAPI, React, MongoDB This boilerplate utilizes FastAPI to build a REST API, MongoDB for data storage, and

Peter Waters 2 Feb 06, 2022
Cookiecutter-allpurpose-minimal-python - A simple cookiecutter template for general-purpose python projects.

cookiecutter-allpurpose-minimal-python A simple cookiecutter template for general-purpose python projects. To use, run pip install cookiecutter cookie

E. Tolga Ayan 2 Jan 24, 2022
A Django starter template with a sound foundation.

SOS Django Template SOS Django Tempalate is a Django starter template that has opinionated and good solutions while starting your new Django project.

Eray Erdin 19 Oct 30, 2022
A framework for launching new Django Rest Framework projects quickly.

DRFx A framework for launching new Django Rest Framework projects quickly. Comes with a custom user model, login/logout/signup, social authentication

William Vincent 400 Dec 29, 2022
Django sample app with users including social auth via Django-AllAuth

demo-allauth-bootstrap Simple, out-of-the-box Django all-auth demo app A "brochure" or visitor (no login required) area A members-only (login required

Andrew E 215 Dec 20, 2022
Project template layout for Django 3.0+

Django 3.0+ project template This is a simple Django 3.0+ project template with my preferred setup. Most Django project templates make way too many as

José Padilla 649 Dec 30, 2022
A template for some new Python tool or package with a reasonable basic setup.

python-app-template A template with a reasonable basic setup, including: black (formatting) flake8 (linting) mypy (type checking) isort (import sortin

Anton Pirogov 3 Jul 19, 2022