A minimal boilerplate / template project to get you started with a Python FastAPI backend, React frontend, MongoDB, and JWT user authentication (via FastAPIUsers).

This template project provides the following:

• React frontend with the commonly used styling framework React-Bootstrap and icons library React-Icons
• Authentication system for FastAPI using JWT tokens as offered by FastAPIUsers project
• Examples for creating protected routes and regular routes using FastAPIUsers at backend and React-Router at frontend
• Examples for creating MongoDB collection schemas (using Pydantic) and adding more attributes to "users" collection

• FastAPI (backend server)
• FastAPIUsers (authentication system)
• React (frontend library)
• React-Bootstrap (frontend styling library)
• React-Icons (frontend styling library)
• MongoDB (database server)
• Motor (async MongoDB connector for Python)

1. Install MongoDB-4.4.0

1. Install Anaconda
2. Create an anaconda virtual environment (called "ProjectENV" or whatever you like) using the requirements.txt

conda create -n ProjectENV python=3.8

3. Activate the virtual environemnt

conda activate ProjectENV

4. Navigate to the root directory (where the three directories backend, database and frontend are present)
5. Install Python packages to the virtual environment

pip install -r backend/requirements.txt 

6. Deactivate the virtual environment

conda deactivate

1. Install Node Package Manager (npm)
2. Navigate into /frontend directory (where package.json is present)
3. Install the React dependencies with npm

npm install

1. Navigate to the root directory (where the three directories backend, database and frontend are present) or start your existing MongoDB server
2. Start MongoDB server

mongod --dbpath=database

3. The MongoDB server will be hosted at its default port 27017

1. Navigate into /backend directory (where main.py is present)
2. Activate the virtual environemnt

conda activate ProjectENV

3. Start FastAPI server

uvicorn main:app --reload

4. The FastAPI server will be hosted at its default port 8000
5. To access SwaggerUI for API testing and documentation, goto http://localhost:8000/docs

1. Navigate to /frontend directory (where package.json is present)
2. Start React Web Application

npm start

3. The React web application will be hosted at its default port 3000, goto http://localhost:3000/

• Idea inspired by tiangolo's full-stack-fastapi-postgresql
• React authorization component inspired by Buuntu's fastapi-react
• FastAPI authorization system by franke567's fastapi-users