- Node.js (v16 or later)
- npm (v8 or later) or Yarn
- Git
- Docker (for local Supabase)
git clone <repository-url>
cd circlo-appnpm install
# or
yarn install- Install Supabase CLI:
npm install -g supabase- Start a local Supabase instance:
supabase start- Take note of the local API URL and anon key that will be displayed after Supabase starts.
Create a .env file in the root directory with the following variables:
VITE_SUPABASE_URL=<your-local-supabase-url>
VITE_SUPABASE_ANON_KEY=<your-local-supabase-anon-key>
Run the SQL setup script to create the necessary tables and policies:
supabase db resetAlternatively, you can run the SQL commands manually through the Supabase Studio SQL Editor.
npm run dev
# or
yarn devVisit http://localhost:5173 to see your application.
To create an admin user with the following credentials:
- Email:
admin@mail.com - Password:
Hii12345678
- First sign up using the application's signup form.
- Then run the following SQL query in the Supabase SQL Editor:
-- Create admin role for the user
INSERT INTO public.user_roles (user_id, role)
VALUES (
(SELECT id FROM auth.users WHERE email = 'admin@mail.com'),
'admin'
);The application uses placeholder images located in the src/assets/images directory. Replace these files with your actual assets while keeping the same filenames to maintain compatibility.
src/
├── assets/ # Static assets (images, placeholder files)
│ └── images/ # Organized image assets
│ ├── logos/ # App logos and partner logos
│ ├── icons/ # UI icons
│ ├── rewards/ # Rewards images
│ ├── marketplace/ # Product images sorted by category
│ └── partners/ # Partner brand images
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (buttons, inputs, etc.)
│ ├── layout/ # Layout components (navbar, footer, etc.)
│ ├── profile/ # Profile-related components
│ ├── auth/ # Authentication components
│ ├── marketplace/ # Marketplace components
│ └── sustainability/ # Sustainability features (quotes, etc.)
├── contexts/ # React context providers
├── hooks/ # Custom React hooks
├── pages/ # Page components
│ └── admin/ # Admin-specific pages
├── services/ # API service modules
├── utils/ # Utility functions
└── data/ # Mock data and constants
CREATE TABLE public.profiles (
id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
name TEXT NOT NULL,
email TEXT NOT NULL,
phone TEXT,
address TEXT,
photo_url TEXT,
points INTEGER NOT NULL DEFAULT 0,
level TEXT NOT NULL DEFAULT 'Beginner',
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now()
);CREATE TABLE public.user_roles (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
role TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now()
);CREATE TABLE public.recycling_activities (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
location_id UUID,
item_id UUID,
points INTEGER NOT NULL DEFAULT 0,
description TEXT NOT NULL,
timestamp TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
photo_url TEXT,
qr_code TEXT,
status TEXT NOT NULL DEFAULT 'completed'
);-
Profile Updates Failing: Ensure the Supabase RLS policies are correctly set up to allow profile updates.
-
Admin Access Issues: Verify that the user has an entry in the
user_rolestable with theadminrole. -
QR Code Generation Errors: Check that the QR code package is properly installed with
npm install qrcode. -
Image Loading Errors: If images fail to load, check that the paths match the actual location of assets in your project.
When moving to production, you'll need to:
- Set up a production Supabase project
- Update environment variables
- Run all migrations on the production database
- Configure auth providers in the Supabase dashboard
- Set up proper storage bucket policies for profile photos