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
- 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.
- 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)
- Install MongoDB-4.4.0
- Install Anaconda
- Create an anaconda virtual environment (called "ProjectENV" or whatever you like) using the requirements.txt
conda create -n ProjectENV python=3.8- Activate the virtual environemnt
conda activate ProjectENV- Navigate to the root directory (where the three directories backend, database and frontend are present)
- Install Python packages to the virtual environment
pip install -r backend/requirements.txt - Deactivate the virtual environment
conda deactivate- Install Node Package Manager (npm)
- Navigate into /frontend directory (where package.json is present)
- Install the React dependencies with npm
npm install- Navigate to the root directory (where the three directories backend, database and frontend are present) or start your existing MongoDB server
- Start MongoDB server
mongod --dbpath=database- The MongoDB server will be hosted at its default port 27017
- Navigate into /backend directory (where main.py is present)
- Activate the virtual environemnt
conda activate ProjectENV- Start FastAPI server
uvicorn main:app --reload- The FastAPI server will be hosted at its default port 8000
- To access SwaggerUI for API testing and documentation, goto http://localhost:8000/docs
- Navigate to /frontend directory (where package.json is present)
- Start React Web Application
npm start- The React web application will be hosted at its default port 3000, goto http://localhost:3000/