React Supabase Todo App

A simple todo application built with React, TypeScript, and Supabase, featuring GitHub authentication and real-time updates.

Setup

1. Clone the repository
2. Install dependencies:

npm install

3. Create your environment file:

   • Copy the env.example file to .env:

   cp .env.example .env

   • Update the .env file with your Supabase credentials:
     • VITE_SUPABASE_URL: Your Supabase project URL
     • VITE_SUPABASE_KEY: Your Supabase project's anon/public key

4. Start the development server:

npm run dev

Features

• GitHub Authentication
• Create, read, update, and delete todos
• Mark todos as complete/incomplete
• Real-time updates
• Responsive design with Tailwind CSS

Tech Stack

• React
• TypeScript
• Vite
• Supabase
• Tailwind CSS
• @supabase/auth-ui-react for authentication UI

Database Schema

The application requires a todos table in your Supabase database with the following schema:

create table todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  task text not null,
  is_complete boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable Row Level Security
alter table todos enable row level security;

-- Create policy to only allow users to see their own todos
create policy "Users can only see their own todos" on todos
  for all using (auth.uid() = user_id);

Environment Variables

The application uses environment variables for configuration. A template file .env.example is provided with all required variables. To configure:

1. Copy .env.example to .env
2. Replace the placeholder values with your actual Supabase credentials

Required variables:

Variable	Description
VITE_SUPABASE_URL	Your Supabase project URL
VITE_SUPABASE_KEY	Your Supabase project's anon/public key

You can find these values in your Supabase project settings under Project Settings > API.

Development

To start the development server:

npm run dev

To build for production:

npm run build

To preview the production build:

npm run preview