This project is a simple Todo App built with Supabase as the backend database. It does not use RLS (Row Level Security), so only the anon key is required for database access.

Demo: https://todo-nextjs-sand.vercel.app/

• Next.js – Frontend framework
• Supabase – Backend database & API
• daisyUI – TailwindCSS Component

1. Clone this repository

git clone https://github.com/na-ive/todo-nextjs.git
cd todo-nextjs

2. Rename .env.example to .env.local

mv .env.example .env.local

Then open .env.local and fill it with your own Supabase project credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

3. Install dependencies

npm install
# or
yarn install

4. Run the development server

npm run dev

5. Open http://localhost:3000 with your browser to see the result.

Create a table named todoTabel in the Supabase SQL Editor with the following query:

create table if not exists todoTabel (
  id bigint generated by default as identity primary key,
  created_at timestamp with time zone default now() not null,
  title varchar,
  is_completed boolean default false,
  metadata jsonb
);

The metadata column stores JSON with the following structure:

{
  "tags": ["work", "urgent"],
  "priority": "high"
}

• tags → array of strings (categories/labels for the todo)
• priority → string (low, medium, high)

• Full CRUD (Create, Read, Update, Delete) for todo items
• Dynamic Search
  • Search by title
  • Search by tags
  • Sort by priority
• Light/Dark theme powered by daisyUI
• Responsive design for mobile, tablet, and desktop