You're now implementing the data persistence layer for the "{project_name}" application.

Project description: {project_description}
Tech stack: {tech_stack}

# Reference Implementation

Here is a successful implementation of a similar project to use as reference. Follow these patterns for structure, naming conventions, and code organization:

{reference_code}

{description_reference_code}

# Current Project Structure
The current project has the following structure:

{project_structure}
CRITICAL DATA PERSISTENCE RULES:
1. Form Submissions:
   - MUST save ALL user interactions to Supabase
   - Show loading + success/error states
   - Instant UI feedback

2. Implementation:
   - COPY EXACT reference patterns
   - SAME table structure
   - IDENTICAL error handling
   - MATCH loading states

3. Requirements:
   - TypeScript types for all data
   - Validate all inputs
   - Disable during processing
   - Toast notifications
   - Error boundaries
CRITICAL IMPLEMENTATION RULES:
1. ONLY implement features that are EXPLICITLY present in the reference code above
2. DO NOT add any additional features, tables, or functionality not shown in the reference
3. Follow the EXACT same file structure and component organization
4. Use the SAME naming conventions for components, functions, and variables
5. Implement the SAME level of error handling and validation
6. If the reference has only cart functionality, DO NOT add wishlist or other features
7. Keep the implementation FOCUSED and MINIMAL - only what's in the reference
8. Implement EXACTLY the same data models and table structure as the reference
9. Use the SAME database operations (insert, update, delete) as shown in the reference
10. Copy the SAME error handling patterns for database operations

# EXISTING PROJECT FILES
Here are the key files already in the project that you should reference and build upon:

{existing_files}
FIRST STEP (CRITICAL): 
1. Compare reference_code with existing_files to identify ALL missing files and components
2. Create a complete list of all files that need to be created or modified
3. Before writing any code, verify that ALL critical Next.js files (layout.tsx, page.tsx) are included
4. Pay special attention to maintaining the existing directory and component structure
The project scaffold, UI components, authentication system, and SQL queries (with policies) are already created. Now you need to implement the user interaction functionality with proper data persistence and UI updates.
IMPORTANT INSTRUCTIONS:
- DO NOT include SQL files or database schema in your response as they are already generated
- Focus ONLY on implementing data persistence in the relevant frontend files

For Supabase:
1. Define database schema with appropriate tables, relationships, and indexes
2. Create SQL migrations for the schema
3. Implement Row Level Security policies for data access control
4. Create TypeScript types for database models
5. Implement data access services/hooks for CRUD operations
6. Set up real-time subscriptions where appropriate



Make sure to:
1. Design a normalized database schema that avoids redundancy
2. Implement proper error handling for database operations
3. Consider performance implications of your data model
4. Add validation for data operations
5. Include proper TypeScript typing throughout
6. Fully integrate with the existing authentication system

# Data Implementation Steps
1. Review reference data patterns:
   - Check how user interactions are saved
   - Note real-time update patterns
   - Document state management approach

2. Compare with current implementation:
   - Verify table structures match
   - Check existing data operations
   - Identify missing functionality

3. Implementation Focus:
   - Add ONLY data operations present in reference
   - Match exact table structure
   - Use same state management patterns
   - NO additional data features

Remember to structure your response as a proper JSON object with file paths as keys and file contents as values. 



ULTRA IMPORTANT THING :

1. Data Persistence Files:
   - Save all changes(like user interactions) to Supabase tables, on item selection/deselection
   - Database schema migrations
   - API routes for data operations
   - Data fetching hooks/utilities
   - Sync user data with Supabase in real-time, also properly show on ui
   - Ensure data consistency
2.  User Actions and UI Feedback:
   - Show immediate visual feedback for all user actions
   - For an example, when user clicks on an interactive element, then changes should be reflected on ui 
   - Display loading states during operations
   - Show success/error notifications
   - Update related UI elements (e.g. counters, lists)
3.  When a user performs an action (e.g., selecting/deselecting items):
   - Update the relevant table in Supabase immediately
   - Show loading state during the operation
   - Display success/error notifications
   - Update UI counters/badges in real-time
   - Ensure the changes are reflected in the relevant views
4. State Management:
   - Implement proper state updates after successful operations
   - Maintain consistency across different views

IMPLEMENTATION GOAL: DATA PERSISTENCE FOR USER-ACTIONED STATE
Context:
Authentication and UI components are already in place (login, signup, protected views, and core layout are functional).

Your Task:
Focus solely on implementing data persistence for a specific user-interacted feature. When the user performs an action (e.g., button click or selection):

Update the relevant state on the frontend to reflect changes in real-time

Persist the updated data to the backend, linked to the authenticated user

On page reload or user login, retrieve and display the persisted data accurately

Outcome:
After completing this step, the app should have a seamless flow combining UI, authentication, and backend-linked data persistence for user-driven interactions.
You have to make sure that , you are doing thing on existing codes.

CRITICAL ERROR PREVENTION:
1. NEVER reference files that aren't explicitly created
2. ALWAYS verify component imports resolve to files you've created
3. NEVER mix conflicting client libraries (e.g., only use @supabase/auth-helpers-nextjs for auth)
4. Make sure to use proper supabase functions , imported from correct package & used properly.
6. NEVER use shorthand imports , wrong functions for Supabase client creation


