Task Manager

A modern task management application built with SvelteKit and Supabase.

Features

• 🔐 Google Authentication - Sign in with your Google account
• ✅ Task Management - Create, edit, delete, and organize tasks
• 🎯 Priority Levels - Set task priorities (Low, Medium, High)
• 📅 Due Dates - Track deadlines for your tasks
• 🏷️ Status Tracking - Mark tasks as Pending, In Progress, or Completed
• 🎨 Modern UI - Beautiful interface built with Tailwind CSS
• 🔒 Secure - Row Level Security with Supabase

Tech Stack

• Frontend: SvelteKit, TypeScript, Tailwind CSS
• Backend: Supabase (PostgreSQL, Authentication, Real-time subscriptions)
• Authentication: Google OAuth via Supabase Auth

Prerequisites

• Node.js 18+ and npm
• A Supabase account
• Google Cloud Console account (for OAuth)

Setup

1. Clone the repository

git clone <your-repo-url>
cd task-manager

2. Install dependencies

npm install

3. Setup Supabase

Follow the detailed instructions in SETUP_SUPABASE.md to:

• Create a Supabase project
• Set up the database schema
• Configure Google OAuth
• Set environment variables

4. Create .env file

PUBLIC_SUPABASE_URL=your_supabase_url
PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
DATABASE_URL=your_database_url

5. Run the development server

npm run dev

Open http://localhost:5173 in your browser.

Project Structure

task-manager/
├── src/
│   ├── app.d.ts          # TypeScript app declarations
│   ├── app.html          # HTML template
│   ├── app.css           # Global styles
│   ├── hooks.server.ts   # Server hooks for auth
│   ├── lib/
│   │   ├── supabase.ts   # Supabase client configuration
│   │   └── database.types.ts # Database TypeScript types
│   └── routes/
│       ├── +layout.svelte # Root layout
│       ├── +layout.server.ts # Layout server load
│       ├── +page.svelte   # Home page
│       ├── auth/          # Authentication pages
│       └── dashboard/     # Task management dashboard
├── static/               # Static assets
├── package.json          # Dependencies
└── vite.config.ts       # Vite configuration

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Run TypeScript checks
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import project to Vercel
3. Add environment variables
4. Deploy

Deploy to Netlify

1. Push your code to GitHub
2. Import project to Netlify
3. Add environment variables
4. Set build command: npm run build
5. Set publish directory: build

Contributing

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.

task-manager