Development guide for Fungal Flux - a React e-commerce platform for mushroom products with admin inventory management system built on Vite, TypeScript, and Supabase
Development guide for working with the Fungal Flux codebase - a modern React e-commerce application for mushroom growing supplies with comprehensive admin inventory management.
```bash
npm run dev # Start development server with Vite
npm run build # Build production bundle
npm run lint # Run ESLint for code linting
npm run preview # Preview production build locally
npm run db:types # Generate TypeScript types from Supabase schema
```
The application uses React Context API with useReducer for cart state management. The CartContext provides:
Uses Supabase for backend services with auto-generated TypeScript types:
```typescript
// Service layer pattern
productService.getAll() // Get all products
productService.getFeatured() // Get featured products
productService.getByCategory(category) // Get products by category
```
**Important:** Run `npm run db:types` after any database schema changes to regenerate TypeScript types.
The application supports three main product categories:
Components follow a consistent prop-drilling pattern:
Required Supabase configuration (`.env` file):
```
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
```
Access in code via `import.meta.env.VITE_*`
**Role-based access control** with three roles:
**Key components:**
```
/admin - Dashboard overview
/admin/products - Product list and management
/admin/products/add - Add new product
/admin/products/:id - Product details
/admin/products/:id/edit - Edit product
/admin/inventory - Stock management
/admin/analytics - Sales and inventory reports
/admin/settings - Admin configuration
```
The admin system requires a `profiles` table:
```sql
CREATE TABLE profiles (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
user_id UUID REFERENCES auth.users NOT NULL,
full_name TEXT,
avatar_url TEXT,
role TEXT DEFAULT 'customer' CHECK (role IN ('customer', 'admin', 'super_admin')),
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
```
1. Update Supabase schema via SQL editor or migrations
2. Run `npm run db:types` to regenerate TypeScript types
3. Update service layer functions in `src/lib/supabase.ts` if needed
4. Update component interfaces and type imports
All navigation uses React Router's programmatic navigation with scroll-to-top behavior. Use `navigate()` from `useNavigate` hook.
Cart state is managed entirely in memory - no persistence between sessions. To add persistence, implement localStorage or database sync in CartContext.
1. User logs in via unified login form
2. Auth system checks user role from `profiles` table
3. Post-login redirect:
- Admin/Super Admin → `/admin`
- Customer → `/`
4. Protected routes verify role on access
Demo credentials available in development mode via login page for testing admin functionality.
1. Update category enum in database
2. Add category to service layer filtering
3. Update UI category filters in ShopPage
4. Run `npm run db:types`
1. Create page component in `src/pages/admin/`
2. Add route in admin router section
3. Wrap with `ProtectedRoute` and specify required role
4. Add navigation link in admin sidebar
1. Update Supabase schema
2. Run `npm run db:types`
3. Update ProductCard and ProductModal components if UI changes needed
4. Update service layer functions in `src/lib/supabase.ts`
1. Update role CHECK constraint in `profiles` table
2. Add role check helpers to `useAuth` hook
3. Update `ProtectedRoute` role validation logic
4. Update post-login redirect logic in authentication flow
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/fungal-flux-e-commerce-development/raw