# Philippine Treasures - E-commerce Platform A full-featured e-commerce platform for selling authentic Philippine goods, built with React, TypeScript, and Supabase. ## Features ### Customer Features - Browse products by category - Search products by name or description - View detailed product information - Add products to shopping cart - Checkout and place orders - View order history ### Admin Features - Product management (add, edit, delete) - Inventory tracking - Sales reports and analytics - Order management - Revenue tracking ## Tech Stack - **Frontend**: React 18, TypeScript, Vite - **Styling**: Tailwind CSS - **Icons**: Lucide React - **Database**: Supabase (PostgreSQL) - **Authentication**: Supabase Auth ## Getting Started ### Prerequisites - Node.js 18+ - npm or yarn ### Installation 1. Clone the repository 2. Install dependencies: ```bash npm install ``` 3. Set up environment variables: - The `.env` file contains your Supabase credentials - Make sure `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY` are set 4. Start the development server: ```bash npm run dev ``` 5. Build for production: ```bash npm run build ``` ## Creating an Admin User To create an admin user: 1. Sign up for a new account through the application 2. Run this SQL query in your Supabase dashboard to upgrade the user to admin: ```sql UPDATE user_profiles SET role = 'admin' WHERE user_id = 'YOUR_USER_ID'; ``` To find your user ID, you can: - Check the `auth.users` table in Supabase - Or run: `SELECT * FROM user_profiles;` ## Default Product Categories - Clothing (Barong Tagalog, Terno Dress) - Textiles (Inabel Blankets, Abaca Placemats) - Food (Dried Mangoes, Adobo Seasoning, Ube Halaya) - Home Decor (Capiz Shell Chandeliers, Rattan Baskets) - Accessories (Bayong Bags) ## Database Schema ### Tables - `user_profiles` - User information and roles - `products` - Product catalog - `orders` - Customer orders - `order_items` - Order line items ### Security All tables have Row Level Security (RLS) enabled with appropriate policies for customer and admin access. ## Project Structure ``` src/ ├── components/ # React components │ ├── admin/ # Admin dashboard components │ ├── AuthModal.tsx # Authentication modal │ ├── CartDrawer.tsx # Shopping cart │ ├── Checkout.tsx # Checkout process │ ├── Header.tsx # Site header │ ├── ProductCard.tsx # Product card component │ ├── ProductDetail.tsx # Product details modal │ └── ProductList.tsx # Product listing page ├── contexts/ # React contexts │ ├── AuthContext.tsx # Authentication context │ └── CartContext.tsx # Shopping cart context ├── lib/ # Utilities │ └── supabase.ts # Supabase client ├── types/ # TypeScript types │ ├── database.ts # Database types │ └── index.ts # App types └── App.tsx # Main app component ``` ## Features Overview ### Authentication - Email/password authentication via Supabase - Role-based access control (customer/admin) - Secure session management ### Shopping Experience - Responsive product grid - Category filtering - Search functionality - Real-time stock updates - Persistent shopping cart (localStorage) ### Admin Dashboard - Product CRUD operations - Stock management - Sales analytics - Order tracking - Revenue reports ## License MIT # KargaGo