Task Manager App - Python Stack

A modern task management application built with Flask (Python backend) and Streamlit (Python frontend).

🎯 Features

Authentication

• User registration and login
• JWT-based authentication
• Password hashing with bcrypt
• Secure token management

Task Management

• Create, read, update, and delete tasks
• Task priority levels (Low, Medium, High)
• Task statuses (Todo, In Progress, Done)
• Due date tracking
• Task descriptions
• Filter tasks by status

UI/UX

• Clean, intuitive Streamlit interface
• Real-time task updates
• User-friendly forms
• Status filtering
• Responsive layout

🛠️ Tech Stack

Backend

• Flask 2.3.3 - Web framework
• Flask-SQLAlchemy 3.0.5 - ORM
• Flask-JWT-Extended 4.5.2 - JWT authentication
• Flask-CORS 4.0.0 - Cross-origin support
• bcrypt 4.0.1 - Password hashing
• SQLite3 - Database
• Python 3.9+

Frontend

• Streamlit 1.28.1 - Web UI framework
• Requests 2.31.0 - HTTP client
• Python 3.9+

📋 Project Structure

Task Manager App/
├── backend/                 # Flask Backend
│   ├── app.py              # Flask application entry point
│   ├── models.py           # SQLAlchemy models
│   ├── auth.py             # Authentication routes
│   ├── tasks.py            # Task CRUD routes
│   ├── config.py           # Configuration
│   ├── requirements.txt    # Python dependencies
│   └── .env.example        # Environment template
│
├── frontend/                # Streamlit Frontend
│   ├── app.py              # Streamlit application
│   ├── api_client.py       # API client wrapper
│   ├── requirements.txt    # Python dependencies
│   └── .env.example        # Environment template
│
└── Documentation files

🚀 Quick Start

Prerequisites

• Python 3.9 or higher
• pip (Python package manager)

Backend Setup

1. Navigate to backend directory

   cd backend

2. Create and activate virtual environment

   # Windows
   python -m venv venv
   venv\Scripts\activate
   
   # macOS/Linux
   python3 -m venv venv
   source venv/bin/activate

3. Install dependencies

   pip install -r requirements.txt

4. Create .env file

   cp .env.example .env

5. Start the backend

   python app.py

   The server will run on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory

   cd frontend

2. Create and activate virtual environment

   # Windows
   python -m venv venv
   venv\Scripts\activate
   
   # macOS/Linux
   python3 -m venv venv
   source venv/bin/activate

3. Install dependencies

   pip install -r requirements.txt

4. Create .env file

   cp .env.example .env

5. Start the frontend

   streamlit run app.py

   The application will open at http://localhost:8501

📖 API Documentation

Authentication Endpoints

Register User

POST /api/auth/register
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "password123"
}

Response:
{
  "success": true,
  "message": "User registered successfully",
  "token": "jwt_token_here",
  "user": {
    "id": "user_id",
    "name": "John Doe",
    "email": "john@example.com"
  }
}

Login User

POST /api/auth/login
Content-Type: application/json

{
  "email": "john@example.com",
  "password": "password123"
}

Response:
{
  "success": true,
  "message": "Login successful",
  "token": "jwt_token_here",
  "user": {
    "id": "user_id",
    "name": "John Doe",
    "email": "john@example.com"
  }
}

Get Current User

GET /api/auth/me
Authorization: Bearer jwt_token_here

Response:
{
  "success": true,
  "user": {
    "_id": "user_id",
    "name": "John Doe",
    "email": "john@example.com",
    "createdAt": "2024-01-01T00:00:00.000Z"
  }
}

Task Endpoints

Get All Tasks (with filters)

GET /api/tasks?priority=High&stage=Todo&search=meeting
Authorization: Bearer jwt_token_here

Response:
{
  "success": true,
  "count": 5,
  "tasks": [
    {
      "_id": "task_id",
      "title": "Task Title",
      "description": "Task Description",
      "priority": "High",
      "dueDate": "2024-12-31",
      "stage": "Todo",
      "userId": "user_id",
      "createdAt": "2024-01-01T00:00:00.000Z"
    }
  ]
}

Get Single Task

GET /api/tasks/:id
Authorization: Bearer jwt_token_here

Response:
{
  "success": true,
  "task": {
    "_id": "task_id",
    "title": "Task Title",
    "description": "Task Description",
    "priority": "High",
    "dueDate": "2024-12-31",
    "stage": "Todo",
    "userId": "user_id"
  }
}

Create Task

POST /api/tasks
Authorization: Bearer jwt_token_here
Content-Type: application/json

{
  "title": "New Task",
  "description": "Task description",
  "priority": "Medium",
  "dueDate": "2024-12-31",
  "stage": "Todo"
}

Response:
{
  "success": true,
  "message": "Task created successfully",
  "task": {
    "_id": "task_id",
    "title": "New Task",
    "description": "Task description",
    "priority": "Medium",
    "dueDate": "2024-12-31",
    "stage": "Todo",
    "userId": "user_id",
    "createdAt": "2024-01-01T00:00:00.000Z"
  }
}

Update Task

PUT /api/tasks/:id
Authorization: Bearer jwt_token_here
Content-Type: application/json

