Do you think there should be a section or something to click whether on home page or other place necessary, to select emergency, maybe also show...
Generated Prompt
## APPLICATION OVERVIEW This application is a web app designed to provide users with quick access to emergency services, specifically allowing them to locate nearby hospitals with real-time availability, request an ambulance, and receive crucial information while they wait for assistance. The app focuses on delivering a user-friendly experience in critical situations. ## CORE FEATURES 1. **Emergency Selection Button**: A prominent button on the home page that users can easily click to access emergency services. 2. **Nearby Hospitals Locator**: An interactive map displaying nearby hospitals along with their current availability status and contact information. 3. **Ambulance Request Option**: A straightforward feature allowing users to call for an ambulance directly through the app with a single tap. 4. **Waiting Instructions**: A section that provides users with essential tips and considerations while they await medical assistance, ensuring they are informed and calm. 5. **User-Friendly Navigation**: Simple and intuitive navigation to ensure users can access critical features quickly and efficiently. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist with a clean and simple design, emphasizing ample white space to create a sense of calm and clarity. - **Color Mode**: Light theme featuring a minimal color palette with dark text on light backgrounds to enhance readability and reduce eye strain. - **Layout**: The main layout consists of a centered emergency button on the home page, a map view for hospital locations below it, and a collapsible section for waiting instructions at the bottom. - **Typography**: Use a sans-serif font such as 'Helvetica Neue' for body text and a slightly bolder variant for headings to maintain a clear hierarchy. Text should be appropriately sized to ensure readability on both desktop and mobile devices. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust type safety and maintainability. - **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design iteration and responsiveness. - **UI Components**: Utilize shadcn/ui for pre-built, accessible components that align with the minimalist design ethos. - **State Management**: Implement React Context API for managing global state, particularly for emergency services and hospital availability data. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components. 3. **Create Layout**: Develop the main layout structure with a header, emergency button, map component, and waiting instructions section. 4. **Integrate Maps API**: Use a mapping service (like Google Maps or Mapbox) to display nearby hospitals based on the user's location. 5. **Implement Hospital Availability**: Set up an API connection to fetch real-time availability data for hospitals. 6. **Build the Emergency Features**: Add functionality to the emergency button to trigger the hospital locator and ambulance calling features. 7. **Design Waiting Instructions**: Create a collapsible section providing necessary information and tips for users while they wait for assistance. 8. **Ensure Responsiveness**: Implement responsive design principles to ensure the app functions well on various devices and screen sizes. 9. **Testing**: Conduct thorough testing to ensure all features work as intended, focusing on user experience during emergency scenarios. ## USER EXPERIENCE Users will land on a clean home page featuring a large, easily identifiable emergency button. Upon clicking, they will be taken to a map displaying nearby hospitals with availability indicators. They can request an ambulance with a single click, which will initiate a call to emergency services. While waiting, users will see helpful tips and considerations to follow, enhancing their preparedness and calming their nerves. The app's minimalist design ensures that users can navigate without distractions, allowing them to focus on the urgent situation at hand.
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!
