TaskFlow (Expo + Supabase)

A personal productivity app built with React Native (Expo), Supabase, Context API, and React Native Paper.

Features

• Auth: Email/password signup, login, logout with Supabase Auth.
• Tasks: CRUD for tasks (title, description, priority, due date, status).
• Realtime: Live updates on task changes.
• Progress: Completion percentage progress bar.
• Filters: All / Pending / Completed / Overdue.
• UI: Responsive components using React Native Paper.

Tech Stack

• Expo SDK 52
• React Native
• Supabase (@supabase/supabase-js v2)
• React Navigation (Native Stack)
• Context API for state management
• React Native Paper

Project Structure

.
├─ App.js
├─ app.config.js
├─ babel.config.js
├─ .env.example
├─ lib/
│  └─ supabase.js
├─ context/
│  ├─ AuthContext.js
│  └─ TasksContext.js
├─ navigation/
│  └─ AppNavigator.js
├─ components/
│  └─ screens/
│     ├─ auth/
│     │  ├─ LoginScreen.js
│     │  └─ SignupScreen.js
│     └─ tasks/
│        ├─ TaskListScreen.js
│        └─ TaskFormScreen.js
└─ supabase.sql

Setup

1. Install dependencies

npm install

2. Create .env from .env.example and fill your Supabase values:

SUPABASE_URL=https://YOUR_PROJECT.supabase.co
SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

3. Configure Supabase

• In your Supabase project, run supabase.sql from this repo to create the tasks table and RLS policies.
• Or run each statement manually from the SQL editor.

4. Run

npx expo start

Use the Expo Go app or an emulator to open the project.

Supabase Schema (quick view)

• Table: tasks
  • id (uuid, PK, default uuid_generate_v4())
  • user_id (uuid, references auth.users)
  • title (text)
  • description (text)
  • priority (text: low|medium|high)
  • due_date (date)
  • status (text: pending|completed)
  • inserted_at (timestamptz default now())
  • updated_at (timestamptz default now())
• RLS enabled with policies allowing owners to CRUD their own tasks.

Notes

• The app listens to realtime postgres_changes on tasks filtered by the current user.
• If you change table/column names, update them in context/TasksContext.js.