FastAPI + SvelteKit Customer CRUD Application

A full-stack learning project demonstrating modern web development patterns with a Python REST API backend and a reactive TypeScript frontend.

Project Overview

This is a simple Customer Management System that lets you Create, Read, Update, and Delete customer records. Despite its simplicity, it covers essential full-stack development concepts:

• Backend: REST API design, dependency injection, database ORM
• Frontend: Reactive UI components, API integration, TypeScript for type safety
• DevOps: CORS configuration, environment management, client-server communication

Tech Stack

Backend

• FastAPI — modern Python async web framework
• SQLAlchemy — SQL toolkit and ORM for database abstraction
• SQLite — lightweight file-based database
• Pydantic — data validation and serialization
• Python-dotenv — environment variable management

Frontend

• SvelteKit — full-stack Svelte framework (v2.x)
• Svelte — reactive component framework (v5.x)
• TypeScript — strongly-typed JavaScript
• Vite — fast build tool

Concepts Covered

This project demonstrates:

Concept	Where	Why It Matters
REST API	app/main.py routes	Standard pattern for client-server communication
ORM (Object-Relational Mapping)	app/models.py, app/database.py	Abstracts SQL, maps DB rows to Python objects
Pydantic Schemas	app/schemas.py	Input validation, serialization, API documentation
Dependency Injection	get_db dependency in routes	Clean architecture, testability
CORS (Cross-Origin Resource Sharing)	app/main.py middleware	Allows frontend to safely call backend API
Database Transactions	app/crud.py	ACID properties ensure data consistency
Reactive UI	frontend/src/routes/+page.svelte	UI auto-updates when data changes
Environment Configuration	.env, frontend/.env	Secrets and config stay out of version control
TypeScript Type Safety	Frontend components	Catch errors at compile time, not runtime

Prerequisites

• Python 3.8+ — Install Python
• Node.js 18+ and npm 9+ — Install Node.js
• Git (optional, for version control)

Installation & Setup

Backend Setup

1. Create a Python virtual environment:

   python -m venv venv

2. Activate the virtual environment:

   • On Windows:

     venv\Scripts\activate

   • On macOS/Linux:

     source venv/bin/activate

3. Install Python dependencies:

   pip install fastapi uvicorn sqlalchemy python-dotenv pydantic

4. Verify installation:

   uvicorn --version

Frontend Setup

1. Navigate to frontend directory:

   cd frontend

2. Install npm dependencies:

   npm install

3. Return to project root:

   cd ..

Running the Project

Start the Backend API

# Make sure your virtual environment is activated
uvicorn app.main:app --reload

• API runs at: http://localhost:8000
• Interactive API docs (Swagger UI): http://localhost:8000/docs
• Alternative docs (ReDoc): http://localhost:8000/redoc

The --reload flag automatically restarts the server when you modify code.

Start the Frontend

cd frontend
npm run dev

• Frontend runs at: http://localhost:5173
• Open your browser to http://localhost:5173 and start creating customers

API Endpoints

All endpoints return JSON and accept/return Content-Type: application/json.

Method	Endpoint	Purpose	Request Body	Response
GET	/	Welcome message	—	{"message": "Welcome..."}
GET	/customers	List all customers	—	[{id, name, email, created_at}, ...]
POST	/customers	Create a customer	{name, email}	{id, name, email, created_at}
PUT	/customers/{id}	Update a customer	{name, email}	{id, name, email, created_at}
DELETE	/customers/{id}	Delete a customer	—	{id, name, email, created_at}

Example API Usage (with curl)

# Get all customers
curl http://localhost:8000/customers

# Create a customer
curl -X POST http://localhost:8000/customers \
  -H "Content-Type: application/json" \
  -d '{"name": "Alice", "email": "alice@example.com"}'

# Update a customer (ID 1)
curl -X PUT http://localhost:8000/customers/1 \
  -H "Content-Type: application/json" \
  -d '{"name": "Alice Smith", "email": "alice.smith@example.com"}'

# Delete a customer (ID 1)
curl -X DELETE http://localhost:8000/customers/1

Project Structure

fastapi_svelte_project/
│
├── README.md                    # This file
├── requirements.txt             # Python dependencies (reference only)
├── customers.db                 # SQLite database (created automatically)
├── .env                         # Backend environment variables (git-ignored)
├── .gitignore                   # Git ignore rules
│
├── app/                         # FastAPI backend
│   ├── main.py                  # App entry point, CORS setup, route handlers
│   ├── database.py              # SQLAlchemy engine, session, Base
│   ├── models.py                # SQLAlchemy ORM models (Customer table)
│   ├── schemas.py               # Pydantic request/response schemas
│   └── crud.py                  # Database CRUD operations
│
├── frontend/                    # SvelteKit frontend
│   ├── src/
│   │   ├── app.html             # HTML shell template
│   │   ├── routes/
│   │   │   ├── +layout.svelte   # Root layout component
│   │   │   └── +page.svelte     # Main page (customer UI)
│   │   └── lib/
│   │       ├── index.ts         # Library exports
│   │       └── assets/
│   │           └── favicon.svg   # App icon
│   ├── .env                     # Frontend environment variables
│   ├── package.json             # npm dependencies and scripts
│   ├── svelte.config.js         # SvelteKit configuration
│   ├── vite.config.ts           # Vite build configuration
│   ├── tsconfig.json            # TypeScript configuration
│   └── static/                  # Static assets
│
└── venv/                        # Python virtual environment (git-ignored)

Key Files Explained

Backend

• app/main.py — Defines all API routes and middleware (CORS, error handling)
• app/models.py — Defines the Customer table schema with SQLAlchemy ORM
• app/schemas.py — Defines Pydantic models for request/response validation
• app/crud.py — Contains reusable database operations (Create, Read, Update, Delete)
• app/database.py — Configures SQLAlchemy engine and session factory

Frontend

• frontend/src/routes/+page.svelte — Main UI component with form and customer list
• frontend/.env — Stores VITE_API_BASE_URL (backend API endpoint)

Environment Variables

.env (Backend)

DATABASE_URL=sqlite:///./customers.db
CORS_ORIGINS=http://localhost:5173,http://127.0.0.1:5173

frontend/.env (Frontend)

VITE_API_BASE_URL=http://127.0.0.1:8000

Troubleshooting

Backend won't start

• Ensure Python virtual environment is activated
• Check that port 8000 is available (not in use by another app)
• Try: uvicorn app.main:app --reload --host 0.0.0.0 --port 8001

Frontend won't start

• Run npm install again (dependencies may be corrupted)
• Ensure port 5173 is available
• Try: npm run dev -- --port 5174

API connection errors

• Check that backend is running (uvicorn command)
• Verify VITE_API_BASE_URL in frontend/.env matches backend URL
• Check browser console (F12) for detailed error messages

CORS errors

• Ensure frontend URL is listed in .env CORS_ORIGINS
• Restart backend after changing .env

Learning Resources

• FastAPI Documentation — Building REST APIs
• SQLAlchemy ORM Tutorial — Database abstraction
• SvelteKit Docs — Full-stack Svelte framework
• Pydantic Docs — Data validation
• REST API Best Practices — API design principles

Next Steps to Deepen Learning

• Add Edit and Delete buttons to the UI (currently only List and Create)
• Write tests: pytest for backend, vitest for frontend
• Add a proper database schema with migrations (use Alembic)
• Implement authentication (JWT tokens)
• Add error handling and validation messages to the UI
• Deploy to a cloud platform (Heroku, Vercel, Railway)

License

This is a learning project. Feel free to modify and use as you wish!