Todo App

A full-stack todo application built with React (Frontend) and Python Flask (Backend) to help you track tasks you've been procrastinating on.

🚀 Features

• ✅ Create, read, update, and delete todos
• 📱 Responsive design with Tailwind CSS
• ⚡ Real-time updates with TanStack Query
• 🎨 Beautiful UI with shadcn/ui components
• 📅 Automatic timestamps (created_at, updated_at)
• 🗑️ Safe delete operations with loading states
• 📊 Status tracking (completed/in progress)
• 🌍 Localized date formatting (Turkey locale)

🛠️ Tech Stack

Frontend

• React with TypeScript
• TanStack Query (React Query) for data fetching
• TanStack Form for form management
• Tailwind CSS for styling
• shadcn/ui for UI components
• Lucide React for icons
• Sonner for toast notifications

Backend

• Python Flask web framework
• SQLite database
• SQLAlchemy ORM
• Flask-CORS for cross-origin requests

📦 Project Structure

todo-app/
├── frontend/                 # React frontend
│   ├── src/
│   │   ├── components/       # React components
│   │   ├── lib/             # Utilities and API
│   └── package.json
├── backend/                  # Python Flask backend
│   ├── app.py               # Main application
│   ├── models.py            # Database models
│   ├── database.py          # Database setup
│   └── requirements.txt
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• Python (v3.8 or higher)
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create a virtual environment:

   python -m venv venv

3. Activate the virtual environment:

   • Windows:

     venv\Scripts\activate

   • macOS/Linux:

     source venv/bin/activate

4. Install dependencies:

   pip install -r requirements.txt

5. Run the backend server:

   python app.py

   The backend will start on http://localhost:5000

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The frontend will start on http://localhost:5173 (or another available port)

📝 API Endpoints

Method	Endpoint	Description
GET	/api/todos	Get all todos
GET	/api/todos/:id	Get a specific todo
POST	/api/todos	Create a new todo
PUT	/api/todos/:id	Update a todo
DELETE	/api/todos/:id	Delete a todo

Example API Usage

Create a todo:

curl -X POST http://localhost:5000/api/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Learn Python", "description": "Study Flask framework"}'

Get all todos:

curl http://localhost:5000/api/todos

🎯 Usage

1. Adding a Todo: Use the form to add new tasks with titles and descriptions
2. Viewing Todos: See all your todos in a clean list view
3. Updating Status: Click the checkmark to mark todos as complete/incomplete
4. Viewing Details: Click on any todo to see detailed information and timestamps
5. Deleting Todos: Use the delete button to remove todos you no longer need

🎨 UI Components

The app uses these main components:

• TodoInput: Form for creating new todos
• TodoList: Displays all todos with loading and empty states
• TodoItem: Individual todo item with actions and detailed dialog
• Card: Container components for organized layout

🔧 Development

Backend Development

• The backend uses SQLite for easy development
• Database file is automatically created in the instance folder
• Automatic timestamp handling with SQLAlchemy

Frontend Development

• Built with Vite for fast development
• TypeScript for type safety
• TanStack Query for efficient data synchronization
• Responsive design with Tailwind CSS

📱 Features in Detail

Form Validation

• Title field is required
• Real-time validation feedback
• Proper error messages

State Management

• Optimistic updates for better UX
• Automatic cache invalidation
• Loading states for all operations

UI/UX

• Strikethrough effect for completed todos
• Color-coded status badges
• Smooth transitions and animations
• Mobile-responsive design

🤝 Contributing

1. Fork the project
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui for beautiful UI components
• TanStack for amazing React libraries
• Tailwind CSS for utility-first CSS
• Lucide for beautiful icons

---

Happy productivity! 🚀 Stop procrastinating and start completing those todos!