Full Stack Application Development with Next.js and FastAPI

Overview

This lecture covers the creation of a full-stack application using Next.js for the UI and FastAPI as the backend. The project is structured in three primary steps:

1. Backend Project with FastAPI
2. Authentication and Registration with Database
3. Creating the UI with Next.js

Step-by-Step Breakdown

Step 1: Setting Up FastAPI Backend

• Create Project Structure:

  • Create a folder named FastAPI.
  • Inside, create the file main.py.

• Virtual Environment:

  • Set up a virtual environment by running python -m venv venv.
  • Activate the environment.

• Dependencies:

  • Create a requirements.txt file with necessary dependencies.
  • Install dependencies via pip install -r requirements.txt.

• Application Structure:

  • Create a folder named API for business logic.
  • Move main.py into the API directory.

• Basic FastAPI Setup:

  • Import FastAPI and create an instance (app = FastAPI()).
  • Set up a health check endpoint: @app.get("/") def health_check(): return {"message": "Health check complete"}

• CORS Setup:

  • Import and set up CORS middleware for handling requests from Next.js.
  • Example config: from fastapi.middleware.cors import CORSMiddleware app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:3000"], allow_credentials=True, allow_methods=["*"])

Step 2: Database Configuration

• Database Initialization:

  • Create a database.py file for SQLAlchemy database engine setup.
  • Example configuration: from sqlalchemy import create_engine engine = create_engine("sqlite:///app.db")

• Define Models:

  • Create a models.py file and define User, Workout, and Routine classes using SQLAlchemy.
  • Set up relationships among models using SQLAlchemy ORM features.

• Add Initialization:

  • Create __init__.py in API folder for package structure.

• Define Dependencies:

  • Create a dependencies.py file for handling session and configuration (e.g., JWT secret key, algorithm).

Step 3: Authentication & User Management

• Create Router:

  • Set up a router in the routers folder to handle authentication routes.

• Functionality:

  • Implement user registration and authentication logic with JWT generation.
  • Include error handling and response models.

• Link Everything Together:

  • Include the router in main.py with app.include_router().

Step 4: Next.js Frontend Creation

• Setup Next.js Application:

  • Open a new terminal and run npx create-next-app nextjs.
  • Navigate to the project directory and install axios and bootstrap via npm install axios bootstrap.

• Create Context for Authentication:

  • Create offContext.js inside a new context folder to manage user authentication state.

• Protected Route Management:

  • Implement a ProtectedRoute component to restrict access to certain routes based on authentication status.

• Login Functionality:

  • Create a login page and integrate login functionality using axios for API requests to FastAPI.

• User Registration:

  • Add a user registration form and functionality to the login page.

• Fetching and Displaying Data:

  • Set up components to fetch and display workouts and routines from FastAPI backend.

Conclusion

• Successfully created a full stack application using Next.js and FastAPI with user authentication, database management, and application routing.
• Encourage revisiting specific sections for deeper understanding and coding practice.

Additional Notes

• Ensure to install all necessary dependencies and tools (Python, Node.js, etc.) before starting to set up the project.
• Review the official documentation for FastAPI and Next.js for advanced features.