a0.dev

Task Tracker with Authentication

8 snippets

Build a Form to Add New Tasks

Create a form in the UI to add new tasks and submit them to Supabase.

Create a form in the Task Tracker dashboard to add new tasks. Fields: task title. On submit, send data to Supabase and refresh the task list. Include loading and error handling states.

Add User Registration and Login with Supabase Auth

Implement registration and login functionality using Supabase Auth.

Add authentication to the Task Tracker app using Supabase Auth. Create sign up and login forms. On successful login, redirect users to their dashboard. Persist session and include logout functionality.

Restrict Access to Authenticated Users Only

Ensure only logged-in users can access the dashboard or task features.

Restrict access to the task dashboard route. If user is not authenticated, redirect to the login page. Use Supabase session check on the frontend and SSR if needed.

Create Supabase Table for Tasks

Design a `tasks` table in Supabase linked to each authenticated user.

Create a `tasks` table in Supabase with the following fields: - id (uuid) - user_id (uuid) - title (text) - completed (boolean) - created_at (timestamp) Add row-level security to ensure users can only access their own tasks.

Write Test for Adding a Task

Create a test that checks whether a task can be successfully added via the form.

Write a test for the task form using Jest or Playwright. Simulate entering a task title, submitting the form, and verifying the new task appears in the list.

1. Setup Task Tracker App

Initialize a full-stack Task Tracker using Supabase for auth and DB.

Build a full-stack Task Tracker app using: - Next.js (frontend) - Supabase (auth + database) - Tailwind CSS (UI) Include user registration, login, and task management. Structure files for scalability.

Display User Tasks in a List

Render all tasks belonging to the logged-in user in a clean list UI.

Fetch and display all tasks belonging to the current logged-in user. Render each task as a list item with title and completion status. Include a message when there are no tasks.

Implement Task Completion Toggle

Allow users to mark tasks as complete or incomplete by clicking a checkbox or button.

Add a checkbox or button to each task item that lets users mark it complete/incomplete. Update the `completed` value in Supabase when toggled and refresh the list.