Prayatna – Smart Water Safety Monitoring Platform - complete, production-level web application prototype for a HealthTech startup called:
Generated Prompt
## APPLICATION OVERVIEW Prayatna is a modern web application designed for a HealthTech startup focused on smart water safety monitoring. It aims to provide real-time water quality intelligence to prevent water-borne diseases and enhance community safety through an intuitive and data-driven platform. ## CORE FEATURES 1. **Landing Page**: Engaging hero section with animated backgrounds, informative sections on water safety risks, and a clear call-to-action to encourage user engagement. 2. **Authentication System**: Secure login and signup functionalities tailored for different user roles, including Citizens, Health Workers, and Admin Authorities. 3. **Citizen Dashboard**: A user-friendly interface displaying water safety status, recent alerts, and an area safety score with real-time data visualizations. 4. **Health Worker Dashboard**: Tools for submitting water test data, analyzing community health trends, and accessing alert histories to facilitate informed decision-making. 5. **Admin Dashboard**: Comprehensive management tools, including a full contamination map, user management capabilities, and emergency alert triggers. 6. **Alert System Simulation**: Real-time notification system for contamination alerts, simulating SMS alerts for critical updates. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist with a clean, modern aesthetic, emphasizing ample white space and a focus on typography. - **Color Mode**: Light theme featuring deep blue, aqua, soft green, and white, ensuring high contrast and readability. - **Layout**: A structured layout that utilizes a sidebar navigation post-login, with a responsive design for both mobile and desktop. Each dashboard will have a card-based design for easy data access and interaction. - **Typography**: Use professional fonts such as Inter or Roboto for a clean and modern look, establishing a clear hierarchy with varying weights for headers, subheaders, and body text. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust and scalable development. - **Styling**: Tailwind CSS for utility-first styling, allowing for rapid UI development while maintaining consistency. - **UI Components**: Utilize shadcn/ui for a cohesive component library. - **State Management**: Implement Redux or Context API as needed for state management across user interfaces. ## IMPLEMENTATION STEPS 1. **Set up the Project**: Initialize a new React application using Create React App with TypeScript and install Tailwind CSS. 2. **Create the Landing Page**: Design the hero section with animated backgrounds, incorporating the outlined sections like "The Hidden Risk" and "How It Works." 3. **Develop Authentication System**: Build the login and signup pages with role selection, ensuring secure form handling and state management for user authentication. 4. **Build Dashboards**: Create separate dashboards for Citizens, Health Workers, and Admins, implementing features such as data visualization components, alert systems, and report submission forms. 5. **Implement Alert System**: Develop a notification system using modal popups and integrate SMS simulation for alerting users about high contamination levels. 6. **Enhance User Experience**: Add smooth transitions, animations, and responsive design elements to ensure a polished and engaging experience across devices. ## USER EXPERIENCE Users will navigate seamlessly through the application, starting with a captivating landing page that highlights the importance of water safety. Upon authentication, users will access tailored dashboards that present relevant information and tools specific to their roles. The interaction with real-time data visualizations and alerts will empower users to make informed decisions, while the AI Assistant panel will provide insights on water safety in their areas, enhancing overall engagement and utility of the platform. This comprehensive prompt for Prayatna ensures a well-structured and modern web application that aligns with the HealthTech startup’s vision while offering a premium user experience.
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!
