Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a full-stack e-commerce web application designed to provide a user-friendly shopping experience, similar to Flipkart. It will include features such as product listings, a shopping cart, user authentication, and an admin panel for managing products, all built with modern technologies.

## CORE FEATURES
1. **Product Listings**: A home page displaying products in a grid layout, allowing users to browse and quickly find items of interest.
2. **User Authentication**: Secure login and signup functionality using JWT, enabling users to manage their accounts and view their order history.
3. **Product Detail Pages**: Detailed views of products featuring images, pricing, descriptions, and user reviews, enhancing the shopping experience.
4. **Cart and Checkout**: Users can add items to their cart and proceed to a streamlined checkout process, ensuring an efficient purchasing experience.
5. **Admin Panel**: A dedicated interface for administrators to add, edit, or delete products, manage orders, and view user data.
6. **Search and Filter**: Advanced search functionality allowing users to filter products by price, category, and rating, making it easier to find desired items.

## 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 consists of a responsive grid for product listings on the home page, with a fixed navbar for easy navigation. Each product will be presented in a card format, with ample spacing to maintain a clean look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (optional, depending on complexity)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize the React project with TypeScript and install necessary dependencies (React Router, Axios, Tailwind CSS).
2. **Create Folder Structure**: Organize the project into components, pages, services, and styles.
3. **Build the Frontend**:
   - Develop the Navbar with logo, search bar, login, and cart.
   - Create the Home Page to display product listings using the grid layout.
   - Implement Product Detail Pages with necessary components.
   - Integrate user authentication flows (login/signup).
4. **Set Up the Backend**:
   - Initialize a Node.js project with Express.
   - Create REST API endpoints for products, users, and orders.
   - Implement JWT authentication for secure user sessions.
   - Develop CRUD operations for product management.
5. **Connect the Database**: Set up MongoDB and define collections for Users, Products, Orders, and Cart.
6. **Implement Features**: Add search and filter functionality, cart management, and order history.
7. **Create the Admin Panel**: Build an admin interface for product management.
8. **Integrate Payment System**: Implement dummy payment integration or Razorpay for processing payments.
9. **Testing**: Conduct thorough testing for both frontend and backend functionalities.
10. **Deployment**: Deploy the application using a suitable platform (e.g., Heroku, Vercel).

## USER EXPERIENCE
Users will have a seamless experience browsing products through intuitive navigation. They can easily filter and search for items, view detailed product information, add products to their cart, and proceed to checkout with minimal friction. The admin panel will allow straightforward management of the product catalog, ensuring the application remains up-to-date and user-friendly.