Una página web tipo e-commerce de venta de productos artesanales hechos mediante impresión 3D.
Generated Prompt
## APPLICATION OVERVIEW This project is an e-commerce web application designed to sell 3D-printed artisanal products. The platform aims to provide customers with a warm and inviting shopping experience, featuring a minimalist design that highlights the uniqueness of each product while ensuring a smooth purchasing process. ## CORE FEATURES 1. **Product Catalog**: A visually appealing display of 3D-printed artisanal products with images, descriptions, and prices. 2. **Shopping Cart**: Users can easily add products to their cart, view the cart contents, and proceed to checkout. 3. **Coupon System**: Customers can apply discount coupons during checkout for special promotions. 4. **Contact Form**: A dedicated section for users to submit inquiries or feedback, enhancing customer engagement. 5. **Responsive Design**: The application will be fully responsive, providing an optimal experience across various devices (desktops, tablets, and smartphones). 6. **User Account Management**: Optional feature allowing users to create an account to track orders and save favorite products. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on a warm and home-like atmosphere. - **Color Mode**: Light theme with subtle colors, primarily using very light orange and bone white for backgrounds, with dark text for readability. - **Layout**: - **Header**: Includes logo, navigation links (Home, Shop, About, Contact), and a cart icon. - **Hero Section**: A welcoming image or slideshow showcasing featured products with a prominent call-to-action (CTA) button. - **Product Sections**: Grid layout for product listings with space for product images, descriptions, and an "Add to Cart" button. - **Footer**: Contains links to social media, contact information, and additional resources. - **Typography**: - Primary Font: A clean sans-serif font for headings (e.g., Montserrat or Lato). - Secondary Font: A simple serif font for body text (e.g., Merriweather), ensuring readability and a warm feel. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for utility-first styling approach - **UI Components**: Using shadcn/ui for pre-built components - **State Management**: React Context API for managing cart state and user information ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React app using Create React App with TypeScript and install Tailwind CSS. 2. **Create Basic Layout**: Develop the main layout structure, including Header, Hero Section, Product Listings, and Footer. 3. **Implement Product Catalog**: Design and implement the product catalog component, fetching product data from a mock API or local JSON file. 4. **Build Shopping Cart Functionality**: Create a cart context for managing cart state, enabling users to add, remove, and view products in their cart. 5. **Develop Coupon System**: Implement functionality to apply coupons and adjust prices accordingly during checkout. 6. **Design Contact Form**: Create a contact form component that captures user inquiries and integrates with a backend service or email API for submission. 7. **Ensure Responsiveness**: Use Tailwind CSS to make the application responsive, ensuring proper display on all device sizes. 8. **Testing**: Conduct thorough testing of all features, including usability testing to ensure a smooth user experience. ## USER EXPERIENCE Users will enter the application through a clean and inviting homepage featuring highlighted products. They can easily browse the product catalog, add items to their cart, and apply any available coupons during checkout. The responsive design ensures that users have a consistent experience whether they're using a phone or a computer. The contact form allows for seamless communication with the business, enhancing customer support. Overall, the application focuses on creating a friendly and straightforward shopping journey for users.
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!
