Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web platform designed for creators and brands to collaborate seamlessly. Users can sign up or log in, allowing them to interact, collaborate on projects, and manage their activities through dedicated dashboards. The platform features real-time notifications and a blog section for updates, all while ensuring a smooth user experience with a minimalist design.

## CORE FEATURES
- **User Authentication**: Secure login and signup process using Supabase for authentication and authorization based on RBAC roles selected during registration.
- **Dashboards**: Three distinct dashboards for creators, brands, and admins, showcasing metrics and analytics of user activities, collaboration results, and overall engagement.
- **Real-time Notifications**: Integration of notifications through the website, email, and WhatsApp to keep users updated on collaboration statuses and important events.
- **Blog Section**: A moderated area for creators, brands, and admins to post updates and news, organized into categories for easy navigation.
- **Subscription Model**: A payment system using PayU to manage subscriptions, with certain features locked behind a paywall, ensuring creators are compensated for their collaborations once verified by brands.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing cleanliness and simplicity, with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme featuring dark text on light backgrounds, ensuring high contrast and ease of reading.
- **Layout**: A responsive grid layout that adjusts for desktop and mobile views, with a sidebar for navigation and main content areas for dashboards and blog sections.
- **Typography**: Use a modern sans-serif font like "Inter" for body text and headings, establishing a clear hierarchy with larger sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: Next.js with TypeScript for the frontend to ensure type safety and scalability.
- **Styling**: Tailwind CSS for utility-first styling, ensuring rapid design and consistency across components.
- **UI Components**: Utilize shadcn/ui for pre-built components to accelerate development and maintain a cohesive design language.
- **State Management**: Consider using Zustand or React Query for efficient state management and data fetching.

## IMPLEMENTATION STEPS
1. **Set up Next.js Application**: Create a new Next.js project with TypeScript support using the command `npx create-next-app@latest --typescript`.
2. **Integrate Supabase**: Configure Supabase for user authentication, including setting up RBAC roles during the signup process.
3. **Design Dashboards**: Implement the three dashboards, ensuring each one has the appropriate metrics displayed using charting libraries (e.g., Chart.js or Recharts).
4. **Real-time Notifications Setup**: Use WebSockets or similar technology to enable real-time notifications across the platform.
5. **Blog Section Implementation**: Create a CRUD interface for the blog section with moderation capabilities and categorization options.
6. **Payment Integration**: Set up PayU for managing subscriptions, ensuring secure handling of payment information and subscription status tracking.
7. **Responsive Design**: Ensure the application is fully responsive, testing across various devices and screen sizes.

## USER EXPERIENCE
Users will experience a streamlined onboarding process with easy navigation through the login and signup flows. After logging in, creators and brands will access their tailored dashboards, providing them with analytics and collaboration tools. They will receive real-time notifications for important updates via their preferred channels. The blog section will allow them to share and read updates, enhancing community engagement. The subscription features will be straightforward, with clear calls to action for payment, ensuring a seamless experience when accessing premium content.