claude-vite-svelte-fastapi Svelte Themes

Claude Vite Svelte Fastapi

Download

File Upload Service

A modern, lightning-fast file upload service built with FastAPI (Python) and Vite + Svelte + DaisyUI. Features in-memory storage, beautiful UI, and production-ready Docker deployment.

Features

  • Simple API: Three endpoints - upload, list, download
  • Beautiful UI: Modern interface with DaisyUI components
  • Fast Development: Hot reload for both frontend and backend
  • Test-Driven: Comprehensive test coverage (>80%)
  • Production Ready: Docker deployment with multi-stage build
  • Well Documented: Complete architecture and design documentation

Tech Stack

Backend

  • FastAPI - Modern Python web framework
  • Uvicorn - Lightning-fast ASGI server
  • Pydantic - Data validation
  • pytest - Testing framework

Frontend

  • TypeScript - Type-safe JavaScript
  • Vite - Next-generation frontend tooling
  • Svelte - Reactive UI framework
  • Tailwind CSS - Utility-first CSS framework
  • DaisyUI - Beautiful Tailwind CSS components
  • Axios - HTTP client with TypeScript support

Deployment

  • Docker - Containerization
  • Multi-stage Build - Optimized image size

Quick Start

Prerequisites

  • Python 3.11+
  • Node.js 18+
  • Docker (optional, for deployment)

Initial Setup

# Run setup script (one-time)
./scripts/setup.sh

This will:

  • Create Python virtual environment
  • Install backend dependencies
  • Install frontend dependencies
  • Make all scripts executable

Development Mode

Start both backend and frontend with hot reload:

./scripts/dev.sh

This starts:

Both services auto-reload on file changes!

Run Tests

# Run all tests with coverage
./scripts/test.sh

# Watch mode (tests re-run on changes)
./scripts/test-watch.sh

Production Build

# Build production artifacts
./scripts/build.sh

# Run production build locally
./scripts/run-production.sh

# Or use Docker
docker build -t file-upload:latest .
docker run -p 8000:8000 file-upload:latest

Docker Compose

# Production
docker-compose up

# Development with volumes
docker-compose --profile dev up

Project Structure

.
├── backend/                 # FastAPI backend
│   ├── app/
│   │   ├── main.py         # Application entry point
│   │   ├── models.py       # Pydantic models
│   │   ├── storage.py      # In-memory storage
│   │   └── routers/
│   │       └── files.py    # File endpoints
│   ├── tests/              # Comprehensive tests
│   ├── requirements.txt    # Python dependencies
│   └── pytest.ini         # Test configuration
├── frontend/               # Svelte frontend
│   ├── src/
│   │   ├── App.svelte     # Main component
│   │   ├── lib/
│   │   │   ├── Upload.svelte
│   │   │   ├── FileList.svelte
│   │   │   └── api.js     # API client
│   │   └── main.js
│   ├── package.json
│   └── vite.config.js
├── scripts/                # Development scripts
│   ├── setup.sh           # Initial setup
│   ├── dev.sh             # Development mode
│   ├── test.sh            # Run tests
│   ├── test-watch.sh      # Watch tests
│   ├── build.sh           # Production build
│   └── clean.sh           # Clean artifacts
├── docs/                   # Documentation
│   ├── design.md          # Architecture decisions
│   └── requirements.md    # Detailed requirements
├── Dockerfile             # Production Docker image
├── docker-compose.yml     # Docker Compose config
├── CLAUDE.md              # Development standards
└── README.md              # This file

API Documentation

Upload File

POST /api/upload
Content-Type: multipart/form-data

Response: 201 Created
{
  "id": "uuid",
  "filename": "example.pdf",
  "size": 12345,
  "uploaded_at": "2025-10-10T12:00:00Z"
}

List Files

GET /api/files

Response: 200 OK
{
  "files": [...],
  "total": 5
}

Download File

GET /api/download/{file_id}

Response: 200 OK
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="example.pdf"

Interactive API documentation available at /api/docs when server is running.

Development Workflow

Lightning-Fast Dev Environment

The development environment is optimized for speed:

  1. Backend: Uvicorn with --reload watches Python files
  2. Frontend: Vite HMR updates instantly in browser
  3. Tests: pytest-watch re-runs tests on changes
  4. Proxy: Vite proxies /api to backend (no CORS issues)

All three can run simultaneously in separate terminals:

# Terminal 1: Full dev environment
./scripts/dev.sh

# Terminal 2: Watch tests
./scripts/test-watch.sh

Code Quality

# Format backend
cd backend && black . && isort .

# Format frontend
cd frontend && npm run format

# Lint frontend
cd frontend && npm run lint

Configuration

Environment Variables

Backend (.env):

ENVIRONMENT=development
MAX_FILE_SIZE=10485760     # 10MB
MAX_STORAGE_SIZE=104857600  # 100MB
LOG_LEVEL=INFO

Frontend (.env):

VITE_API_URL=http://localhost:8000/api

Deployment

Docker

Build and run:

docker build -t file-upload:latest .
docker run -p 8000:8000 file-upload:latest

Access at http://localhost:8000

Cloud Platforms

The Docker image works on any platform:

  • Google Cloud Run: One-click deploy
  • AWS ECS/Fargate: Enterprise-ready
  • Fly.io: Great for demos
  • Render: Easy deployment

Example Cloud Run:

gcloud run deploy file-upload \
  --source . \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated

Testing

Backend Tests

# Run all tests
pytest backend/tests/

# Run specific test file
pytest backend/tests/test_upload.py

# Run with coverage
pytest --cov=backend/app --cov-report=html

# Watch mode
pytest-watch

Test coverage: >80% overall, 100% for critical paths.

Test Organization

  • test_storage.py - Storage module tests
  • test_upload.py - Upload endpoint tests
  • test_list.py - List endpoint tests
  • test_download.py - Download endpoint tests

Architecture

Design Decisions

See docs/design.md for:

  • Architecture overview
  • Technology choices and rationale
  • API design
  • Data models
  • Security considerations
  • Deployment strategy

Requirements

See docs/requirements.md for:

  • Functional requirements
  • Non-functional requirements
  • User stories
  • Success criteria
  • Testing requirements

Development Standards

See CLAUDE.md for:

  • Code style guides
  • Development environment setup
  • Testing standards
  • Git workflow
  • Best practices

Limitations

Known Limitations

  • In-memory storage: Data is lost on server restart
  • No authentication: Anyone can access files
  • No persistence: Not suitable for production without modifications
  • Storage limits: 10MB per file, 100MB total

Future Enhancements

  • Add Redis or PostgreSQL for persistence
  • Implement user authentication (JWT/OAuth2)
  • Add file deletion
  • Add file preview (images, PDFs)
  • Add file search
  • Add rate limiting

Troubleshooting

Backend won't start

# Check Python version
python3 --version  # Should be 3.11+

# Recreate venv
rm -rf backend/venv
./scripts/setup.sh

Frontend won't start

# Clear and reinstall
rm -rf frontend/node_modules
cd frontend && npm install

Tests failing

# Clean and reinstall
./scripts/clean.sh
./scripts/setup.sh
./scripts/test.sh

Docker build fails

# Clear cache and rebuild
docker builder prune
docker build --no-cache -t file-upload .

Contributing

  1. Follow code standards in CLAUDE.md
  2. Write tests for new features
  3. Ensure all tests pass
  4. Update documentation

License

MIT License - See LICENSE file for details

Support

Built with FastAPI + Vite + Svelte + DaisyUI

Fast • Modern • Production-Ready

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes