Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
DonorMap is a modern, mobile-first web application designed to connect blood donors with recipients through real-time location tracking and fast communication. The platform prioritizes community trust and emergency readiness, providing users with a seamless and efficient way to find nearby blood donors and request assistance during critical times.

## CORE FEATURES
1. **Real-Time Donor Discovery**: Users can quickly find nearby blood donors based on their location, with filters for blood group and distance, ensuring rapid access to help.
2. **Instant Communication**: One-tap call and in-app messaging features allow users to communicate with donors quickly and securely, promoting prompt responses during emergencies.
3. **User Profiles**: Each user has a profile displaying essential information such as blood group, availability status, and donation history, fostering transparency and trust within the community.
4. **Interactive Map**: A live map serves as the homepage, showcasing active blood requests and available donors, with color-coded markers for easy navigation and urgency indication.
5. **Achievement and Badge System**: Users can earn badges for their contributions, celebrating milestones and promoting a sense of community while encouraging further participation.
6. **Emergency Blood Request System**: Users can post urgent blood requests, which instantly appear on the map, ensuring that help reaches those in need as quickly as possible.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design should feature a clean and simple aesthetic, emphasizing ample white space and a minimal color palette to promote clarity and focus.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a welcoming atmosphere.
- **Layout**: The main layout consists of a top navigation bar for easy access to the map and user profile, a prominent map area for displaying donors and requests, and a footer with community engagement links. Utilize rounded cards for user profiles and request listings to enhance the friendly, approachable feel.
- **Typography**: Use a modern sans-serif font for body text, with larger, bold headings to create a clear hierarchy. Maintain consistent spacing and alignment for a streamlined appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture and type safety.
- **Styling**: Tailwind CSS for efficient, utility-first styling that complements the minimalist aesthetic.
- **UI Components**: Utilize shadcn/ui for consistent and customizable UI elements that enhance user experience.
- **State Management**: Redux Toolkit (optional) can be implemented for managing global state across user profiles and messages.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, Supabase client, Leaflet.js).
2. **Authentication Module**: Implement user authentication using Supabase, allowing email and password login, with options for Google login and password recovery.
3. **User Profile Creation**: Develop the user profile component, integrating fields such as name, phone number, blood group, and availability toggle.
4. **Live Map Integration**: Embed OpenStreetMap using Leaflet.js, displaying markers for nearby donors and active blood requests. Implement filters based on blood group and distance.
5. **Real-Time Messaging**: Set up in-app messaging using Supabase's real-time capabilities, ensuring messages auto-delete after 90 days.
6. **Emergency Request Feature**: Create a form for users to submit urgent blood requests, displaying these requests on the live map in real-time.
7. **Achievements and Badges**: Implement the achievement tracking system, allowing users to unlock badges based on their donation history and community involvement.
8. **Testing and Optimization**: Ensure mobile-first optimization, testing for responsiveness and performance across devices, while maintaining fast loading times.

## USER EXPERIENCE
Users will initiate their journey by logging into the app and being redirected to the interactive map. They can easily toggle their availability, view nearby donors, and post urgent requests. The design emphasizes quick interactions, with one-tap call buttons and straightforward messaging options. Users are encouraged to share their profiles and achievements, fostering a community-driven environment where trust and support thrive. The overall experience is built to be calm, modern, and hopeful, aligning with the project's mission to save lives through community engagement.