Una pagina web tipo e-commerce sobre juegos de mesa desarrollada en español, tiene las funciones de carrito, uso de cupones, formulario de...
Generated Prompt
## APPLICATION OVERVIEW This web application is an e-commerce platform designed for selling board games, featuring a D&D guild theme. The site will be developed in Spanish, providing users with a seamless shopping experience that includes a shopping cart, coupon functionality, and a contact form. The minimalist design will enhance usability, ensuring a focus on product offerings. ## CORE FEATURES 1. **Product Catalog**: Display a list of available board games with images, descriptions, and prices, allowing users to browse easily. 2. **Shopping Cart**: Enable users to add items to their cart, view their selections, and proceed to checkout. 3. **Coupon System**: Allow users to apply discount codes during checkout to encourage purchases. 4. **Contact Form**: Provide a straightforward form for users to reach out with inquiries or support requests. 5. **User Authentication**: Optional feature for user accounts to save preferences and order history. 6. **Responsive Design**: Ensure the application is fully functional on both desktop and mobile devices. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design will feature a clean, simple aesthetic with ample white space and a focus on typography to enhance readability. - **Color Mode**: Light theme with dark text on light backgrounds, utilizing shades of purple as the primary color to align with the D&D guild theme. - **Layout**: The main layout will include a header with navigation links, a hero section showcasing featured products, a grid layout for the product catalog, and a footer with contact information and social media links. - **Typography**: Use a modern sans-serif font for headings and body text to maintain clarity and appeal. Establish a clear hierarchy with larger font sizes for headings and smaller sizes for descriptions. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript to ensure type safety and a robust development experience. - **Styling**: Tailwind CSS for responsive design and utility-first styling. - **UI Components**: Utilize shadcn/ui for pre-designed components that match the minimalist aesthetic. - **State Management**: Use React Context API or Zustand for managing application state, especially for the shopping cart. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Create Components**: Build reusable components for the header, footer, product card, shopping cart, and contact form. 3. **Implement Routing**: Use React Router to handle navigation between the home page, product details, and contact page. 4. **Develop State Management**: Set up state management for the shopping cart using React Context API or Zustand. 5. **Integrate Coupon Logic**: Create functionality for applying coupons at checkout, including validation and discount calculations. 6. **Style Components**: Use Tailwind CSS classes to implement the minimalist design, ensuring responsiveness across devices. 7. **Testing**: Conduct thorough testing for usability, responsiveness, and performance before deployment. ## USER EXPERIENCE Users will land on a visually appealing homepage featuring highlighted board games, with easy navigation throughout the site. The shopping cart icon will be prominently displayed for quick access, and the checkout process will be streamlined for efficiency. The contact form will be simple, encouraging users to reach out without any hassle. The overall experience will be focused on ease of use, ensuring that users can quickly find and purchase their desired games while enjoying the thematic design elements.
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!
