Tam Taskify - Personal Task Management System

A modern, full-stack task management application built with FastAPI backend and SvelteKit frontend, featuring user authentication, CRUD operations, and a beautiful responsive UI.

Local Development

• Frontend: http://localhost:3000
• Backend API: http://localhost:8001
• API Documentation: http://localhost:8001/docs

Table of Contents

• Features
• Demo
• System Architecture
• Technology Stack
• Database Design
• API Design
• Authentication Flow
• Quick Start
• Manual Setup
• Project Structure
• CI/CD and Deployment
• Conventional Commits
• Assumptions
• Future Enhancements

Features

Core Functionality

• User Authentication - JWT-based secure login/register
• Task Management - Create, read, update, delete tasks
• Task Filtering - Filter by status, priority, and search
• Real-time Updates - Optimistic UI updates
• Responsive Design - Mobile-first approach

Advanced Features

• Modern UI/UX - Glass morphism design with gradients
• Secure Authentication - JWT tokens with refresh mechanism
• Mobile Responsive - Optimized for all screen sizes
• Professional Modals - Create, edit, and delete confirmations
• User Management - Professional user menu with avatar
• Cache Management - Prevents stale data issues

Demo

Here's a visual walkthrough of the TamTaskify application:

🎬 Video Demo

Complete video walkthrough of TamTaskify - showing authentication, task management, and all key features

Login & Registration

Clean and modern login interface with gradient background

User registration with form validation

Dashboard & Task Management

Main dashboard with task overview and statistics

Task listing with filtering and search capabilities

Create new tasks with priority and status settings

Detailed task view with editing capabilities

User Interface Features

Advanced filtering options for task management

User profile and account management

Responsive design optimized for mobile devices

Full application interface showing all features

System Architecture

graph TB
    subgraph "Frontend Layer"
        UI[SvelteKit UI]
        Store[Svelte Stores]
        API_Client[API Client]
    end
    
    subgraph "Backend Layer"
        FastAPI[FastAPI Server]
        Auth[JWT Authentication]
        Routes[API Routes]
    end
    
    subgraph "Data Layer"
        PostgreSQL[(PostgreSQL Database)]
        Models[SQLAlchemy Models]
    end
    
    subgraph "Infrastructure"
        Docker[Docker Containers]
    end
    
    UI --> Store
    Store --> API_Client
    API_Client --> FastAPI
    FastAPI --> Auth
    FastAPI --> Routes
    Routes --> Models
    Models --> PostgreSQL
    
    Docker --> FastAPI
    Docker --> UI

Loading

Technology Stack

Frontend

• SvelteKit - Modern web framework
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Vite - Fast build tool

Backend

• FastAPI - High-performance Python web framework
• SQLAlchemy - Python SQL toolkit and ORM
• PostgreSQL - Robust relational database
• JWT - JSON Web Tokens for authentication
• Pydantic - Data validation using Python type annotations
• Poetry - Modern Python dependency management

DevOps

• Docker - Containerization
• Docker Compose - Multi-container orchestration

Database Design

