Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for a fair event where attendees can scan a QR code to access a platform for searching students by name and school. The application aims to provide an easy-to-use interface that allows users to find specific students and view their associated photos in a gallery format.

## CORE FEATURES
1. **QR Code Access**: Users can scan a QR code at the fair, which directs them to the web application.
2. **Student Search Form**: A form that allows users to input last name, first initial, and school to find students.
3. **Search Results Display**: The application will display links to matching students with their first names fully spelled out.
4. **Photo Gallery**: Upon selecting a student's name, users will see a gallery of photos associated with that student, complete with titles and placements.
5. **Responsive Design**: The application will ensure a seamless experience across various devices, maintaining usability and aesthetics.

## 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 QR code, followed by the search form, the results section, and a responsive gallery section that displays upon selection of a student.

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

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create QR Code Component**: Develop a component that displays the QR code linking to the application.
3. **Build Search Form**: Create a form component that includes fields for last name, first initial, and school.
4. **Implement Search Functionality**: Write the logic to handle form submissions, query the student database, and return results.
5. **Display Search Results**: Create a results component that shows the list of matching students with clickable names.
6. **Develop Photo Gallery Component**: Design a gallery component that retrieves and displays photos based on the selected student's name.
7. **Ensure Responsiveness**: Use Tailwind CSS utilities to ensure the application is mobile-friendly and adapts to different screen sizes.
8. **Testing**: Conduct thorough testing to ensure all functionalities work as expected and that the user experience is smooth.

## USER EXPERIENCE
Users will arrive at the fair, scan the QR code, and be greeted by a welcoming interface. They will fill out the search form with the required fields, submit their query, and receive a list of matching students. Upon selecting a student's name, they will be presented with a visually appealing gallery of photos, enhancing their experience and making it easy to find the information they need. The minimalist design approach ensures that users can navigate the application effortlessly, focusing on the content without distraction.