Trello Clone - Fullstack Task Manager

A production-ready fullstack clone of Trello with drag-and-drop functionality, built with React, TypeScript, Flask, and PostgreSQL.

Features

• 🔐 Authentication: Secure JWT-based authentication system
• 📋 Boards: Create, edit, and delete boards with custom colors
• 📝 Lists: Organize tasks with drag-and-drop lists
• 🎯 Cards: Full CRUD operations on task cards
• 🏷️ Labels: Color-coded labels for card categorization
• 📅 Due Dates: Set and track task due dates
• ✅ Task Completion: Mark tasks as completed
• 🎨 Drag & Drop: Smooth drag-and-drop for cards and lists
• 🔒 Production Ready: Docker setup, comprehensive tests, security best practices

Tech Stack

Backend

• Flask - Python web framework
• PostgreSQL - Relational database
• SQLAlchemy - ORM for database operations
• Flask-JWT-Extended - JWT authentication
• Marshmallow - Data validation
• pytest - Testing framework
• Gunicorn - Production WSGI server

Frontend

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• @dnd-kit - Drag and drop functionality
• Zustand - State management
• Axios - HTTP client
• React Router - Routing
• Vitest - Testing framework

Quick Start

Prerequisites

• Docker and Docker Compose
• Node.js 18+ (for local development)
• Python 3.11+ (for local development)

Using Docker (Recommended)

1. Clone the repository:

git clone <repository-url>
cd Task-Manager-Kanban-App

2. Set environment variables:

# Create .env file in root directory
echo "SECRET_KEY=your-super-secret-key-here" > .env
echo "JWT_SECRET_KEY=your-jwt-secret-key-here" >> .env

3. Start all services:

docker-compose up --build

4. Access the application:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• API Health: http://localhost:5000/health

Local Development

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. Set environment variables:

cp .env.example .env
# Edit .env with your configuration

5. Start PostgreSQL (if not using Docker):

# Install and start PostgreSQL
createdb trello_clone

6. Run the application:

python run.py

7. Run tests:

pytest
# With coverage
pytest --cov=app --cov-report=html

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Set environment variables:

cp .env.example .env
# Edit .env if needed

4. Start development server:

npm run dev

5. Run tests:

npm test
# With UI
npm run test:ui
# With coverage
npm run test:coverage

6. Build for production:

npm run build

Project Structure

Task-Manager-Kanban-App/
├── backend/
│   ├── app/
│   │   ├── __init__.py         # Flask app factory
│   │   ├── models.py           # Database models
│   │   └── routes/             # API endpoints
│   │       ├── auth.py         # Authentication routes
│   │       ├── boards.py       # Board CRUD
│   │       ├── lists.py        # List CRUD
│   │       └── cards.py        # Card CRUD
│   ├── tests/                  # Backend tests
│   ├── config.py               # Configuration
│   ├── run.py                  # Entry point
│   ├── requirements.txt        # Python dependencies
│   └── Dockerfile              # Backend Docker config
├── frontend/
│   ├── src/
│   │   ├── api/                # API client
│   │   ├── components/         # React components
│   │   ├── pages/              # Page components
│   │   ├── store/              # Zustand stores
│   │   ├── types/              # TypeScript types
│   │   └── test/               # Frontend tests
│   ├── package.json            # Node dependencies
│   ├── vite.config.ts          # Vite configuration
│   ├── Dockerfile              # Frontend Docker config
│   └── nginx.conf              # Nginx configuration
├── docker-compose.yml          # Docker Compose config
└── README.md                   # This file

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• POST /api/auth/refresh - Refresh access token
• GET /api/auth/me - Get current user

Boards

• GET /api/boards - Get all boards
• GET /api/boards/:id - Get board with lists and cards
• POST /api/boards - Create board
• PUT /api/boards/:id - Update board
• DELETE /api/boards/:id - Delete board

Lists

• POST /api/lists - Create list
• PUT /api/lists/:id - Update list
• PATCH /api/lists/:id/position - Update list position
• DELETE /api/lists/:id - Delete list

Cards

• POST /api/cards - Create card
• GET /api/cards/:id - Get card
• PUT /api/cards/:id - Update card
• PATCH /api/cards/:id/position - Update card position (drag & drop)
• DELETE /api/cards/:id - Delete card
• POST /api/cards/:id/labels - Add label to card
• DELETE /api/cards/labels/:id - Delete label

Database Schema

Users

• id (Primary Key)
• username (Unique)
• email (Unique)
• password_hash
• created_at

Boards

• id (Primary Key)
• title
• description
• background_color
• user_id (Foreign Key)
• created_at, updated_at

Lists

• id (Primary Key)
• title
• position
• board_id (Foreign Key)
• created_at, updated_at

Cards

• id (Primary Key)
• title
• description
• position
• list_id (Foreign Key)
• due_date
• completed
• created_at, updated_at

Labels

• id (Primary Key)
• name
• color
• card_id (Foreign Key)
• created_at

Testing

Backend Tests

cd backend
pytest                              # Run all tests
pytest tests/test_auth.py          # Run specific test file
pytest --cov=app                   # With coverage
pytest -v                          # Verbose mode

Frontend Tests

cd frontend
npm test                           # Run all tests
npm run test:ui                    # Interactive test UI
npm run test:coverage              # With coverage report

Security Features

• ✅ Password hashing with bcrypt
• ✅ JWT token authentication
• ✅ CORS configuration
• ✅ SQL injection protection (SQLAlchemy ORM)
• ✅ Input validation (Marshmallow)
• ✅ Security headers (nginx)
• ✅ Non-root Docker user
• ✅ Environment variable configuration

Production Deployment

Environment Variables

Set these environment variables in production:

# Backend
FLASK_ENV=production
SECRET_KEY=<strong-random-secret>
JWT_SECRET_KEY=<strong-random-jwt-secret>
DATABASE_URL=postgresql://user:pass@host:port/dbname

# Frontend
VITE_API_URL=https://your-api-domain.com/api

Docker Production

# Build and start
docker-compose up -d --build

# View logs
docker-compose logs -f

# Stop services
docker-compose down

# Stop and remove volumes
docker-compose down -v

Database Migrations

To create database tables:

# Using Docker
docker-compose exec backend python -c "from app import create_app, db; app = create_app('production'); app.app_context().push(); db.create_all()"

# Locally
python -c "from app import create_app, db; app = create_app('production'); app.app_context().push(); db.create_all()"

Performance Optimization

• Gzip compression enabled
• Static asset caching
• Database indexes on foreign keys
• Connection pooling
• Lazy loading of relationships
• Optimistic UI updates
• Debounced API calls

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

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

License

MIT License - feel free to use this project for learning or commercial purposes.

Support

For issues or questions, please open an issue on GitHub.

Acknowledgments

Built with ❤️ using modern web technologies and best practices.