/fastapi-react-mongodb

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

Primary LanguageJavaScript

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


Screenshots

Landing Page

Landing Page

Home Page

Home Page

Swagger UI API Documentation

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
  1. Activate the virtual environemnt
conda activate ProjectENV
  1. Navigate to the root directory (where the three directories backend, database and frontend are present)
  2. Install Python packages to the virtual environment
pip install -r backend/requirements.txt 
  1. 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
  1. 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
  1. Start FastAPI server
uvicorn main:app --reload
  1. The FastAPI server will be hosted at its default port 8000
  2. 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
  1. The React web application will be hosted at its default port 3000, goto http://localhost:3000/