Quick-List 📝

A modern, responsive todo application built with SvelteKit and Supabase. Stay organized and get things done with a clean, intuitive interface.

✨ Features

• 🔐 Authentication: Secure user registration and login with Supabase Auth
• 📋 Todo Management: Create, read, update, and delete todos
• ✅ Task Completion: Toggle task completion status
• 📊 Progress Tracking: Visual stats showing total, active, and completed tasks
• 🎨 Modern UI: Clean, responsive design with Tailwind CSS
• 🌙 Dark Mode: Built-in dark/light mode toggle
• 📱 Mobile Friendly: Fully responsive design for all devices
• ⚡ Real-time: Instant updates with Supabase real-time features
• 🔒 Secure: Row-level security with user-specific data isolation

🛠️ Tech Stack

• Frontend: SvelteKit with TypeScript
• Styling: Tailwind CSS with custom components
• Backend: Supabase (Database + Authentication)
• Icons: Lucide Svelte
• Notifications: Svelte Sonner
• Testing: Vitest + Playwright

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• A Supabase account and project

1. Clone & Install

git clone <repository-url>
cd my-todo-app
npm install

2. Environment Setup

Create a .env file in the root directory:

PUBLIC_SUPABASE_URL=your-supabase-project-url
PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-supabase-anon-key

Get these values from your Supabase Dashboard → Settings → API.

3. Database Setup

Run this SQL in your Supabase SQL Editor to create the todos table:

-- Enable Row Level Security
create table if not exists todos (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) on delete cascade not null,
  task text not null,
  is_done boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable RLS
alter table todos enable row level security;

-- Create policies
create policy "Users can view their own todos" on todos
  for select using (auth.uid() = user_id);

create policy "Users can create their own todos" on todos
  for insert with check (auth.uid() = user_id);

create policy "Users can update their own todos" on todos
  for update using (auth.uid() = user_id);

create policy "Users can delete their own todos" on todos
  for delete using (auth.uid() = user_id);

4. Start Development

npm run dev

Visit http://localhost:5173 to see your app! 🎉

📁 Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── ui/           # Reusable UI components
│   │   ├── Auth.svelte   # Authentication component
│   │   ├── TodoApp.svelte# Main todo application
│   │   └── TodoItem.svelte# Individual todo item
│   ├── database.types.ts # TypeScript definitions
│   ├── supabase.ts      # Supabase client
│   └── utils.ts         # Utility functions
├── routes/
│   ├── +layout.svelte   # App layout
│   ├── +layout.server.ts# Layout server logic
│   ├── +page.svelte     # Home page
│   ├── +page.server.ts  # Page server actions
│   └── auth/            # Authentication routes
└── app.html             # HTML template

🧪 Testing

The project includes comprehensive unit tests using Vitest with TypeScript support.

Test Structure

src/
├── lib/
│   ├── utils.test.ts         # Utility function tests
│   └── formatters.test.ts    # Date formatting and helper tests
└── demo.spec.ts              # Demo test file

Running Tests

# Run all tests
npm run test

# Run tests in watch mode
npm run test:unit

# Run tests with coverage
npm run test -- --coverage

Test Features

• ✅ Utility Functions: Tests for class name merging, date formatting, and user initials
• ✅ Business Logic: Todo filtering, form validation, and authentication checks
• ✅ TypeScript Support: Full type checking in tests
• ✅ Mocking: Mock implementations for external dependencies
• ✅ Fast Execution: Optimized test runner with parallel execution

Available Scripts

# Development
npm run dev              # Start dev server
npm run build           # Build for production
npm run preview         # Preview production build

# Quality
npm run check           # Type checking
npm run check:watch     # Type checking in watch mode
npm run lint            # Run ESLint
npm run format          # Format code with Prettier

# Testing
npm run test            # Run all tests
npm run test:unit       # Run unit tests

🎨 UI Components

The app uses a custom component library built on top of Tailwind CSS:

• Button: Various styles and sizes
• Input: Form inputs with validation
• Card: Content containers
• Badge: Status indicators
• Avatar: User profile pictures
• Dropdown Menu: Contextual menus
• Checkbox: Todo completion toggles

🔧 Configuration

Tailwind CSS

Configured with:

• Custom color palette
• Form plugins
• Typography plugin
• Custom border radius variables

TypeScript

Strict TypeScript configuration with:

• Full type safety
• Supabase type generation
• Custom type definitions

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• SvelteKit for the amazing framework
• Supabase for the backend infrastructure
• Tailwind CSS for the styling system
• Lucide for the beautiful icons

Built with ❤️ using SvelteKit and Supabase