AMP Todolist Expo Project Assistant
Expert AI assistant for the AMP Todolist project - a cross-platform mobile application built with Expo + React Native (frontend) and FastAPI + SQLAlchemy (backend) in a unified monorepo.
Project Architecture
This is a **monorepo** containing both frontend and backend:
**Frontend**: Expo + React Native (Android/iOS/Web support)**Backend**: FastAPI + SQLAlchemy + OAuth2/JWT authenticationBoth codebases coexist in the same repository with integrated authentication and routingDirectory Structure
Core Folders
`app/`: Expo Router-based frontend + FastAPI backend (Python) - `main.py`: FastAPI entry point, CORS/auth/DB configuration
- `models.py`, `schemas.py`, `crud.py`, `security.py`, `database.py`: Backend core modules
- `home.tsx`, `signup.tsx`, `(tabs)/index.tsx`: Main screen components
`components/`: Reusable UI components (ThemedView, ThemedText, etc.)`constants/theme.ts`: Theme/font definitions with platform-specific handling`assets/images/`: App icons and images`scripts/reset-project.js`: Project initialization scriptKey Development Patterns
1. File-Based Routing
**Auto-routing**: Files like `app/(tabs)/index.tsx`, `app/(tabs)/explore.tsx` automatically create routes**Navigation**: Configured in `_layout.tsx` with Tab/Stack navigation, custom headers**Screen transitions**: Use `router.replace()` for login/signup/home navigation2. Authentication & API Integration
**Token storage**: Expo SecureStore for secure token management**Backend communication**: Axios for FastAPI backend requests**API URL**: Managed via environment variable `process.env.EXPO_PUBLIC_API_URL` (default: `http://127.0.0.1:8000`)**Backend auth**: OAuth2/JWT-based authentication with SQLAlchemy DB management3. Technology Stack
#### Frontend
TypeScript with strict modePath aliases using `@/`Expo Router for navigationReact Navigation integrationExpo SecureStore for credentials#### Backend
FastAPI with OAuth2/JWTSQLAlchemy ORMPydantic schemas for validationpasslib for password hashingpython-jose for JWT4. Theme & UI Conventions
**Consistent theming**: Always use `ThemedView` and `ThemedText` components**Platform fonts**: Defined in `constants/theme.ts` with platform-specific handling**Error handling**: Display user-friendly alerts for API errors with axios response parsing5. Environment Configuration
**Backend**: `.env` file for `DATABASE_URL`, `SECRET_KEY`**Frontend**: `process.env.EXPO_PUBLIC_API_URL` for API endpointDevelopment Workflow
Frontend Setup & Run
```bash
npm install
npx expo start
```
Supports Android, iOS, and Web platforms.
Backend Setup & Run
```bash
Ensure Python environment is activated
uvicorn app.main:app --reload
```
Configure `DATABASE_URL` and `SECRET_KEY` in `.env` file.
Project Initialization
```bash
npm run reset-project
```
Separates starter code for clean project structure.
Linting
```bash
npm run lint
```
Uses Expo ESLint configuration.
Code Implementation Guidelines
When Adding Features
1. **Authentication flows**: Always check `app/(tabs)/index.tsx` (login) and `app/signup.tsx` (signup) patterns
2. **API endpoints**: Create corresponding FastAPI routes in `app/main.py` with proper schema validation
3. **Database changes**: Update `models.py` (SQLAlchemy), `schemas.py` (Pydantic), and `crud.py` (operations)
4. **New screens**: Follow file-based routing in `app/` directory with `_layout.tsx` configuration
5. **UI components**: Use themed components from `components/` directory
When Modifying Code
**Frontend changes**: Consider impact on backend API contracts**Backend changes**: Update corresponding schemas and frontend TypeScript types**Model changes**: Update both `models.py` and `schemas.py` for consistency**Route changes**: Verify navigation logic in `_layout.tsx` and screen componentsError Handling Pattern
**API errors**: Parse axios error responses and show appropriate alerts**Validation**: Use Pydantic schemas on backend, TypeScript types on frontend**Authentication**: Handle token expiration and unauthorized access gracefullyExample Code Patterns
Login Flow
Location: `app/(tabs)/index.tsx`
POST to `/login/` endpoint with credentialsStore JWT token in SecureStoreNavigate to home screen on successSignup Flow
Location: `app/signup.tsx`
POST to `/signup/` endpoint with user dataDisplay validation errors via alertsRedirect to login on successful registrationDatabase Models
Location: `app/models.py`
Define SQLAlchemy models (e.g., User table)Include proper relationships and constraintsCritical Reminders for AI Agent
1. **Always maintain consistency** between frontend TypeScript types and backend Pydantic schemas
2. **File-based routing is automatic** - respect the `app/` folder structure
3. **Use themed components** - never use raw React Native components when themed versions exist
4. **Environment variables are split** - backend uses `.env`, frontend uses `EXPO_PUBLIC_` prefix
5. **Authentication is integrated** - coordinate token handling between frontend (SecureStore) and backend (JWT)
6. **This is a monorepo** - changes may require updates in both frontend and backend codebases
7. **When uncertain**, ask the user for clarification before making assumptions
8. **Cross-platform considerations** - test code works on Android, iOS, and Web
9. **Database schema changes** require updating models, schemas, and CRUD operations together
10. **Follow TypeScript strict mode** - no implicit any, proper type definitions required
Testing Considerations
Test authentication flows on all platformsVerify API connectivity with backendCheck theme consistency across light/dark modesValidate form inputs match backend schema requirementsTest navigation flows and route transitions