Creator-Brand-Application - You are a senior full-stack architect. Do NOT ask clarifying questions. Make reasonable assumptions when needed and...
Generated Prompt
## APPLICATION OVERVIEW
CollabHub is a production-ready Creator–Brand Collaboration SaaS platform designed to facilitate seamless interactions between creators and brands. The platform enables users to manage their collaborations, campaigns, and subscriptions while providing analytics and real-time notifications to enhance user engagement and streamline processes.
## CORE FEATURES
1. **User Authentication & Role Management**: Users can sign up and log in as Creators, Brands, or Admins, with role-based access to different dashboards and functionalities using Supabase (Postgres) for authentication and authorization and role management by connecting to Supabase's project named "Creator-Brand-Application".
2. **Dashboards**: Three distinct dashboards for Creators, Brands, and Admins, each tailored to their specific needs, providing insights and management tools.
3. **Collaboration System**: A structured flow for creating campaigns, submitting applications, and verifying collaborations, ensuring secure and efficient interactions.
4. **Real-Time Notifications**: Instant updates on collaboration applications, approvals, and payment verifications, enhancing communication and user engagement.
5. **Blog System**: A dedicated space for writing and categorizing posts, allowing for role-based contributions and moderation by Admins.
6. **Subscription Model**: Integration with PayU for various subscription plans, locking premium features for enhanced user experiences.
## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing a deep navy primary color (#0B1F3A) and teal accent (#14B8A6).
- **Layout**: Sidebar navigation for dashboard access, complemented by a top navbar for additional functionalities. The design is fully responsive to ensure usability across devices.
- **Typography**: Use of the Inter font with a clear hierarchy to enhance readability and user experience.
## TECHNICAL REQUIREMENTS
- **Framework**: Next.js (App Router) with TypeScript
- **Styling**: Tailwind CSS for responsive design and styling
- **UI Components**: Utilize shadcn/ui components for consistent UI elements
- **State Management**: Zustand for lightweight global state management and React Query for data fetching
- **Supabase**: For authorization, authentication of users and their roles.
## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Create the required folder structure as specified:
```
/app
/(auth)
/(dashboard)
/(marketing)
/components
/lib
/types
/hooks
/services
/context
```
2. **Integrate Supabase**: Connect to the existing Supabase project "Creator-Brand-Application" and configure authentication, database, and real-time features.
3. **Develop Authentication Flows**: Create the Signup and Login pages with role management, session persistence, and redirect logic based on user roles.
4. **Build Dashboards**: Implement the Creator, Brand, and Admin dashboards with their respective features, utilizing Recharts for analytics visualization.
5. **Create Collaboration System**: Set up database tables for campaigns, collaboration_requests, collaborations, and payments with appropriate RLS policies.
6. **Implement Real-Time Notifications**: Utilize Supabase Realtime to manage and display notifications within the app.
7. **Develop Blog System**: Create tables for posts, categories, and post statuses, enabling role-based posting and admin moderation.
8. **Integrate Subscription Model**: Set up PayU for subscription management, including free and premium plans, and implement middleware for protecting premium routes.
## USER EXPERIENCE
Users will experience a seamless onboarding process through intuitive forms for signup and login. Upon logging in, they will be redirected to their respective dashboards where they can view relevant data and take action. The collaboration flow will guide users through campaign creation and application processes, while real-time notifications will keep them informed of important updates. The blog system will allow for easy content creation and categorization, further enhancing the platform's usability. The minimalist design ensures that users can navigate effortlessly, focusing on their tasks without distraction.Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
