Skip to content

Latest commit

 

History

History
98 lines (72 loc) · 2.22 KB

README.md

File metadata and controls

98 lines (72 loc) · 2.22 KB
Raw

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

  1. 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

  2. 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