Todo App - FastAPI + React

A modern, full-stack todo application built with FastAPI (backend) and React + TypeScript (frontend). Features JWT authentication, persistent data storage, and a beautiful, responsive UI.

✨ Features

Backend (FastAPI)

• JWT Authentication with secure password hashing
• SQLite Database for persistent data storage
• RESTful API with comprehensive CRUD operations
• Input Validation using Pydantic models
• CORS Support for frontend integration
• Modular Architecture with separate modules for auth, database, and models
• Environment Configuration with dotenv support

Frontend (React + TypeScript)

• Modern UI/UX with beautiful gradients and animations
• TypeScript for type safety and better development experience
• Component-based Architecture with reusable components
• Responsive Design that works on all devices
• Real-time Updates with optimistic UI updates
• Error Handling with user-friendly error messages
• Loading States for better user experience
• Priority Levels for todos (Low, Medium, High)
• Todo Descriptions for additional details
• Edit Mode for inline todo editing

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 16+
• npm or yarn

Backend Setup

1. Navigate to backend directory:

   cd backend
   

2. Create virtual environment:

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

3. Install dependencies:

   pip install -r requirements.txt
   

4. Run the server:

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

The API will be available at http://localhost:8000

Frontend Setup

1. Navigate to frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

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

📁 Project Structure

fastapi_react/
├── backend/
│   ├── __init__.py
│   ├── main.py              # FastAPI application entry point
│   ├── config.py            # Configuration and environment variables
│   ├── models.py            # Pydantic data models
│   ├── auth.py              # Authentication utilities
│   ├── database.py          # Database operations
│   ├── requirements.txt     # Python dependencies
│   └── todos.db             # SQLite database (created automatically)
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── AuthForm.tsx     # Authentication form component
│   │   │   ├── TodoForm.tsx     # Todo creation form
│   │   │   └── TodoList.tsx     # Todo list display
│   │   ├── api.ts               # API service layer
│   │   ├── types.ts             # TypeScript type definitions
│   │   ├── App.tsx              # Main application component
│   │   └── App.css              # Styles
│   ├── package.json
│   └── tsconfig.json
└── README.md

🔧 API Endpoints

Authentication

• POST /register - Register a new user
• POST /token - Login and get JWT token

Todos

• GET /todos - Get all todos for authenticated user
• POST /todos - Create a new todo
• GET /todos/{todo_id} - Get a specific todo
• PUT /todos/{todo_id} - Update a todo
• DELETE /todos/{todo_id} - Delete a todo

Health Check

• GET /health - API health status

🎨 UI Features

Authentication

• Clean login/register form with validation
• Smooth transitions between auth modes
• Error handling with user-friendly messages
• Loading states during authentication

Todo Management

• Add Todos: Quick add with optional description and priority
• Edit Todos: Inline editing with form validation
• Toggle Completion: Click to mark as complete/incomplete
• Delete Todos: Remove todos with confirmation
• Priority Levels: Visual priority badges (Low, Medium, High)
• Progress Tracking: Shows completion percentage

User Experience

• Responsive Design: Works on desktop, tablet, and mobile
• Smooth Animations: Hover effects and transitions
• Loading States: Spinners during API calls
• Error Handling: Clear error messages with dismiss option
• Empty States: Helpful messages when no todos exist

🔒 Security Features

• JWT Authentication with configurable expiration
• Password Hashing using bcrypt
• Input Validation on both frontend and backend
• CORS Protection with specific origins
• SQL Injection Prevention using parameterized queries
• Environment Variables for sensitive configuration

🛠️ Development

Backend Development

• Hot Reload: Server restarts automatically on code changes
• API Documentation: Available at http://localhost:8000/docs
• Type Safety: Full type hints and validation
• Modular Code: Easy to extend and maintain

Frontend Development

• TypeScript: Full type safety
• Component Architecture: Reusable, maintainable components
• API Service Layer: Centralized API communication
• Modern React: Hooks, functional components, and modern patterns

🚀 Deployment

Backend Deployment

1. Set environment variables in production
2. Use a production WSGI server like Gunicorn
3. Set up a proper database (PostgreSQL recommended for production)
4. Configure CORS for your domain

Frontend Deployment

1. Build the application: npm run build
2. Serve the build folder with a static file server
3. Configure API base URL for production

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📝 License

This project is open source and available under the MIT License.

🆘 Support

If you encounter any issues or have questions:

1. Check the API documentation at http://localhost:8000/docs
2. Review the browser console for frontend errors
3. Check the server logs for backend errors
4. Create an issue in the repository

Happy coding! 🎉