Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
FOODORA is a complete premium food e-commerce web application designed to provide an elegant shopping experience for food lovers. This platform allows users to browse, order, and manage various food products, while also enabling an intuitive admin interface for managing orders, products, and customer data.

## CORE FEATURES
1. **Home Page**: Engaging cinematic hero section with a prominent tagline, featured products, categories, and promotional sections to attract users.
2. **Shop**: A comprehensive product grid with filters, sorting options, and detailed product cards showcasing ratings, prices, and favorite options.
3. **Product Details**: In-depth view of each product with high-quality images, detailed descriptions, ratings, and easy add-to-cart functionality.
4. **Cart and Checkout**: Functional cart with real-time updates, easy quantity adjustments, delivery fee calculations, and a streamlined checkout process supporting multiple payment methods.
5. **User Account Management**: Secure authentication for users to manage their profiles, view order history, and maintain favorite products.
6. **Admin Dashboard**: A fully functional admin interface for managing orders, products, and customer analytics, ensuring seamless operations.

## 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**: A structured grid layout for product displays, with cinematic sections for hero and promotional content, ensuring a seamless flow between browsing and purchasing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Lucide React for icons, shadcn/ui for other components
- **Animation**: Framer Motion for smooth transitions and background animations
- **Database**: MongoDB with Mongoose for data management
- **Authentication**: Real authentication architecture, including protected routes and different user roles (customer and admin)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with Vite and install all necessary dependencies including TypeScript, Tailwind CSS, Lucide React, and Framer Motion.
2. **Design Components**: Create reusable components for buttons, cards, and modals with the specified typography and border radius.
3. **Implement Routing**: Set up routing for all pages, including home, shop, product details, cart, checkout, login, register, account, orders, about, contact, and admin dashboard.
4. **Build Home Page**: Develop the home page with a cinematic hero section, featured products, categories, and promotional sections.
5. **Develop Shop and Product Details Pages**: Implement the product grid, category filters, and detailed product view with all necessary functionalities.
6. **Create Cart and Checkout Functionality**: Implement cart logic with state management, ensuring users can add, remove, and modify their cart items. Set up the checkout process to handle customer information and payment methods securely.
7. **User Authentication**: Develop user authentication, including sign up, login, and account management, ensuring secure access to user data.
8. **Admin Dashboard**: Build a complete admin interface with functionalities to manage orders, products, and view analytics.
9. **Background Animations**: Create and integrate animated background components for an engaging user experience.
10. **Testing and Deployment**: Thoroughly test the application for responsiveness and functionality before deploying it to a live environment.

## USER EXPERIENCE
Users will experience a fluid and engaging interface designed for easy navigation and interaction. The premium food imagery and cinematic compositions will captivate users, while seamless transitions and animations will enhance the overall experience. The intuitive cart and checkout process will facilitate quick purchases, and user account features will allow for personalized management of their preferences and order history. Admin users will benefit from a robust dashboard that simplifies order and product management, ensuring operational efficiency. 

This comprehensive e-commerce web application will align perfectly with the high-end food marketplace vision while maintaining a minimalist aesthetic.