Gada Task Manager

A task management application built as an assessment test for Frontend Developer Role at GadaHQ. Built with Next.js, TypeScript, Supabase, and Prisma. Users can create, view, and delete their personal tasks after authentication.

🌐 Live Demo

Deployed URL: https://gadahq-task-manager.vercel.app/

🚀 Tech Stack

• Framework: Next.js 16+ (App Router)
• Language: TypeScript
• Database & Auth: Supabase
• ORM: Prisma
• Styling/UI: Tailwind CSS + Shadcn/UI
• Data Fetching on Client: React Query

✨ Features

• 🔐 Secure Authentication - Email/password authentication via Supabase Auth
• ✅ Task Management - Create, view, and delete tasks
• 👤 User Isolation - Each user can only see and manage their own tasks
• 🎨 Modern UI - Clean and responsive interface
• 🔒 Protected Routes - Automatic redirection for unauthenticated users

📁 Folder Structure

gada-task-manager/
├── app/
│   ├── (auth)/              # Authentication routes
│   │   ├── login/           # Login page
│   │   └── signup/          # Sign up page
│   ├── (protected)/         # Protected routes (require auth)
│   │   └── tasks/           # Task management page
│   ├── api/                 # API routes
│   │   └── tasks/           # Task CRUD endpoints
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Landing page
├── components/              # Reusable React components
│            └── ui          # ShadCn Components
├── lib/                     # Utility functions
│   ├── supabase/            # Supabase server and client setup
│   └── prisma.ts            # Prisma client instance
├── prisma/
│   └── schema.prisma        # Database schema
├── public/                  # Static assets
├── .env.local              # Environment variables (not in git)
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md

Schema Decisions:

• UUID for IDs: Better security and distributed system compatibility
• userId Index: Optimizes queries filtering tasks by user
• Timestamps: Track creation and modification times
• No User model in Prisma: User data is managed entirely by Supabase Auth

🛠️ Setup Instructions

Prerequisites

• Node.js 18+ installed
• npm/yarn/pnpm/bun package manager
• A Supabase account (sign up here)

1. Clone the Repository

git clone https://github.com/TechieSamDev/gadahp-task-manager.git
cd gada-task-manager

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Set Up Supabase

1. Create a new project in Supabase Dashboard
2. Go to Settings > API and copy:
   • Project URL
   • Anon/Public Key
3. Enable Email authentication in Authentication > Providers

4. Configure Environment Variables

Create a .env.local file in the root directory:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

# Database (use Supabase connection string)
DATABASE_URL=your-supabase-database-url

To get the DATABASE_URL:

• Go to Supabase Dashboard > Settings > Database
• Copy the Connection String (Transaction mode or Session mode)
• Replace [YOUR-PASSWORD] with your database password

5. Set Up Prisma

# Generate Prisma Client
npx prisma generate

# Push schema to database
npx prisma db push

6. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

📚 Implementation Notes

• Auth Strategy: Using Supabase Auth for user management; no custom user table in Prisma
• Error Handling: Client-side validation + server-side error responses
• Type Safety: Full TypeScript coverage for better DX and fewer bugs

🐛 Troubleshooting

Database connection errors:

• Verify DATABASE_URL is correct
• Check Supabase project is active

Authentication issues:

• Verify Supabase keys are correct
• Check email provider is enabled
• Clear browser cache/cookies

Build errors:

• Delete node_modules and .next folders
• Run npm install again
• Check Node.js version compatibility