📋 Queue - Task Management Application

---

🎯 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

🔐 Login Page

👤 Profile Page

---

✨ 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 Framework	shadcn-svelte UI Components	Supabase Database & Auth	Zod Validation
TailwindCSS Styling	Lucide Svelte Icons	PostgreSQL Database	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 Authentication → Providers
2. Ensure Email provider is enabled
3. Go to Authentication → Email Templates and customize if needed
4. Important: For development, disable email confirmation:
   • Go to Authentication → Providers → Email
   • 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 table
CREATE TABLE IF NOT EXISTS tasks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT DEFAULT '',
  priority TEXT NOT NULL CHECK (priority IN ('Low', 'Medium', 'High')),
  due_date TIMESTAMPTZ NOT NULL,
  status TEXT NOT 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 lookups
CREATE INDEX IF NOT EXISTS idx_tasks_user_id ON tasks(user_id);

-- Create index for filtering by status
CREATE INDEX IF NOT EXISTS idx_tasks_status ON tasks(status);

-- Create index for sorting by due_date
CREATE INDEX IF NOT EXISTS idx_tasks_due_date ON tasks(due_date);

-- Enable Row Level Security
ALTER TABLE 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 timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger to auto-update updated_at
CREATE TRIGGER update_tasks_updated_at
  BEFORE UPDATE ON tasks
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();

4. Click "Run" to execute the SQL
5. 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 Settings → API
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_url
SUPABASE_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 Bhausaheb Govardhane 🎓 MCA Science Student MIT World Peace University, Pune

---

🙏 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}