You are a Senior Full-Stack Product Engineer specialized in PWAs, mobile-first systems, computer vision-assisted workflows, retail operations,...
Generated Prompt
## APPLICATION OVERVIEW The project is a web application called **“Conferente Padrão”**, designed to be a production-ready Progressive Web App (PWA) for the supermarket **Super Padrão**. The app aims to streamline the merchandise receiving process by allowing staff to confer incoming products against invoices through scanning, recording discrepancies, and generating final conference reports. ## CORE FEATURES 1. **Home Screen**: Central dashboard with a prominent button for scanning invoices, recent conference history, and easy navigation. 2. **Invoice Scanner**: Utilizes the device camera to scan NF-e/DANFE barcodes and retrieve invoice data, with robust error handling. 3. **Conference Screen**: Displays invoice details and allows users to check quantities against received merchandise, with real-time discrepancy detection. 4. **Digital Signature**: Captures digital signatures for conference confirmation, linking them to conference records. 5. **History Management**: Provides a searchable and filterable history of past conferences, displaying key details and allowing access to full records. 6. **Offline Synchronization**: Manages offline data storage and synchronization, ensuring functionality without internet access. ## 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 application will feature a mobile-first layout with large touch targets for easy use in warehouse environments, focusing on readability and quick navigation. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui, Radix UI - **State Management**: Zustand for application state management, TanStack Query for server state - **Database**: IndexedDB with Dexie.js for local data storage - **Service Worker**: Workbox for offline capabilities ## IMPLEMENTATION STEPS 1. **Set Up React Project**: Initialize a new React project with TypeScript, Tailwind CSS, and the required libraries (shadcn/ui, Zustand, Dexie.js, etc.). 2. **Create Core Components**: Build the main components for the Home, Invoice Scanner, Conference, Digital Signature, History, Synchronization, and Profile screens. 3. **Implement Routing**: Set up routing to navigate between different screens using React Router. 4. **Develop Invoice Scanning**: Integrate the camera functionality using `html5-qrcode` or `zxing-js`, handling errors and validations as specified. 5. **Build Conference Logic**: Implement logic for checking quantities, detecting discrepancies, and managing the conference flow. 6. **Digital Signature Capture**: Create a component for capturing digital signatures with the `react-signature-canvas` library. 7. **Offline Functionality**: Set up local storage using IndexedDB and implement synchronization logic for offline-first capabilities. 8. **PDF Report Generation**: Use `jspdf` or `pdf-lib` to create a report generation feature as specified. 9. **Testing and Debugging**: Thoroughly test all features, particularly focusing on offline functionality and error handling. 10. **Deployment**: Prepare the PWA for deployment, ensuring proper service worker configuration for offline support. ## USER EXPERIENCE Users will interact with the app primarily through a mobile interface, starting with the Home Screen where they can easily scan invoices. The scanning process will be intuitive, with immediate feedback and error handling provided for any issues encountered during the scan. Users will check products against the invoice, receive clear indications of discrepancies, and finalize conferences with a digital signature. The History and Synchronization screens will allow users to manage previous conferences and ensure data consistency, even in offline scenarios. The overall design will prioritize simplicity, speed, and ease of use to facilitate fast and efficient workflows in warehouse environments.
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!