erDiagram
    USERS ||--o{ TASKS : creates
    
    USERS {
        uuid id PK
        string email UK
        string full_name
        string hashed_password
        datetime created_at
        datetime updated_at
        boolean is_active
    }
    
    TASKS {
        uuid id PK
        uuid user_id FK
        string title
        text description
        enum status
        enum priority
        datetime created_at
        datetime updated_at
    }

Loading

Database Schema Details

Users Table

• Primary Key: UUID for security and scalability
• Email: Unique identifier for login
• Password: Bcrypt hashed for security
• Soft Delete: is_active field for user management

Tasks Table

• Foreign Key: Links to user via user_id
• Status Enum: pending, in_progress, completed
• Priority Enum: low, medium, high
• Timestamps: Automatic created/updated tracking

API Design

sequenceDiagram
    participant Client
    participant API
    participant Auth
    participant DB
    
    Note over Client,DB: Authentication Flow
    Client->>+API: POST /auth/register
    API->>+DB: Create User
    DB-->>-API: User Created
    API-->>-Client: Success Response
    
    Client->>+API: POST /auth/login
    API->>+Auth: Validate Credentials
    Auth->>+DB: Query User
    DB-->>-Auth: User Data
    Auth-->>-API: JWT Token
    API-->>-Client: Token + User Data
    
    Note over Client,DB: Task Operations
    Client->>+API: GET /tasks (with JWT)
    API->>+Auth: Validate Token
    Auth-->>-API: User ID
    API->>+DB: Query User Tasks
    DB-->>-API: Tasks Data
    API-->>-Client: Tasks List
    
    Client->>+API: POST /tasks (with JWT)
    API->>+Auth: Validate Token
    Auth-->>-API: User ID
    API->>+DB: Create Task
    DB-->>-API: Task Created
    API-->>-Client: New Task Data

Loading

API Endpoints

Authentication

• POST /api/v1/auth/register - User registration
• POST /api/v1/auth/login - User login
• GET /api/v1/auth/me - Get current user

Tasks

• GET /api/v1/tasks - List user tasks (with filters)
• POST /api/v1/tasks - Create new task
• GET /api/v1/tasks/{id} - Get specific task
• PUT /api/v1/tasks/{id} - Update task
• DELETE /api/v1/tasks/{id} - Delete task

Authentication Flow

flowchart TD
    A[User Access App] --> B{Is Authenticated?}
    B -->|No| C[Redirect to Login]
    B -->|Yes| D[Show Dashboard]
    
    C --> E[Login Form]
    E --> F[Submit Credentials]
    F --> G{Valid Credentials?}
    G -->|No| H[Show Error]
    G -->|Yes| I[Generate JWT]
    
    I --> J[Store Token in LocalStorage]
    J --> K[Update Auth Store]
    K --> D
    
    D --> L[API Request]
    L --> M[Include JWT in Headers]
    M --> N{Token Valid?}
    N -->|No| O[Logout User]
    N -->|Yes| P[Process Request]
    
    O --> C
    H --> E

Loading

Quick Start

Prerequisites

• Docker and Docker Compose
• Git for cloning the repository

Using Scripts (Recommended)

# Clone the repository
git clone https://github.com/anqorithm/tam-taskify.git
cd tam-taskify

# Make scripts executable
chmod +x scripts/*.sh

# For Development
./scripts/docker-dev.sh

# For Production
./scripts/docker-prod.sh

That's it! The scripts will handle everything:

• Check Docker is running
• Stop existing containers
• Build and start all services
• Display access URLs

Access URLs

• Frontend: http://localhost:3000
• Backend API: http://localhost:8001
• API Documentation: http://localhost:8001/docs

Manual Setup

Prerequisites

• Node.js 18+ and npm
• Python 3.11+
• Docker and Docker Compose (optional)

Backend Setup

# Setup backend
cd backend

# Install dependencies with Poetry
poetry install

# Activate Poetry shell
poetry shell

# Setup environment variables
cp .env.example .env
# Edit .env with your configuration

# Run database migrations
poetry run alembic upgrade head

# Start the backend server
poetry run uvicorn main:app --reload --host 0.0.0.0 --port 8001

Frontend Setup

# Setup frontend
cd frontend
npm install

# Setup environment variables
cp .env.example .env.local
# Edit .env.local with your API URL

# Start the development server
npm run dev

Environment Variables

Backend (.env)

DATABASE_URL=postgresql://username:password@localhost:5432/tam_taskify
SECRET_KEY=your-super-secret-key-here-change-in-production
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30
CORS_ORIGINS=http://localhost:5173,http://localhost:3000

Frontend (.env.local)

VITE_API_BASE_URL=http://localhost:8001/api/v1

Docker Commands

Using Docker Compose

# Start all services (development)
docker-compose -f docker-compose.dev.yml up --build

# Start all services (production)
docker-compose up --build -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down

Docker Architecture

graph TB
    subgraph "Docker Environment"
        Frontend[Frontend Container :3000]
        Backend[Backend Container :8001]
        PostgreSQL[(PostgreSQL Database)]
    end
    
    Internet[Internet] --> Frontend
    Internet --> Backend
    Backend --> PostgreSQL

Loading

Individual Docker Commands

# Build and run backend
cd backend
docker build -t tam-taskify-backend .
docker run -p 8001:8001 tam-taskify-backend

# Build and run frontend
cd frontend
docker build -t tam-taskify-frontend .
docker run -p 3000:3000 tam-taskify-frontend

Project Structure

tam-taskify/
├── backend/
│   ├── app/
│   │   ├── auth/                 # Authentication logic
│   │   ├── tasks/                # Task management
│   │   ├── users/                # User management
│   │   ├── database.py           # Database configuration
│   │   └── main.py               # FastAPI application
│   ├── pyproject.toml            # Poetry dependencies
│   ├── poetry.lock               # Poetry lock file
│   ├── Dockerfile               # Backend Docker image
│   └── .env.example             # Environment template
├── frontend/
│   ├── src/
│   │   ├── lib/
│   │   │   ├── api.ts           # API client
│   │   │   └── stores.ts        # Svelte stores
│   │   ├── routes/              # SvelteKit routes
│   │   └── app.css              # Global styles
│   ├── package.json             # Node dependencies
│   ├── Dockerfile               # Frontend Docker image
│   └── .env.example             # Environment template
├── scripts/
│   ├── docker-dev.sh            # Development setup script
│   └── docker-prod.sh           # Production setup script
├── .github/workflows/           # GitHub Actions workflows
├── docker-compose.yml           # Multi-container setup
├── docker-compose.dev.yml       # Development setup
├── .releaserc.json              # Semantic release configuration
├── .gitmessage                  # Commit message template
└── README.md                    # This file

CI/CD and Deployment

GitHub Actions Workflow

The project uses GitHub Actions for continuous integration and deployment:

• Conventional Commits Check: Ensures all commits follow conventional commit format
• Backend Testing: Runs Python tests with coverage reporting
• Frontend Testing: Runs linting, type checking, and builds
• Security Scanning: Uses Trivy for vulnerability scanning
• Docker Build: Builds and pushes Docker images to Docker Hub
• Automated Deployment: Deploys to production on main branch
• Semantic Release: Automatically creates releases and changelogs

Workflow Triggers

• Push to main/develop: Full CI/CD pipeline
• Pull Requests: Testing and security checks only
• Manual: Can be triggered manually via GitHub Actions tab

Required Secrets

Set these secrets in your GitHub repository settings:

DOCKER_USERNAME=your-docker-username
DOCKER_PASSWORD=your-docker-password

Deployment Commands

# Using production script
./scripts/docker-prod.sh

# Check deployment status
docker-compose ps
docker-compose logs -f

Conventional Commits

This project follows Conventional Commits specification for commit messages.

Commit Format

<type>(<scope>): <subject>

<body>

<footer>

Types

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing tests or correcting existing tests
• chore: Changes to the build process or auxiliary tools
• ci: Changes to CI configuration files and scripts
• build: Changes that affect the build system or external dependencies
• revert: Reverts a previous commit

Examples

feat(auth): add JWT token refresh mechanism
fix(ui): resolve mobile navigation menu overlap
docs(readme): update installation instructions
style(frontend): format code with prettier
refactor(api): extract user service logic
perf(backend): optimize database connection pooling
test(auth): add unit tests for login validation
chore(deps): update FastAPI to version 0.104
ci(github): add automated security scanning

Setup Git Commit Template

# Use the provided commit message template
git config commit.template .gitmessage

Automated Releases

The project uses semantic-release to automatically:

• Determine version bumps based on commit types
• Generate changelogs
• Create GitHub releases
• Update version numbers

Version bumps:

• feat: Minor version bump (1.0.0 → 1.1.0)
• fix: Patch version bump (1.0.0 → 1.0.1)
• BREAKING CHANGE: Major version bump (1.0.0 → 2.0.0)

Assumptions

Technical Assumptions

1. Single User per Device: Each user manages their own tasks
2. PostgreSQL Database: Robust relational database for production applications
3. JWT Authentication: Stateless authentication for scalability
4. Local Storage: Client-side token storage (consider httpOnly cookies for production)

Business Assumptions

1. Personal Use: Designed for individual task management
2. Basic Features: Focus on core CRUD operations
3. Responsive Design: Mobile-first approach for all devices
4. English Language: Single language support initially

Security Assumptions

1. HTTPS in Production: SSL/TLS encryption for production deployment
2. Environment Variables: Sensitive data stored in environment variables
3. Password Hashing: Bcrypt for password security
4. CORS Configuration: Properly configured for production domains

Scalability Assumptions

1. Moderate Load: Designed for hundreds of concurrent users
2. Horizontal Scaling: Can be scaled with load balancers
3. Database Ready: PostgreSQL configured for production deployment
4. Caching Strategy: Client-side caching with server-side validation

Future Enhancements

Near-term Features

• Email Verification - Verify user emails during registration
• Password Reset - Forgot password functionality
• Task Categories - Organize tasks into categories
• Due Dates - Add deadline functionality
• File Attachments - Attach files to tasks

Long-term Features

• Real-time Collaboration - Share tasks with other users
• Mobile App - Native iOS/Android applications
• Advanced Analytics - Task completion statistics
• Integration APIs - Connect with calendar apps
• Dark Mode - Theme switching capability

Performance Optimizations

• Database Optimization - PostgreSQL performance tuning
• Caching Layer - Redis for session management
• CDN Integration - Static asset optimization
• Progressive Web App - Offline functionality

Component Architecture

graph TD
    subgraph "Frontend Components"
        Layout[Layout Component]
        Auth[Auth Pages]
        Dashboard[Dashboard]
        TaskCard[Task Card]
        Modals[Modal Components]
    end
    
    subgraph "State Management"
        AuthStore[Auth Store]
        TaskStore[Task Store]
        UIStore[UI Store]
    end
    
    subgraph "API Layer"
        AuthAPI[Auth API]
        TaskAPI[Task API]
        HTTP[HTTP Client]
    end
    
    Layout --> AuthStore
    Auth --> AuthAPI
    Dashboard --> TaskStore
    TaskCard --> TaskAPI
    Modals --> TaskAPI
    
    AuthStore --> AuthAPI
    TaskStore --> TaskAPI
    AuthAPI --> HTTP
    TaskAPI --> HTTP

Loading

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add 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.

Author

Your Name

• GitHub: @anqorithm
• Email: anqorithm@protonmail.com

Acknowledgments

• FastAPI for the excellent Python web framework
• SvelteKit for the modern frontend framework
• Tailwind CSS for the utility-first CSS framework
• SQLAlchemy for the Python SQL toolkit

---

Built with care for efficient task management