Copilot instructions

1---
2applyTo: '{package.json,vite.config.ts,tsconfig.json,tailwind.config.ts,src/**}'
3---
4# Development Workflow & Commands
5 
6## ESSENTIAL COMMANDS
7 
8```bash
9npm run dev          # Start development server (port 8080)
10npm run build        # Production build
11npm run lint         # Run ESLint - MUST pass before shipping
12npm run preview      # Preview production build locally
13npm install          # Install dependencies
14```
15 
16## CRITICAL WORKFLOW RULES
17 
18### BEFORE SHIPPING:
19- Run `npm run lint` and fix all issues
20- Test responsive design on mobile/desktop
21- Verify accessibility contrast ratios
22- Ensure no console errors in browser
23 
24### NEVER SHIP:
25- Code with ESLint errors
26- Untested responsive layouts
27- Poor accessibility (contrast violations)
28- Console errors or warnings
29 
30## Framework Stack
31- **React 18.3.1** with TypeScript for UI
32- **Vite 5.4.1** as build tool with SWC for fast compilation
33- **shadcn/ui** component library built on Radix UI primitives
34- **Tailwind CSS 3.4.11** for styling with custom design system
35- **React Router DOM v6** for client-side routing
36- **TanStack Query** for server state management
37- **Supabase 2.80.0** for backend, authentication, and database
38- **React Hook Form + Zod** for form handling and validation
39 
40## Development Commands
41 
42### Core Development
43- `npm run dev` - Start development server on port 8080
44- `npm run build` - Create production build
45- `npm run build:dev` - Create development build
46- `npm run lint` - Run ESLint linter
47- `npm run preview` - Preview production build locally
48 
49### Package Management
50- `npm install` - Install dependencies (or use `bun install` for faster installs)
51 
52## Key Architecture Patterns
53 
54### Import Aliases (configured in vite.config.ts)
55- `@/` maps to `./src/`
56- `@/components` for components
57- `@/lib` for utilities
58- `@/hooks` for custom hooks
59- `@/integrations/supabase` for Supabase client and types
60 
61### Routing Structure
62Routes are defined in `src/App.tsx`. Add new routes above the catch-all `*` route:
63```tsx
64<Routes>
65  <Route path="/" element={<Index />} />
66  {/* ADD NEW ROUTES HERE */}
67  <Route path="*" element={<NotFound />} />
68</Routes>
69```
70 
71## Supabase Integration
72 
73### Setup
74The boilerplate comes with Supabase pre-configured:
75 
761. **Install Supabase** (already in package.json):
77```bash
78   npm i @supabase/supabase-js
79```
80 
812. **Environment Configuration**:
82   Copy `.env.example` to `.env` and add your Supabase credentials:
83```bash
84   VITE_SUPABASE_URL=https://your-project.supabase.co
85   VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key
86```
87 
883. **Client Location**: `src/integrations/supabase/client.ts`
894. **Type Definitions**: `src/integrations/supabase/types.ts`
90 
91### Usage Patterns
92 
93**Data Fetching with TanStack Query:**
94```typescript
95import { useQuery } from "@tanstack/react-query";
96import { supabase } from "@/integrations/supabase/client";
97 
98export const usePosts = () => {
99  return useQuery({
100    queryKey: ['posts'],
101    queryFn: async () => {
102      const { data, error } = await supabase
103        .from('posts')
104        .select('*')
105        .eq('published', true);
106      
107      if (error) throw error;
108      return data;
109    }
110  });
111};
112```
113 
114**Mutations:**
115```typescript
116import { useMutation, useQueryClient } from "@tanstack/react-query";
117import { supabase } from "@/integrations/supabase/client";
118 
119export const useCreatePost = () => {
120  const queryClient = useQueryClient();
121  
122  return useMutation({
123    mutationFn: async (newPost) => {
124      const { data, error } = await supabase
125        .from('posts')
126        .insert(newPost)
127        .select()
128        .single();
129      
130      if (error) throw error;
131      return data;
132    },
133    onSuccess: () => {
134      queryClient.invalidateQueries({ queryKey: ['posts'] });
135    }
136  });
137};
138```
139 
140**Authentication:**
141```typescript
142// Sign up
143const { data, error } = await supabase.auth.signUp({
144  email: 'user@example.com',
145  password: 'securepassword'
146});
147 
148// Sign in
149const { data, error } = await supabase.auth.signInWithPassword({
150  email: 'user@example.com',
151  password: 'securepassword'
152});
153 
154// Get current user
155const { data: { user } } = await supabase.auth.getUser();
156 
157// Sign out
158await supabase.auth.signOut();
159```
160 
161**Type Safety:**
162```typescript
163import type { Tables, TablesInsert, TablesUpdate } from "@/integrations/supabase/types";
164 
165// Use generated types
166type Post = Tables<'posts'>;
167type NewPost = TablesInsert<'posts'>;
168type UpdatePost = TablesUpdate<'posts'>;
169```
170 
171### Best Practices
172- **Always use TanStack Query** for data fetching and mutations
173- **Handle errors gracefully** with try-catch blocks or error boundaries
174- **Use TypeScript types** from `@/integrations/supabase/types`
175- **Enable Row Level Security (RLS)** on all Supabase tables
176- **Never expose sensitive credentials** - only use public keys in environment variables
177 
178## Environment Variables Security Warning
179**CRITICAL**: This is a **client-side application**. All environment variables with the `VITE_` prefix will be **bundled and exposed** in the final build. 
180 
181**Never include sensitive data in environment variables:**
182- API secrets, private keys, database passwords, service account credentials
183 
184**Only use environment variables for:**
185- Public API URLs, public configuration values, feature flags, public keys (like Supabase anon keys)
186 
187## Configuration Files
188 
189- `vite.config.ts` - Vite configuration with path aliases and port 8080
190- `components.json` - shadcn/ui configuration with default style and slate base color
191- `tailwind.config.ts` - Tailwind configuration with dark mode support
192- `tsconfig.json` - TypeScript configuration with strict mode
193 
194## Testing & Quality
195- ESLint configured with React and TypeScript rules
196- No test framework currently configured - determine testing approach from codebase if tests are needed
197 
198## Common Patterns
199- Use TypeScript interfaces for type safety
200- Implement responsive design mobile-first
201- Follow React Hook Form patterns with Zod validation for forms
202- Use TanStack Query for all Supabase data fetching and mutations
203- Import Supabase client from `@/integrations/supabase/client`
204- Use generated types from `@/integrations/supabase/types`
205- Import UI components from `@/components/ui/`
206- Use the toast system via `use-toast` hook for notifications
207 
208## Landing Page Design Guidelines
209Before generating the landing page, check the following:
210 
211What is the primary CTA (call-to-action)?
212(e.g. submit an idea, request a demo, sign up)
213 
214Should the hero section include a form or another interactive element?
215(e.g. submission form, email input, demo request)
216 
217What is the core value proposition or message?
218(e.g. competitor analysis, product validation, AI-powered research)
219 
220What visual tone should the landing page have?
221(e.g. clean and professional, playful and bold, minimalistic)
222 
223Any preferred colors or gradients?
224(e.g. purple/blue gradient, dark theme, pastel tones)
225 
226Should the design include subtle animations or stay static?
227Do you want to follow an indie maker aesthetic or a more corporate look?
228 
229## Quality Checklist
230 
231Before completing any code implementation, ensure:
232 
233### ✅ Code Architecture Quality
234- [ ] **No monolithic components** - Each component under 300 lines with single responsibility
235- [ ] **Logic extraction** - Reusable logic moved to custom hooks, not duplicated
236- [ ] **Type safety** - Shared interfaces defined in `lib/types.ts` and reused
237- [ ] **Service layer** - API calls abstracted to service functions, not inline
238- [ ] **Proper imports** - Using path aliases (@/) and organized import groups
239- [ ] **Validation schemas** - Zod schemas shared and reused across components
240- [ ] **Component composition** - Complex UI built from smaller, focused components
241 
242### ✅ Design Quality  
243- [ ] Uses sophisticated color palette (not default grays)
244- [ ] Has proper visual hierarchy with varied typography scales
245- [ ] Includes subtle animations and micro-interactions
246- [ ] Features generous whitespace and purposeful spacing
247- [ ] All interactive elements have clear hover/active states
248- [ ] **Accessibility standards are met (proper contrast, focus states)**
249- [ ] Mobile experience is thoughtfully designed
250- [ ] Maintains consistent color story throughout
251 
252### ❌ NEVER Ship Code That:
253- Contains components over 300 lines mixing multiple concerns
254- Has duplicated logic that could be extracted to hooks
255- Uses inline API calls instead of service layer
256- Lacks proper TypeScript interfaces
257- Has accessibility contrast violations  
258- Contains copy-pasted code blocks
259- Mixes business logic with presentation layer
260 
261## Important Reminders
262- Do what has been asked; nothing more, nothing less
263- NEVER create files unless they're absolutely necessary for achieving your goal
264- ALWAYS prefer editing an existing file to creating a new one
265- NEVER proactively create documentation files (*.md) or README files. Only create documentation files if explicitly requested by the User