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/
Django Boilerplate - Material Kit Design | AppSeed

Django Boilerplate - Material Kit Design | AppSeed

App Generator 45 Dec 23, 2022
Boilerplate for starting a python project

Python Project Boilerplate Simple boilerplate for starting a python proect. Using the repo Follow following steps to install client on server Create a

Prajwal Dahal 1 Nov 19, 2021
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 06, 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
Generic template for python service

Cookie cutter template example Technology stack Flask Gevent UWSGI Poetry Docker Docker-compose Installation pip install cookiecutter cookiecutter git

Churkin Oleg 11 Oct 22, 2022
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
Template for creating PyPI project

template-for-creating-pypi-project Template for creating PyPI project Hello there! This is a template for creating a PyPI project. Fork or clone this

4 Apr 25, 2022
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
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
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
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 cookiecutter template for python scripts

cookiecutter-py-script A cookiecutter template for python scripts Prerequisites Git Usage pip install cookiecutter

Zeheng Li 1 Dec 14, 2022
Brif is a boilerplate tool based on Docker and FastAPI, designed to streamline the development and deployment of IIIF compliant platforms.

brif A boilerplate tool based on Docker, designed to streamline the development and deployment of IIIF compliant platforms. Embedded with FastAPI, Cel

Pierre 8 Sep 17, 2022
A boilerplate Django project for quickly getting started.

The Definitive Django Learning Platform. Django Project Boilerplate This repository is a boilerplate Django project for quickly getting started. Getti

Le Huynh Long 1 Nov 01, 2021
Python example making use of best practice file structure and multithreading.

Python example making use of best practice file structure and multithreading.

Bob 1 Oct 13, 2021
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
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
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
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