FastAPI-React-MongoDB

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

Acknowledgement

• This idea is inspired by tiangolo's official FastAPI full stack project full-stack-fastapi-postgresql. Please head to the said repo for a Vue frontend and PostgreSQL database template project. It provides a comprehensive base project in the form of a cookiecutter template.
• The React authorization component is inspired by Buuntu's project fastapi-react. Please head to the said repo for a React frontend and PostgreSQL database template project. It provides a comprehensive base project in the form of a cookiecutter template that handles authentication, reverse proxies, docker containers, testing, server-side validation, linting, etc.
• The backend authentication is built using franke567's fastapi-users python package for FastAPI. It provides easy out-of-the-box backend auth components.

Features

• 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)

Screenshots

Landing Page

Home Page

Swagger UI API Documentation

Setup Instructions

A. MongoDB Database

1. Install MongoDB-4.4.0

B. Python/FastAPI Backend

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

C. React Frontend

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

Run Instructions

A. MongoDB Database

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

B. Python/FastAPI Backend

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

C. React Frontend

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/