Simule um BPMS com 3 atividades: 1- Formulário do solicitante preenchendo as questões 2- área técnica acessa aquele formulário apenas visualizando...
Generated Prompt
## APPLICATION OVERVIEW This web application is designed to simulate a Business Process Management System (BPMS) featuring three key activities. It allows users to fill out a request form, enables technical staff to view the submitted forms and attachments, and allows for the review of both the form and the attachments in a clean and efficient interface. ## CORE FEATURES 1. **Request Form**: A user-friendly form for applicants to fill out, capturing all necessary information through a series of questions. 2. **Technical Review Access**: A restricted area where technical staff can access submitted forms for viewing only, with the ability to see any attached documents. 3. **Attachment Viewing**: A dedicated section where users can view attachments alongside the filled request form, ensuring all relevant information is easily accessible. 4. **Notifications**: Alerts for users when their forms have been accessed or reviewed by technical staff, enhancing communication and transparency. ## 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 layout will feature a header with navigation, a main section for the request form, a sidebar for technical staff access, and a footer for contact information. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: React Context or Zustand for managing user sessions and form states. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components. 3. **Create Components**: - Implement the Request Form component with fields and validation. - Build the Technical Review component to display submitted forms and attachments. - Design the Notification system to inform users about updates. 4. **Implement Routing**: Use React Router to navigate between the form submission and technical review sections. 5. **Integrate State Management**: Set up context or Zustand to handle form data and user session states. 6. **Style Components**: Apply Tailwind CSS classes to ensure a clean and cohesive minimalist design. 7. **Test Functionality**: Ensure all features work as intended and refine the user experience based on feedback. ## USER EXPERIENCE Users will first land on the request form where they can fill out the necessary information. Once submitted, the technical staff will access the forms in their designated area, viewing the data alongside any attachments. Users will receive notifications about the status of their submissions, ensuring clarity throughout the process. The design will be responsive, providing a smooth experience across all devices.
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!
