Site para hambúrgueria profissional e com cardápio, carrinho, e localização para entrega
Generated Prompt
## APPLICATION OVERVIEW This web application serves as an online platform for a professional hamburger restaurant, featuring an interactive menu, shopping cart functionality, and delivery location services. The goal is to provide users with a seamless ordering experience while maintaining a clean and minimalist aesthetic. ## CORE FEATURES 1. **Interactive Menu**: A dynamic menu that showcases various hamburger options, ingredients, and prices, allowing users to easily browse and select their favorite items. 2. **Shopping Cart**: An intuitive shopping cart that allows users to add, remove, and modify items before proceeding to checkout, ensuring a smooth purchasing experience. 3. **Delivery Location Finder**: A feature that enables users to input their delivery address and find available delivery options, enhancing convenience. 4. **Order Tracking**: A real-time order tracking system that keeps customers informed about the status of their order from preparation to delivery. 5. **User Accounts**: Optional user accounts for saving favorite orders, managing delivery addresses, and accessing order history. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design should embrace a clean and simple aesthetic with ample white space, allowing content to breathe while emphasizing key elements. - **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant viewing experience. - **Layout**: A single-page layout featuring a top navigation bar, a hero section for promotions, the interactive menu section, shopping cart summary, and footer with contact information. - **Typography**: Use a sans-serif font such as "Roboto" for body text and "Montserrat" for headings, ensuring a clear hierarchy with larger sizes for headings and adequate spacing between text elements. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for building a robust and type-safe application. - **Styling**: Tailwind CSS for quick and responsive styling, allowing for ease of customization and utility-first design. - **UI Components**: Utilize shadcn/ui for pre-designed components to maintain a consistent look and feel across the application. - **State Management**: Consider using React Context API or Zustand for handling state, especially for managing the shopping cart and user sessions. ## IMPLEMENTATION STEPS 1. **Set Up the Development Environment**: Create a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui. 2. **Define the Project Structure**: Organize the project into components (Menu, Cart, Header, Footer, etc.), pages, and styles to maintain clarity. 3. **Design the Layout**: Implement the main layout structure with a responsive navbar, hero section, and footer using Tailwind CSS for styling. 4. **Develop the Interactive Menu**: Create the menu component that fetches hamburger data (can use static data or integrate with an API) and allows users to select items. 5. **Implement Shopping Cart Functionality**: Develop the shopping cart component to manage item additions, total calculations, and checkout process. 6. **Integrate Delivery Location Finder**: Implement geolocation and address input features to allow users to enter their delivery details and check service availability. 7. **Add Order Tracking**: Build an order tracking component that updates the status based on user orders and provides real-time updates. 8. **Testing and Optimization**: Conduct thorough testing for usability, responsiveness, and performance across different devices and browsers. ## USER EXPERIENCE Users will interact with a simple and intuitive interface, starting from the homepage where they can view the menu items. They can easily add items to their cart and proceed to checkout with minimal clicks. The delivery location feature will guide them through the order placement process, ensuring they feel informed with real-time updates on their order status. The overall experience focuses on seamless navigation, clarity, and responsiveness to enhance customer satisfaction.
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!
