Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a comprehensive web application for a local sanitary ware and plumbing business. It serves as an e-commerce platform allowing customers to browse products, manage their shopping cart, and complete purchases via a cash-on-delivery checkout process. The application will also feature an admin dashboard for product management and order tracking.

## CORE FEATURES
1. **User Authentication**: Single Super Admin access via JWT for secure management of the application.
2. **Product Management**: CRUD operations for products, allowing the admin to manage titles, descriptions, prices, stock quantities, categories, and images easily.
3. **Customer Shopping Experience**: Pages for Home, Shop/Catalog, Product Details, Cart, and Checkout, providing a seamless browsing and purchasing experience.
4. **Order Management Dashboard**: Admin can view and manage all orders with the ability to track their statuses (Pending, Confirmed, Shipped, Cancelled).
5. **Automated Notifications**: Integration with Brevo API to send automated order confirmation emails to customers after checkout.
6. **SEO Optimization**: The application will be optimized for search engines and will include setup for integrating Meta Pixel and TikTok API for conversion tracking.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will consist of a header with navigation links, a main content area displaying products, and a footer with contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent and modern UI design.
- **State Management**: Zustand for cart management and global states; React Query for data fetching.

## IMPLEMENTATION STEPS
1. **Setup Project Environment**: Initialize a Next.js project with TypeScript and Tailwind CSS.
2. **Create Database Schema**: Design and implement PostgreSQL schema for products and orders.
3. **Implement Backend API**: Develop RESTful API endpoints for product and order management using Node.js with Express or NestJS.
4. **Build Frontend Pages**:
   - **Home Page**: Include promotional banners and featured products.
   - **Shop/Catalog Page**: Implement a grid view with filtering options.
   - **Product Details Page**: Display high-quality images, descriptions, and pricing.
   - **Cart and Checkout Pages**: Build forms for user input and implement cash-on-delivery checkout.
5. **Integrate State Management**: Use Zustand for managing cart state and React Query for API calls.
6. **Setup Admin Dashboard**: Create a separate admin panel for managing products and orders, including export functionality for orders.

## USER EXPERIENCE
The application will provide an intuitive user experience with easy navigation through product categories. Customers will be able to add items to their cart effortlessly and complete their purchase with a simple checkout form. The admin dashboard will be user-friendly, allowing the admin to efficiently manage product listings and track orders. Overall, the design will prioritize simplicity and ease of use, ensuring a smooth experience for both customers and administrators.