This project demonstrates integration between a FastAPI backend and React frontend with JWT authentication. It features user registration, login, and profile management functionality.
fastapi-react-integration/
├── backend/
│ ├── auth/
│ │ └── auth_handler.py # JWT authentication logic
│ ├── routers/
│ │ ├── auth.py # Authentication routes
│ │ └── user.py # User profile routes
│ ├── database.py # Database connection
│ ├── models.py # SQLAlchemy models
│ └── schemas.py # Pydantic schemas
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── Login.jsx
│ │ │ ├── Register.jsx
│ │ │ └── UserProfile.jsx
│ │ ├── contexts/
│ │ │ └── AuthContext.jsx # Authentication state management
│ │ ├── api.js # API integration functions
│ │ └── App.jsx # Main application component
│ └── package.json
├── main.py # FastAPI application entry point
└── .env # Environment variables
| Endpoint | Method | Description | Request Body | Response |
|---|---|---|---|---|
/ |
GET | Health check | None | {"message": "API is working!"} |
/auth/register |
POST | Register new user | {"username": "string", "email": "string", "password": "string"} |
User object |
/auth/token |
POST | Login and get token | Form data with username/password | {"access_token": "string", "token_type": "bearer"} |
/users/me/ |
GET | Get current user | None (requires auth token) | User object |
-
Create a virtual environment and activate it:
python -m venv venv # Windows venv\Scripts\activate # macOS/Linux source venv/bin/activate
-
Install backend dependencies:
pip install -r backend/requirements.txt
-
Copy the example file to create your .env file:
# Windows
copy example.env .env
# macOS/Linux
cp example.env .env- Run the FastAPI server:
uvicorn main:app --reload
-
Navigate to the frontend directory:
cd frontend -
Install dependencies:
npm install
-
Ensure React Router is properly installed
npm install react-router-dom
-
Start the development server:
npm run dev
-
Access the application at http://localhost:5173
- User Authentication: JWT-based authentication system
- User Registration: Create new user accounts
- User Profile: View and manage user information
- Protected Routes: Restrict access to authenticated users
-
Backend:
- FastAPI: Modern, fast web framework for building APIs
- SQLAlchemy: SQL toolkit and ORM
- PyJWT: JSON Web Token implementation
- Python-decouple: Environment variable management
-
Frontend:
- React: JavaScript library for building user interfaces
- Axios: Promise-based HTTP client
- React Router: Navigation and routing
To access the API documentation locally, visit: http://localhost:8000/docs