App web chamado “Twig Events Budget Parser”.
Generated Prompt
```markdown ## APPLICATION OVERVIEW “Twig Events Budget Parser” is a web application designed to facilitate the extraction and organization of budget data from various document formats, including PDF, PPT/PPTX, and XLS/XLSX. The application leverages AI to transform unstructured content into structured spreadsheet rows, enabling users to manage event budgets efficiently. ## CORE FEATURES 1. **Document Upload**: Users can upload budget documents in PDF, PPT/PPTX, and XLS/XLSX formats, with optional fields for supplier name and category selection. 2. **AI-Powered Data Extraction**: The app utilizes AI to extract text and tables from the uploaded documents and organizes this data into structured rows for spreadsheets. 3. **Review Screen**: An editable grid allows users to review extracted data, ensuring accuracy before final export. 4. **Export Options**: Users can export the finalized data in both XLSX and CSV formats, making it easy to share and utilize in other applications. 5. **Validation Rules**: The application enforces specific validation rules to ensure data integrity, such as requiring non-empty supplier fields and enforcing category dropdown selections. 6. **Currency Conversion**: Automatic detection and conversion of MXN to USD using current exchange rates, with logs maintained for transparency. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean and simple design with ample white space, focusing on functionality and readability. - **Color Mode**: Light theme with dark text on light backgrounds, featuring a primary color of #9EAF3A and an accent color of #803AAF for highlights and buttons. - **Layout**: The main layout consists of a top navigation bar for easy access to different sections (upload, review, export), followed by a content area that adjusts responsively to various screen sizes. Each section should be clearly defined with sufficient spacing. - **Typography**: Use a sans-serif font for clarity and modern appeal, with a hierarchy that emphasizes headings and important labels to enhance user navigation. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for building a robust and maintainable application. - **Styling**: Tailwind CSS to facilitate rapid styling and responsive design implementation. - **UI Components**: shadcn/ui for consistent and reusable UI components. - **State Management**: Use React Context or a state management library like Redux, depending on complexity. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and add Tailwind CSS for styling. 2. **Design Navigation Bar**: Create a responsive navigation bar that links to the upload, review, and export sections. 3. **Develop Upload Component**: Implement the document upload functionality, including optional fields for supplier name, category, and default event dropdown. 4. **Integrate AI Extraction**: Set up the backend to handle document processing and data extraction using AI models. 5. **Create Review Screen**: Develop an editable grid interface for users to review and modify the extracted data. 6. **Implement Export Functionality**: Allow users to export the reviewed data in both XLSX and CSV formats, ensuring compliance with specified column rules. 7. **Validation Logic**: Add frontend and backend validation for required fields and calculation rules, ensuring data integrity throughout the process. 8. **Currency Conversion API**: Integrate the Frankfurter API for real-time currency conversion and logging of exchange rates. 9. **Testing and Deployment**: Conduct thorough testing for user interactions, data handling, and responsiveness across devices before deploying the application. ## USER EXPERIENCE Users will start by accessing the upload screen, where they can upload budget documents and fill in optional fields. Upon submission, the app processes the documents and directs users to the review screen, where they can edit and validate extracted data. After confirming the accuracy of the information, users can export the data to their desired format. Throughout the application, clear prompts and validations guide users, ensuring a seamless experience. ```
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!
