Todo App

A full-stack Todo application with:

• Backend: FastAPI with SQLite database
• Web Frontend: Reflex framework (Python-based)
• Mobile: React Native with Expo

Project Structure

.
├── backend/           # FastAPI backend
│   ├── main.py       # API endpoints
│   ├── models.py     # SQLAlchemy models
│   ├── schemas.py    # Pydantic schemas
│   ├── database.py   # Database configuration
│   └── requirements.txt
│
├── frontend/          # Reflex web frontend
│   ├── todo_app/     # Reflex app module
│   │   ├── api.py    # API client
│   │   ├── state.py  # State management
│   │   ├── components.py
│   │   └── todo_app.py
│   ├── rxconfig.py   # Reflex configuration
│   └── requirements.txt
│
└── mobile/            # React Native mobile app
    ├── src/
    │   ├── components/
    │   ├── screens/
    │   ├── services/
    │   ├── navigation/
    │   └── types/
    ├── App.tsx
    └── package.json

Getting Started

Backend (FastAPI)

1. Create a virtual environment:

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Install dependencies:

pip install -r requirements.txt

3. Run the server:

uvicorn main:app --reload --host 0.0.0.0 --port 8000

The API will be available at http://localhost:8000. API documentation at /docs.

Web Frontend (Reflex)

1. Create a virtual environment:

cd frontend
python -m venv venv
source venv/bin/activate

2. Install dependencies:

pip install -r requirements.txt

3. Initialize and run Reflex:

reflex init
reflex run

The web app will be available at http://localhost:3000.

Mobile App (React Native)

1. Install dependencies:

cd mobile
npm install

2. Update API URL:

   • Edit src/services/api.ts
   • Change API_BASE_URL to your backend URL:
     • Android Emulator: http://10.0.2.2:8000/api
     • iOS Simulator: http://localhost:8000/api
     • Physical device: http://<your-ip>:8000/api

3. Start the app:

npx expo start

API Endpoints

Method	Endpoint	Description
GET	/api/todos	List todos (with pagination & filters)
POST	/api/todos	Create a new todo
GET	/api/todos/{id}	Get a specific todo
PUT	/api/todos/{id}	Update a todo
DELETE	/api/todos/{id}	Delete a todo
PATCH	/api/todos/{id}/toggle	Toggle completion status
DELETE	/api/todos	Delete all completed todos
GET	/api/stats	Get todo statistics

Features

• Create, read, update, delete todos
• Mark todos as complete/incomplete
• Priority levels (low, medium, high)
• Due dates
• Search and filtering
• Pagination
• Statistics dashboard
• Dark mode support (web)
• Responsive design

Tech Stack

Backend

• FastAPI - Modern Python web framework
• SQLAlchemy - ORM for database operations
• Pydantic - Data validation
• SQLite - Lightweight database

Web Frontend

• Reflex - Python-based full-stack framework
• HTTPX - Async HTTP client

Mobile

• React Native with Expo
• TypeScript
• React Navigation
• Zustand - State management
• Axios - HTTP client