Visual Task Board

Your AI-Powered Productivity Workspace

🗂️ Overview

Visual Task Board is a modern, AI-powered productivity app designed to help you organize, visualize, and manage your tasks with clarity and style. Built with the latest web technologies, it features a beautiful drag-and-drop interface, real-time collaboration, and seamless authentication with Supabase.

🌟 Key Features

• 🧠 AI-Powered Task Suggestions - Get smart recommendations to optimize your workflow
• 🗂️ Visual Kanban Board - Organize tasks with an intuitive drag-and-drop interface
• 🔍 Powerful Search & Filters - Quickly find and focus on what matters
• 👥 Real-Time Collaboration - Work together with your team instantly
• 🔒 Secure Authentication - Supabase Auth for sign in, sign up, and Google login
• 🎨 Stunning Modern UI - Responsive, glassmorphism design with dark/light mode
• 🛎️ Instant Notifications - Beautiful toast alerts with Sonner
• 📱 Mobile Friendly - Works seamlessly on all devices
• ⚡ Fast & Reliable - Built with Vite, React 18, and TypeScript

🔧 Tech Stack

React	TypeScript	Vite	Tailwind	Supabase	Router
React Query	Radix UI	shadcn/ui	Lucide	Sonner

⚛️ Frontend

• React 18 - Modern UI library
• TypeScript - Type-safe programming
• Vite - Lightning-fast build tool
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful, accessible components
• Lucide React - Consistent icon toolkit
• React Router DOM - Client-side routing
• React Query - Data synchronization
• Sonner - Toast notifications

🗃️ Backend & Data

• Supabase - Open-source backend (database, auth, storage)

🎭 UI/UX & Additional Libraries

• Radix UI - Unstyled, accessible UI primitives
• React Hook Form & Zod - Form validation
• Date-fns - Modern date utilities

📂 Project Structure

visual-task-board/
├── dist/                   # Build output
├── public/                 # Public assets
├── src/
│   ├── components/
│   │   ├── TaskCanvas/     # Main board components
│   │   ├── ui/             # shadcn/ui components
│   │   ├── hooks/              # Custom React hooks
│   │   ├── context/            # React context (auth, etc.)
│   │   ├── integrations/       # Supabase client setup
│   │   ├── pages/              # App pages (Auth, Index, NotFound)
│   │   ├── App.tsx             # Main app
│   │   ├── main.tsx            # Entry point
│   │   └── index.css           # Global styles
│   ├── index.html              # HTML entry
│   ├── tailwind.config.ts      # Tailwind config
│   ├── tsconfig.json           # TypeScript config
│   ├── vite.config.ts          # Vite config
│   ├── package.json            # Dependencies
│   └── README.md               # Project docs

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1️⃣ Clone the repository:

git clone https://github.com/yourusername/visual-task-board.git
cd visual-task-board

2️⃣ Install dependencies:

npm install

3️⃣ Configure environment variables:

Create a .env file in the root directory:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_API_KEY=your_supabase_anon_key

4️⃣ Start the development server:

npm run dev

5️⃣ Open your browser: Navigate to http://localhost:5173

🌐 Deployment

# Build the project
npm run build

# Deploy the dist folder to your preferred hosting service
# (Netlify, Vercel, GitHub Pages, etc.)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

🙏 Acknowledgements

• Supabase for the backend platform
• shadcn/ui & Radix UI for the component library
• Lucide, Sonner, and the open source community

---

Made with ❤️ for productivity lovers