https://github.com/anqorithm/tam-taskify
A modern, full-stack task management application built with FastAPI backend and SvelteKit frontend, featuring user authentication, CRUD operations, and a beautiful responsive UI.
https://github.com/anqorithm/tam-taskify
api cicd docker docker-compose fastapi python sveltekit task-management task-manager taskify
Last synced: 7 months ago
JSON representation
A modern, full-stack task management application built with FastAPI backend and SvelteKit frontend, featuring user authentication, CRUD operations, and a beautiful responsive UI.
- Host: GitHub
- URL: https://github.com/anqorithm/tam-taskify
- Owner: anqorithm
- Created: 2025-07-05T15:52:18.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-06T08:00:49.000Z (9 months ago)
- Last Synced: 2025-07-07T17:59:25.746Z (9 months ago)
- Topics: api, cicd, docker, docker-compose, fastapi, python, sveltekit, task-management, task-manager, taskify
- Language: Python
- Homepage:
- Size: 5.47 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tam Taskify - Personal Task Management System
[](https://opensource.org/licenses/MIT)
[](https://www.python.org/downloads/)
[](https://fastapi.tiangolo.com/)
[](https://kit.svelte.dev/)
[](https://www.typescriptlang.org/)
[](https://www.docker.com/)
[](https://codecov.io/gh/anqorithm/tam-taskify)
[](https://conventionalcommits.org)
[](http://makeapullrequest.com)
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](#features)
- [Demo](#demo)
- [System Architecture](#system-architecture)
- [Technology Stack](#technology-stack)
- [Database Design](#database-design)
- [API Design](#api-design)
- [Authentication Flow](#authentication-flow)
- [Quick Start](#quick-start)
- [Manual Setup](#manual-setup)
- [Project Structure](#project-structure)
- [CI/CD and Deployment](#cicd-and-deployment)
- [Conventional Commits](#conventional-commits)
- [Assumptions](#assumptions)
- [Future Enhancements](#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
Your browser does not support the video tag. Download the demo video
*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
```mermaid
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
```
## 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
```mermaid
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
}
```
### 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
```mermaid
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
```
### 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
```mermaid
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
```
## Quick Start
### Prerequisites
- **Docker** and Docker Compose
- **Git** for cloning the repository
### Using Scripts (Recommended)
```bash
# 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
```bash
# 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
```bash
# 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)
```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)
```env
VITE_API_BASE_URL=http://localhost:8001/api/v1
```
## Docker Commands
### Using Docker Compose
```bash
# 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
```mermaid
graph TB
subgraph "Docker Environment"
Frontend[Frontend Container :3000]
Backend[Backend Container :8001]
PostgreSQL[(PostgreSQL Database)]
end
Internet[Internet] --> Frontend
Internet --> Backend
Backend --> PostgreSQL
```
### Individual Docker Commands
```bash
# 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:
```bash
DOCKER_USERNAME=your-docker-username
DOCKER_PASSWORD=your-docker-password
```
### Deployment Commands
```bash
# Using production script
./scripts/docker-prod.sh
# Check deployment status
docker-compose ps
docker-compose logs -f
```
## Conventional Commits
This project follows [Conventional Commits](https://conventionalcommits.org/) specification for commit messages.
### Commit Format
```
():
```
### 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
```bash
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
```bash
# 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
```mermaid
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
```
## 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](LICENSE) file for details.
## Author
**Your Name**
- GitHub: [@anqorithm](https://github.com/anqorithm)
- Email: anqorithm@protonmail.com
## Acknowledgments
- [FastAPI](https://fastapi.tiangolo.com/) for the excellent Python web framework
- [SvelteKit](https://kit.svelte.dev/) for the modern frontend framework
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework
- [SQLAlchemy](https://www.sqlalchemy.org/) for the Python SQL toolkit
---
**Built with care for efficient task management**