🎯 TaskFlow - Modern Task Management Platform

A production-ready, enterprise-level task management system with real-time collaboration, OAuth integration, and responsive design.

Live Demo • Documentation • Report Bug • Request Feature

🌟 Key Highlights

🔐 Enterprise Authentication - JWT with automatic token refresh, OAuth (GitHub), email verification
📱 Fully Responsive - Mobile-first design, works seamlessly on all devices (320px - 4K)
⚡ Modern Stack - Next.js 16, React 19, TypeScript, Tailwind CSS v4
🎨 Beautiful UI - Framer Motion animations, shadcn/ui components, smooth transitions
🚀 Production Ready - Comprehensive error handling, security best practices, optimized performance
🧪 Well Tested - Backend tested with Jest & Supertest
📊 Scalable Architecture - Clean code, separation of concerns, RESTful API design

📸 Screenshots

Landing Page

Dashboard

Task Management

Mobile Responsive

🛠️ Tech Stack

Frontend

Next.js 16.0         • React 19.2         • TypeScript 5
Tailwind CSS v4      • Framer Motion      • shadcn/ui
Zustand              • Axios              • React Hook Form

Backend

Node.js 22           • Express.js 4       • Prisma ORM 5
PostgreSQL 16        • Redis 4            • JWT Auth
Bcrypt               • Passport.js        • Resend (Email)

DevOps & Tools

Docker               • Docker Compose     • GitHub Actions
ESLint               • Prettier           • Jest

✨ Features

🔐 Authentication & Security

📊 Project Management

Create, read, update, delete projects
Project status tracking (Active, Completed, On Hold, Archived)
Project ownership & permissions
Task count per project
Project detail view with all tasks

✅ Task Management

Full CRUD operations for tasks
Task status (To Do, In Progress, In Review, Completed)
Priority levels (Low, Medium, High, Urgent)
Task assignment to team members
Due date tracking
Advanced filtering (status, priority, assignee, project)
Real-time search functionality
Task detail modal with all information

👤 User Management

🎨 UI/UX Features

Fully responsive design (mobile-first)
Dark/light mode support
Smooth Framer Motion animations
Toast notifications (success, error, info)
Loading states & skeletons
Empty states with call-to-actions
Mobile hamburger menu
Touch-friendly interface
Accessible components (ARIA labels)

🚀 Getting Started

Prerequisites

Node.js 22.x or higher
PostgreSQL 16.x
npm or yarn package manager
Git

Installation

Clone the repository

git clone https://github.com/slubbles/task-flow.git
cd task-flow

Install dependencies

# Install root dependencies
npm install

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

Set up environment variables

Backend (.env)

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/taskflow"

# JWT
JWT_SECRET="your-super-secret-jwt-key-change-this"
JWT_EXPIRES_IN="30d"

# Email (Resend)
RESEND_API_KEY="your-resend-api-key"
EMAIL_FROM="onboarding@yourdomain.com"

# OAuth GitHub
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"
GITHUB_CALLBACK_URL="http://localhost:3001/api/auth/callback/github"

# App URLs
FRONTEND_URL="http://localhost:3000"
BACKEND_URL="http://localhost:3001"

# Redis (Optional)
REDIS_URL="redis://localhost:6379"

Frontend (.env.local)

NEXT_PUBLIC_API_URL=http://localhost:3001/api

Set up the database

cd backend
npx prisma migrate dev
npx prisma generate

Run the application

Using Docker (Recommended)

docker-compose up

Or run manually

# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001/api

📁 Project Structure

task-flow/
├── backend/                    # Express.js Backend
│   ├── prisma/
│   │   ├── schema.prisma      # Database schema
│   │   └── migrations/        # Database migrations
│   ├── src/
│   │   ├── config/            # Configuration files
│   │   ├── controllers/       # Route controllers
│   │   ├── middleware/        # Custom middleware
│   │   ├── routes/            # API routes
│   │   ├── services/          # Business logic
│   │   ├── utils/             # Utility functions
│   │   └── server.js          # Entry point
│   └── tests/                 # Backend tests
│
├── frontend/                   # Next.js Frontend
│   ├── app/                   # App Router pages
│   │   ├── (auth)/           # Auth pages
│   │   ├── dashboard/        # Dashboard
│   │   ├── projects/         # Projects management
│   │   ├── tasks/            # Tasks management
│   │   └── profile/          # User profile
│   ├── components/            # React components
│   │   ├── ui/               # shadcn/ui components
│   │   └── *.tsx             # Custom components
│   ├── lib/                   # Utilities
│   │   └── api/              # API client
│   ├── store/                 # Zustand stores
│   └── types/                 # TypeScript types
│
├── docs/                       # Documentation
├── docker-compose.yml         # Docker configuration
└── README.md                  # This file

🔌 API Documentation

Authentication Endpoints

POST   /api/auth/register          # Register new user
POST   /api/auth/login             # Login user
POST   /api/auth/refresh           # Refresh JWT token
POST   /api/auth/logout            # Logout user
POST   /api/auth/verify-email      # Verify email address
POST   /api/auth/forgot-password   # Request password reset
POST   /api/auth/reset-password    # Reset password
PUT    /api/auth/change-password   # Change password
PUT    /api/auth/profile           # Update profile

OAuth Endpoints

GET    /api/oauth/github           # GitHub OAuth login
GET    /api/auth/callback/github   # GitHub OAuth callback

Project Endpoints

GET    /api/projects               # Get all projects
GET    /api/projects/:id           # Get project by ID
POST   /api/projects               # Create new project
PUT    /api/projects/:id           # Update project
DELETE /api/projects/:id           # Delete project

Task Endpoints

GET    /api/tasks                  # Get all tasks (with filters)
GET    /api/tasks/:id              # Get task by ID
POST   /api/tasks                  # Create new task
PUT    /api/tasks/:id              # Update task
DELETE /api/tasks/:id              # Delete task

User Endpoints

GET    /api/users                  # Get all users

📖 Full API documentation: See API.md

🧪 Testing

# Backend tests
cd backend
npm test

# Frontend tests
cd frontend
npm test

# E2E tests
npm run test:e2e

🚀 Deployment

Backend (Railway/Render)

Create a new project
Connect your GitHub repository
Add environment variables
Deploy

Frontend (Vercel)

Import your GitHub repository
Select Next.js framework
Add environment variables
Deploy

Detailed deployment guide: See DEPLOYMENT.md

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is MIT licensed.

👨‍💻 Author

Idderf Salem

GitHub: @slubbles
LinkedIn: Your LinkedIn
Portfolio: Your Portfolio

🙏 Acknowledgments

Next.js - The React Framework for the Web
shadcn/ui - Beautifully designed components
Prisma - Next-generation ORM
Tailwind CSS - A utility-first CSS framework
Framer Motion - Animation library

⭐ Star this repository if you find it helpful!

Made with ❤️ by Idderf Salem

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 36 Commits
.github		.github
backend		backend
docs		docs
frontend		frontend
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
PORTFOLIO_GUIDE.md		PORTFOLIO_GUIDE.md
README.md		README.md
TEST_RESULTS.md		TEST_RESULTS.md
docker-compose.yml		docker-compose.yml
package-lock.json		package-lock.json
package.json		package.json

License

slubbles/task-flow

Folders and files

Latest commit

History

Repository files navigation