{
  "title": "Updated Task",
  "description": "Updated description",
  "priority": "High",
  "stage": "In Progress"
}

Response:
{
  "success": true,
  "message": "Task updated successfully",
  "task": { ... }
}

Delete Task

DELETE /api/tasks/:id
Authorization: Bearer jwt_token_here

Response:
{
  "success": true,
  "message": "Task deleted successfully"
}

🔐 Environment Variables

Backend (.env)

PORT=5000
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/task-manager
JWT_SECRET=your_jwt_secret_key_here_make_it_long_and_random
NODE_ENV=development
FRONTEND_URL=http://localhost:5173

Frontend (.env)

VITE_API_URL=http://localhost:5000

🚀 Deployment

Deploy Backend to Render

1. Create Render account at https://render.com

2. Create new Web Service and connect your GitHub repository

3. Configure build settings:

   • Build Command: npm install
   • Start Command: npm start

4. Add environment variables in Render dashboard:

   • MONGODB_URI
   • JWT_SECRET
   • NODE_ENV=production
   • FRONTEND_URL=your-vercel-frontend-url

5. Deploy - Render will automatically deploy on push to main branch

Deploy Frontend to Vercel

1. Install Vercel CLI

   npm install -g vercel

2. From client directory, deploy

   vercel

3. Configure Vercel settings:

   • Framework: Vite
   • Build Command: npm run build
   • Output Directory: dist

4. Add environment variables:

   • VITE_API_URL=https://your-render-backend-url

5. Deploy - Push to GitHub and Vercel will auto-deploy

Setup MongoDB Atlas

1. Create MongoDB Atlas account at https://www.mongodb.com/cloud/atlas
2. Create a cluster (Free tier available)
3. Create a database user with username and password
4. Get connection string and add to backend .env:

   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/task-manager
   

🔑 Key Technical Decisions

Authentication

• JWT over Session: JWT is stateless, scalable, and works well with deployed applications on different servers
• httpOnly Cookies Alternative: For even better security, consider storing JWT in httpOnly cookies instead of localStorage

State Management

• Context API: Used for global auth and task state. Sufficient for this application size
• Alternative: Redux for larger applications with more complex state

Database

• MongoDB: NoSQL database provides flexibility for task schema evolution
• Mongoose ODM: Provides schema validation and built-in hooks for password hashing

API Design

• RESTful: Standard REST conventions for intuitive API
• Query Parameters: Support for filtering and searching directly in endpoints

⚠️ Assumptions

1. User Authentication: Each task belongs to a specific user (userId required)
2. JWT Secret: Long, random secret key is used (should be 32+ characters)
3. CORS: Frontend and backend run on different origins during development
4. Date Format: ISO 8601 format for dates
5. Validation: Client-side validation complemented by server-side validation
6. Token Expiration: JWT tokens expire after 30 days

📊 Database Schema

User Collection

{
  _id: ObjectId,
  name: String (required),
  email: String (required, unique),
  password: String (hashed, required),
  createdAt: Date
}

Task Collection

{
  _id: ObjectId,
  title: String (required),
  description: String,
  priority: String (Low, Medium, High),
  dueDate: Date,
  stage: String (Todo, In Progress, Done),
  userId: ObjectId (reference to User),
  createdAt: Date,
  updatedAt: Date
}

🔄 User Flow

1. Registration: User creates account → password hashed with bcrypt → JWT token generated
2. Login: User enters credentials → password verified → JWT token returned → stored in localStorage
3. Dashboard Access: Token sent in Authorization header → middleware verifies token → user redirected to dashboard
4. Task Management:
   • User creates task → sent to API with userId → stored in database
   • User edits task → verifies ownership → updates record
   • User deletes task → verifies ownership → removes record
   • Filters applied on client-side for better UX

🐛 Error Handling

Backend

• 400: Bad Request (validation errors)
• 401: Unauthorized (invalid token)
• 403: Forbidden (not task owner)
• 404: Not Found (task/user doesn't exist)
• 500: Server Error

Frontend

• Toast notifications for errors
• User-friendly error messages
• Automatic logout on 401 responses
• Form validation before submission

🧪 Testing the Application

1. Register a new account

   • Navigate to /register
   • Fill in name, email, password
   • Click Register

2. Login

   • Use registered credentials
   • Click Login

3. Create a task

   • Click "Add New Task"
   • Fill task details
   • Click "Create Task"

4. Manage tasks

   • Edit: Click edit icon on task card
   • Delete: Click delete icon on task card
   • Move: Update stage in edit modal

5. Filter tasks

   • Use search, priority, and stage filters
   • Click "Clear Filters" to reset

📝 Future Enhancements

1. Dark Mode Toggle
2. Task Categories/Labels
3. Task Attachments
4. Team Collaboration
5. Real-time Updates (WebSocket)
6. Task Comments
7. Recurring Tasks
8. Task Time Tracking
9. Export/Import Functionality
10. Mobile App (React Native)

📞 Support

For issues or questions:

1. Check the documentation above
2. Review error messages and logs
3. Check browser console for frontend errors
4. Check server logs for backend errors

📄 License

MIT License - Feel free to use this project for personal or commercial purposes.

👨‍💻 Author

Built with ❤️ as a full-stack learning project.

---

Happy Task Managing! 🎉