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/
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
Get a Django app up and running in dev, test, and production with best practices in 10 minutes

Django template for Docker + Heroku This is how I set up Django projects to get up and running as quick as possible. In includes a few neat things: De

Ben Firshman 30 Oct 13, 2022
Template for creating ds simple projects

ds-project-template Template for creating ds simple projects Requirements pyenv python==3.9.4 Setup For this purpose you use following commands: pytho

1 Dec 17, 2021
A Project Template With Python

File Structure . โ”œโ”€โ”€ LICENSE โ”œโ”€โ”€ Makefile # commands โ”œโ”€โ”€ README.md โ”œโ”€โ”€

Annotation AI 61 Jan 02, 2023
Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server

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

App Generator 37 Dec 24, 2022
A simple cookiecutter to create Python Telegram bots, wrapped with Django.

PTB Django cookiecutter A simple cookiecutter to create Python Telegram bots, wrapped with Django. Based on this cool projects python-telegram-bot (PT

Carlos Lugones 20 Nov 12, 2022
Template to quickly start your playwright-python project

Playwright-python template ๐Ÿช Template to quickly start your playwright-python project Getting started โ€ข Demo โ€ข Configuration Getting started Clone th

Constantin 1 Dec 13, 2021
Bleeding edge django template focused on code quality and security.

wemake-django-template Bleeding edge django2.2 template focused on code quality and security. Purpose This project is used to scaffold a django projec

wemake.services 1.6k Jan 08, 2023
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

18.7k Jan 08, 2023
A python starter package to be used as a template for creating your own python packages.

Python Starter Package This is a basic python starter package to be used as a template for creating your own python packages. Github repo: https://git

Mystic 1 Apr 04, 2022
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

4 Feb 22, 2022
Django project/application starter for lazybones :)

Django Project Starter Template My custom project starter for Django! Iโ€™ll try to support every upcoming Django releases as much as I can! Requirement

UฤŸur ร–zyฤฑlmazel 40 Jul 16, 2022
Um template para quem quiser usar o Docker + PGSQL + Django.

Um template para quem quiser usar o Docker + PGSQL + Django.

Drack 2 Mar 11, 2022
Python-boilerplate - Python Boilerplate Project Structure

python-boilerplate Python Boilerplate Project Structure Folder Structure .github

1 Jan 18, 2022
A template repo for use in the Advent of Code

AoC-Template A template repo for use in the Advent of Code The README_template.md must contain "STATS_TABLE" to be replaced by the generated table, an

0 Jan 14, 2022
Vue + Django with no compromises. Django Templates and Vue SFCs in harmony without sacrificing the full power of either.

Cookiecutter Vue Django Vue + Django with no compromise. Cookiecutter Vue Django is a framework for jumpstarting production-ready Django + Vue project

Mike Hoolehan 122 Dec 22, 2022
Boilerplate code for a Python Flask API

MrMat :: Python :: API :: Flask Boilerplate code for a Python Flask API This variant of a Python Flask API is code-first and using native Flask Featur

0 Dec 26, 2021
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
Backend Boilerplate using Django,celery,Redis

Backend Boilerplate using Django,celery,Redis

Daniel Mawioo 2 Sep 14, 2022
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