FocusFlow Kanban Board

📑 Table of Contents

• Overview
• Key Features
• Technologies Used
• Database Structure
• Detailed Project Features
• Project Structure
• Getting Started
• Deployment
• Contributing
• License

📋 Overview

FocusFlow is a comprehensive Kanban board application that combines task management with focus tools and spiritual guidance. It helps users organize their tasks and increase productivity while providing unique features like a Quran player and AI assistant.

✨ Key Features

• 📋 Kanban Board: Drag-and-drop task management with customizable columns
• 🔐 Authentication: Secure user login, registration, and password reset
• 🤖 AI Integration: Smart assistant for task suggestions and help
• ⏲️ Focus Timer: Built-in timer for productivity management and time tracking
• 📖 Quran Player: Integrated Quran player for spiritual guidance
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices

🛠️ Technologies Used

Frontend

• React with TypeScript: For building the user interface
• Vite: For fast build tooling
• Tailwind CSS: For styling
• shadcn/ui: UI component library
• Framer Motion: For animations
• React Router: For page navigation
• React Query: For data state management

Backend

• Node.js API: For backend services
• Supabase: For database and authentication
• Express: For creating the API
• OpenRouter API: For AI integration

🗄️ Database Structure

We use Supabase as our database solution, which is built on PostgreSQL. Here's a simple breakdown of our database structure:

Tables

1. users

   • User authentication and profile information
   • Managed by Supabase Auth

2. tasks

   • id: Unique identifier
   • title: Task title
   • description: Task details
   • status: Current column (e.g., "TODO", "DOING", "DONE")
   • user_id: Reference to users table
   • created_at: Creation timestamp
   • updated_at: Update timestamp
   • priority: Task priority
   • time_spent: Time spent on the task

3. activity_logs

   • Tracks all user actions
   • Used for the activity feed feature

🚀 Detailed Project Features

Kanban Board

• Create, edit, and delete tasks
• Drag and drop tasks between columns
• Customizable columns and flexible workflow
• Real-time updates across all users
• Restrictions on the "In Progress" column to focus on only one task

Authentication

• Secure user registration and login
• Password reset functionality
• Session management
• Protected routes and API endpoints

AI Integration

• Smart task suggestions
• Natural language processing for task creation
• AI-powered productivity insights
• Personal project management assistant

Focus Timer

• Customizable work/break intervals
• Session tracking
• Productivity statistics
• Integration with task management system

Quran Player

• Audio playback of Quranic recitations
• Surah selection and navigation
• Variety of reciters
• Integration with task management system

📁 Project Structure

├── api/                  # Backend API routes
│   ├── auth/            # Authentication endpoints
│   ├── tasks/           # Task management endpoints
│   └── ai/              # AI integration endpoints
├── src/
│   ├── components/      # React components
│   │   ├── ai/         # AI chat components
│   │   ├── auth/       # Authentication forms
│   │   ├── kanban/     # Kanban board components
│   │   ├── quran/      # Quran player components
│   │   └── ui/         # Reusable UI components
│   ├── services/       # API service integrations
│   ├── hooks/          # Custom React hooks
│   ├── pages/          # Application pages/routes
│   └── types/          # TypeScript type definitions
└── supabase/           # Supabase configuration

🚀 Getting Started

1. Clone the repository:

git clone https://github.com/elewashy/FocusFlow-Kanban-Board.git
cd FocusFlow-Kanban-Board

2. Install dependencies:

npm install

3. Copy .env.example to .env.local and configure your environment variables:

cp .env.example .env.local

4. Configure environment variables:

# Supabase credentials
SUPABASE_URL=your-supabase-project-url
SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_KEY=your-supabase-SERVICE-key

# OpenRouter API key
OPENROUTER_API_KEY=your-openrouter-api-key

# Server port
PORT=3001

5. Start the development server:

npm run dev

6. Open your browser at http://localhost:8080

🔧 Deployment

The project can be deployed on Vercel or any other hosting platform that supports React and Node.js applications.

Deploying on Vercel

1. Create an account on Vercel
2. Link your GitHub repository
3. Configure environment variables in the Vercel dashboard
4. Deploy the application

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

📄 License

This project is licensed under the MIT License.