Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The DRS SERV web application is a professional platform designed for generating protocols with the ability to export them as PDFs. It features a modern, clean, and responsive interface that allows users to create and manage protocols efficiently, providing a seamless experience across devices.

## CORE FEATURES
1. **Protocol Creation Form**: A user-friendly form that includes fields for project name, automatic creation date, generated protocol code, unique registration ID, and instructions. 
2. **Automatic Code Generation**: The application generates a protocol code in the format DRS-ANO-MÊS-DIA-XXXX and a unique ID (timestamp or UUID) automatically.
3. **QR Code Generation**: Automatically generates a QR code linking to the protocol for easy access and sharing.
4. **PDF Export**: Users can generate a well-structured PDF document containing all relevant protocol information and a watermark.
5. **User Authentication**: A secure login system allowing users to create and view their saved protocols from any device.
6. **Protocol Management**: Users can list and search protocols by code for quick 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 main layout will consist of a header with the application name, followed by the protocol creation form, a section for displaying the generated QR code, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API or Redux (if needed for state management)

## IMPLEMENTATION STEPS
1. **Set Up React Application**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Layout Components**: Build header, footer, and main content components to structure the application.
3. **Develop Protocol Form**: Implement the protocol creation form with necessary input fields and automatic code generation logic.
4. **Integrate QR Code Generation**: Use the qrcode.js library to generate and display QR codes based on the generated protocol ID.
5. **PDF Export Functionality**: Utilize jsPDF or pdfmake to create and download the protocol document in PDF format.
6. **Implement User Authentication**: Set up Firebase or Supabase for user management and protocol storage, ensuring secure login and data retrieval.
7. **Create Protocol Management Features**: Develop a list and search functionality for users to view and manage their saved protocols.
8. **Testing and Deployment**: Conduct thorough testing of all functionalities and deploy the application to a hosting platform.

## USER EXPERIENCE
Users will interact with a simple and intuitive interface. Upon landing on the application, they will log in to access their dashboard. The protocol creation form will allow them to enter details and generate protocols seamlessly. Once the form is submitted, users will see the generated QR code and have the option to download the protocol as a PDF. They can also browse through previously created protocols, enhancing usability and efficiency.