Skip to content

GovardhaneNitin/Queue

Repository files navigation

📋 Queue - Task Management Application

Live Demo


🎯 About the Project

Queue is a modern, intuitive task management application that helps you organize your work efficiently. Built with cutting-edge technologies like SvelteKit and Supabase, it offers a seamless experience with features like priority management, status tracking, and smart filtering all wrapped in a beautiful, responsive interface that adapts to your preferred theme.

💼 Note: Developed as a Frontend Intern Assignment Task for Proxie Studio


📸 Screenshots

🎯 Dashboard
Dashboard
🔐 Login Page
Login
👤 Profile Page
Profile

✨ Features

🔐 Authentication

  • ✅ Email & password registration
  • ✅ Secure session management
  • ✅ Password reset functionality
  • ✅ Protected routes with auto-redirects
  • ✅ Session persistence
  • ✅ Instant logout updates

📝 Task Management

  • ✅ Create tasks with rich details
  • ✅ Edit existing tasks
  • ✅ Delete with confirmation
  • ✅ Toggle completion status
  • ✅ Real-time Zod validation
  • ✅ Dual validation (client + server)

🎯 Task Organization

  • ✅ Sort by date, priority, status
  • ✅ Filter by status categories
  • ✅ Quick search by title
  • ✅ Color-coded priority badges
  • ✅ Visual status indicators
  • ✅ Elegant empty states

🎨 UI/UX Excellence

  • ✅ Fully responsive design
  • ✅ Dark/Light mode toggle
  • ✅ Loading state feedback
  • ✅ Toast notifications
  • ✅ Smooth animations
  • ✅ ARIA accessibility

🛠️ Tech Stack

SvelteKit
SvelteKit
Framework
shadcn-svelte
shadcn-svelte
UI Components
Supabase
Supabase
Database & Auth
Zod
Zod
Validation
TailwindCSS
TailwindCSS
Styling
Lucide
Lucide Svelte
Icons
PostgreSQL
PostgreSQL
Database
JavaScript
JavaScript
Language

🚀 Setup Instructions

Prerequisites

  • Node.js 18.x or higher
  • npm or pnpm package manager
  • Supabase account

1. Clone the Repository

git clone https://github.com/GovardhaneNitin/Queue.git cd Queue

2. Install Dependencies

npm install

3. Set Up Supabase

Step 1: Create a Supabase Project

  1. Go to supabase.com and sign in
  2. Click "New Project"
  3. Fill in your project details:
    • Name: Queue (or any name you prefer)
    • Database Password: Create a strong password (save it!)
    • Region: Choose the closest region to you
  4. Click "Create new project" and wait for it to provision

Step 2: Configure Authentication

  1. In your Supabase project, go to AuthenticationProviders
  2. Ensure Email provider is enabled
  3. Go to AuthenticationEmail Templates and customize if needed
  4. Important: For development, disable email confirmation:
    • Go to AuthenticationProvidersEmail
    • Uncheck "Enable email confirmations" (you can re-enable for production)

Step 3: Set Up the Database

  1. In your Supabase project, go to SQL Editor
  2. Click "New query"
  3. Copy and paste the following SQL schema:
-- Create tasks tableCREATETABLEIF NOT EXISTS tasks ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULLREFERENCESauth.users(id) ON DELETE CASCADE, title TEXTNOT NULL, description TEXT DEFAULT '', priority TEXTNOT NULLCHECK (priority IN ('Low', 'Medium', 'High')), due_date TIMESTAMPTZNOT NULL, status TEXTNOT NULL DEFAULT 'Pending'CHECK (status IN ('Pending', 'In Progress', 'Completed')), created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Create index for user_id lookupsCREATEINDEXIF NOT EXISTS idx_tasks_user_id ON tasks(user_id); -- Create index for filtering by statusCREATEINDEXIF NOT EXISTS idx_tasks_status ON tasks(status); -- Create index for sorting by due_dateCREATEINDEXIF NOT EXISTS idx_tasks_due_date ON tasks(due_date); -- Enable Row Level SecurityALTERTABLE tasks ENABLE ROW LEVEL SECURITY; -- Create policies-- Users can only see their own tasks CREATE POLICY "Users can view own tasks"ON tasks FOR SELECT USING (auth.uid() = user_id); -- Users can insert their own tasks CREATE POLICY "Users can insert own tasks"ON tasks FOR INSERT WITH CHECK (auth.uid() = user_id); -- Users can update their own tasks CREATE POLICY "Users can update own tasks"ON tasks FOR UPDATE USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id); -- Users can delete their own tasks CREATE POLICY "Users can delete own tasks"ON tasks FOR DELETE USING (auth.uid() = user_id); -- Create function to update updated_at timestampCREATE OR REPLACEFUNCTIONupdate_updated_at_column() RETURNS TRIGGER AS $$ BEGINNEW.updated_at= NOW(); RETURN NEW; END; $$ LANGUAGE plpgsql; -- Create trigger to auto-update updated_atCREATETRIGGERupdate_tasks_updated_at BEFORE UPDATEON tasks FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
  1. Click "Run" to execute the SQL
  2. Verify the tasks table was created:
    • Go to Table Editor
    • You should see a tasks table with all columns

Step 4: Get Your API Keys

  1. Go to Project SettingsAPI
  2. Copy the following values:
    • Project URL (looks like https://xxxxx.supabase.co)
    • anon public key (starts with eyJ...)

4. Environment Variables

Create a .env file in the root directory:

SUPABASE_URL=your_supabase_project_urlSUPABASE_ANON_KEY=your_supabase_anon_key

Where to find these values:

  • Go to your Supabase project dashboard
  • Navigate to Settings → API
  • Copy the Project URL and anon/public key

5. Run the Development Server

npm run dev

The application will be available at http://localhost:5173


🔮 Future Enhancements

🚀 Coming Soon

  • 🔄 Real-time Subscriptions
    Live updates when tasks change
  • Due Date Reminders
    Push notifications for deadlines
  • 👥 Collaborative Tasks
    Share tasks with team members
  • 🏷️ Categories & Tags
    Custom organization system

💡 Roadmap

  • 📊 Analytics Dashboard
    Track productivity & completion rates
  • 📱 Progressive Web App
    Install as mobile app with offline mode
  • 🔍 Advanced Search
    Full-text search with filters
  • 📎 File Attachments
    Attach files & images to tasks

👨‍💻 Developer Information

Nitin Govardhane
Nitin Bhausaheb Govardhane
🎓 MCA Science Student
MIT World Peace University, Pune

EmailLinkedInPortfolio

🙏 Acknowledgments

💼 Proxie Studio
For providing the assignment opportunity

📄 License

This project is open source and available for educational purposes.


Built with ❤️ by Nitin Govardhane

Made with SvelteKit • Powered by Supabase • Styled with TailwindCSS