FastAPI Interactive Tutorial

A comprehensive, interactive tutorial for learning FastAPI from basics to production deployment. Built with React and styled with Tailwind CSS.

Overview

This is a static, single-page application featuring 15 progressive lessons that teach FastAPI web development. Each lesson includes detailed explanations, executable code examples, and hands-on checkpoints.

Interactive tutorial interface showing lesson navigation and code examples

Features

• 15 Comprehensive Lessons covering 6 phases of FastAPI development
• Interactive Code Examples with one-click copy-to-clipboard
• Progress Tracking to monitor your learning journey
• Responsive Design works on desktop, tablet, and mobile
• Clean UI with syntax-highlighted code blocks
• Zero Backend Required - fully static site

Lessons Overview

Phase 1: Setup

• Lesson 0: Project Structure & Virtual Environment
• Lesson 1: Installing Dependencies
• Lesson 2: Configuration with Environment Variables

Phase 2: First API

• Lesson 3: Hello World - Your First Endpoint
• Lesson 4: Path and Query Parameters
• Lesson 5: Request Bodies with Pydantic

Phase 3: Database

• Lesson 6: Database Setup with SQLAlchemy
• Lesson 7: Pydantic Schemas - Why Separate?
• Lesson 8: CRUD - Create and Read
• Lesson 9: CRUD - Update and Delete

Phase 4: Security

• Lesson 10: Password Hashing
• Lesson 11: JWT Token Authentication
• Lesson 12: Protected Endpoints

Phase 5: Testing

• Lesson 13: Testing with pytest

Phase 6: Production

• Lesson 14: Production Best Practices (CORS, Docker, Nginx, etc.)

Quick Start

Prerequisites

• Node.js 18+ and npm
• Git
• Ubuntu 24.04 LTS (or any modern Linux/macOS/Windows)

Installation

# Clone the repository
git clone https://github.com/yourusername/fastapi_tutorial.git
cd fastapi_tutorial

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

Project Structure

fastapi_tutorial/
├── src/
│   ├── App.jsx          # Main tutorial component (all lessons)
│   ├── main.jsx         # React entry point
│   └── index.css        # Tailwind CSS imports
├── public/              # Static assets
├── index.html           # HTML template
├── package.json         # Dependencies
├── vite.config.js       # Vite configuration
├── tailwind.config.js   # Tailwind CSS config
├── postcss.config.js    # PostCSS config
├── README.md            # This file
├── tutorial_lesson_1.png # Screenshot of tutorial starting page
└── SETUP.md             # Detailed setup instructions

 GIT_WORKFLOW.md      # Git best practices

Technology Stack

• React 18 - UI library
• Vite - Build tool and dev server
• Tailwind CSS 3 - Utility-first CSS framework
• Lucide React - Icon library

Development

# Start dev server with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linter
npm run lint

Deployment

This is a static website that can be hosted anywhere.

Quick Deploy Options

Firebase Hosting (Easiest):

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy

AWS S3 (Cheapest):

npm run build
aws s3 sync dist/ s3://your-bucket-name --delete

Any Static Host:

npm run build
# Upload dist/ folder to any web host

Documentation

• SETUP.md - Complete setup guide for Ubuntu 24.04
• DEPLOYMENT_AWS.md - AWS deployment options
• DEPLOYMENT_GCP.md - GCP deployment options
• GIT_WORKFLOW.md - Git commands and best practices

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-lesson)
3. Commit your changes (git commit -am 'Add lesson 16: Advanced topics')
4. Push to the branch (git push origin feature/new-lesson)
5. Open a Pull Request

Customization

Adding New Lessons

Edit src/App.jsx and add a new lesson object to the lessons array:

{
  id: 15,
  phase: 'Phase 7: Advanced',
  title: 'Your New Lesson',
  description: 'Lesson description',
  concepts: ['Concept 1', 'Concept 2'],
  explanation: 'Detailed explanation...',
  codeBlocks: [
    {
      title: 'Code Example',
      code: 'Your code here',
      action: 'What to do with this code'
    }
  ],
  checkpoint: 'What was achieved',
  nextSteps: 'What comes next'
}

Changing Theme Colors

Edit tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        primary: '#your-color',
      }
    },
  },
}

Changing Port

Edit vite.config.js:

export default defineConfig({
  server: {
    port: 3000
  }
})

Troubleshooting

Port Already in Use

sudo lsof -t -i:5173 | xargs kill -9
# Or use different port: npm run dev -- --port 3000

Styles Not Loading

# Verify Tailwind directives in src/index.css
cat src/index.css
# Should contain: @tailwind base; @tailwind components; @tailwind utilities;

# Restart dev server
npm run dev

Module Not Found

rm -rf node_modules package-lock.json
npm install

See SETUP.md for more troubleshooting.

Performance

• Dev Server Start: ~1-2 seconds
• Production Build: ~10-15 seconds
• Bundle Size: ~200KB gzipped
• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)

License

MIT License - Free to use for learning and teaching.

Acknowledgments

Built with modern web technologies:

• React - JavaScript library for building user interfaces
• Vite - Next generation frontend tooling
• Tailwind CSS - Utility-first CSS framework
• Lucide Icons - Beautiful & consistent icon toolkit

Support

For issues, questions, or suggestions:

1. Check the SETUP.md troubleshooting section
2. Review existing GitHub Issues
3. Open a new issue with:
   • Your environment (OS, Node version, browser)
   • Steps to reproduce the problem
   • Expected vs actual behavior
   • Screenshots if applicable

Roadmap

Potential future enhancements:

• Progress persistence (localStorage or backend)
• Search functionality across lessons
• Dark mode toggle
• Lesson bookmarking
• Code playground for testing examples
• Quiz questions at end of each lesson
• Export lessons as PDF
• Multiple language support

Statistics

• Lines of Code: ~2,500
• Number of Lessons: 15
• Code Examples: 50+
• Bundle Size: ~200KB (gzipped)
• Dependencies: ~10 (production)

Contact

• Sachin Godse
• Email: lgtkgtv@gmail.com

---

Star this repository if you find it helpful! ⭐