shekharsikku / flask-react

Flask + React Full Stack Application

Authentication in Flask using Session & JWT

🌟 Introduction

Built with the Flask in backend and React in frontend. Simple showcase how work different tech stacks.

⚙️ Tech Stack

• Flask
• Python
• React
• Node.js
• MySQL

🔋 Features

• 🌟 Tech stack: Flask + React + Node.js + MySQL
• 🎃 Authentication && Authorization with Session & JWT
• 👾 Handling API in frontend using axios
• 👌 Global state management with using React Context
• 🐞 Error handling both on the server and on the client
• 👻 One to one relation handling between user and post
• ⭐ Taking all production ready approach in Flask Full Stack
• ⏳ And much more!

⭐ Quick Start

Make sure you have the following installed on your machine:

• Git
• Python
• pip
• Node.js
• npm

🚀 Setup Instructions

Clone This Repository

git clone https://github.com/shekharsikku/flask-react

Create Virtual Environment

Make sure you are in root dir of project:

python -m venv .venv

Activate Virtual Environment

source .venv/Scripts/activate

Install Required Modules

python -m pip install -r requirements.txt

Install Node Modules

Install all node_modules packages for frontend

cd client
npm install

Environment Variables Setup

Change, .env.sample filename to .env and add all required fields.

# Server Environment Variables

DATABASE_URI=""
SECRET_KEY=""
JWT_SECRET=""
TOKEN_EXP=""
CORS_ORIGIN="*"
SERVER_MODE="development"

# Client Environment Variables

DEBUG_SERVER="http://localhost:8070"
WSGI_SERVER="http://localhost:8080"

Use sql database i'm using mysql and postgressql both

Token Exp should be minutes in number like 1, 5,..

Set all cors origin in a string format separated by space: E.g. "http://localhost:5173 http://localhost:4173"

Server mode should be - development/production

Start Development Server

Here we are using npm to run both frontend and backend together using the package.json file that are in root dir

npm run dev

It will run and start your flask backend and react frontend concurrently

Preview Your Frontend

For Debug Mode - if server mode is development

http://localhost:5173

For WSGI Server - if server mode is production

http://localhost:4173

Test Api Endpoints

You need tools like Postman, ApiDog or you can use Visual Studio Code extension Thunder Client.

Use proxy for test Api endpoints

For Debug Mode - if server mode is development

http://localhost:8070

For WSGI Server - if server mode is production

http://localhost:8080

🪄 Code by Shekhar Sharma

---

License

This project is licensed under the MIT License - see the license file for details.