Buatkan website kaya tokopedia
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to be an e-commerce platform similar to Tokopedia, allowing users to browse products, manage their accounts, and make purchases seamlessly. The application will focus on providing a clean, user-friendly interface with minimalist design principles, enhancing user engagement and conversion rates. ## CORE FEATURES 1. **User Authentication**: Secure login and registration system for users to create accounts, manage profiles, and track orders. 2. **Product Listings**: A searchable and filterable catalog of products, complete with images, descriptions, prices, and categories. 3. **Shopping Cart**: A feature allowing users to add products, view their selections, and proceed to checkout. 4. **Order Management**: Users can view their order history, track shipments, and manage returns. 5. **Admin Dashboard**: A backend interface for administrators to manage products, orders, and user accounts effectively. 6. **Responsive Design**: Ensures that the application is accessible and user-friendly on all devices, from desktops to mobile. ## 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 main layout will feature a top navigation bar for easy access to product categories, a central area for product listings, and a sidebar for filters and search options. The footer will include links to customer service, terms of service, and social media. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux (for managing application state) ## IMPLEMENTATION STEPS 1. **Set Up the React Project**: Initialize a new React project using Create React App with TypeScript template. 2. **Install Dependencies**: Install Tailwind CSS, Redux, and shadcn/ui for UI components. 3. **Design the Layout**: Create the main layout with a navigation bar, footer, and central content area. 4. **Develop User Authentication**: Implement user registration and login functionalities using Firebase or a similar service for backend support. 5. **Create Product Listings**: Set up a product API or mock data, and render product cards in the central area of the app. 6. **Implement the Shopping Cart**: Create a cart context to manage product selections and enable checkout functionality. 7. **Build the Admin Dashboard**: Develop a separate section for admins to manage products and view orders. 8. **Ensure Responsiveness**: Use Tailwind CSS’s responsive utilities to adjust the layout and components for different screen sizes. 9. **Test User Interactions**: Conduct thorough testing of all user flows to ensure a smooth experience. ## USER EXPERIENCE The user experience will prioritize simplicity and efficiency. Users will be greeted with a clean homepage featuring highlighted products and categories. Navigation will be straightforward, with an intuitive search feature and quick access to the shopping cart. The checkout process will be streamlined to minimize friction, encouraging users to complete their purchases. Responsive design will ensure that all interactions are seamless, whether on a desktop or mobile device.
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!
