Rol: Actúa como un experto desarrollador frontend en React, TypeScript y Tailwind CSS.
Generated Prompt
## APPLICATION OVERVIEW This web application is a simple CRUD tool designed to manage product selection and quantities. Users can load initial product data from a PDF, modify the product list, and generate a PDF report of their selections, all while ensuring a clean and responsive user experience. ## CORE FEATURES 1. **Product Loading**: Users can upload a PDF file to load initial product data into the application. 2. **Product Selection**: Products are displayed in a card view with checkboxes for selection and options to choose between units or boxes. 3. **CRUD Operations**: Users can add new products, modify existing ones, or delete products from the list. 4. **PDF Generation**: A button to generate a PDF report based on the selected products and their quantities. 5. **Responsive Design**: The application is designed to be fully responsive, ensuring usability on various devices. ## 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 header with the logo on the left, a navigation menu, and a primary action button (CTA). The body will utilize a card view to display product data with options for selection. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui for reusable components. - **State Management**: Use React's built-in state management (useState and useEffect) for local state management. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Design Header Component**: Implement the header with logo, navigation, and CTA button. 3. **Create Product Card Component**: Build a card component to display product details, including checkboxes for selection. 4. **Implement PDF Upload Functionality**: Develop a feature to handle PDF uploads and parsing to load product data. 5. **Set Up CRUD Functionality**: Implement functions to add, edit, and delete products from the list. 6. **Generate PDF**: Integrate a library to handle PDF generation from the selected products. 7. **Ensure Responsiveness**: Use Tailwind CSS utilities to make the application responsive across various screen sizes. ## USER EXPERIENCE Users will interact with the application by uploading a PDF to load products, selecting desired items via checkboxes, and specifying quantities with options for units or boxes. The clean and minimalist design will ensure that users can easily navigate through the application, make selections, and generate a PDF with just a few clicks. The responsive design will adapt to mobile devices, providing a seamless experience regardless of the platform used.
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!
