windy-ui

byShrikant Borude

App Design Prompt: Check My Ref General Theme: Professional, high-productivity UI. Use a clean "Card-based" layout with a primary color of Royal Blue and high-contrast typography. Navigation Architecture Implement a Bottom Navigation Bar with four primary destinations: 1. Check My Ref (Search & Filter) 2. Share My Ref (Categorized Sharing) 3. Activity (Notification/Chat Details) 4. Profile ________________________________________ Important: - Right now, only focus on designing the app pages and UI screens. - Do NOT build backend logic yet. - Do NOT build admin panel yet. - Only create frontend mobile app page designs with proper navigation flow. - Keep the design simple, professional, minimal, and realistic. - Use a clean color palette that suits a home services brand. - The UI should look production-ready, modern, and easy to use. - Use proper spacing, rounded cards, clean icons, and mobile-friendly layout. - Keep the app beginner-friendly and not overloaded. Create these mobile app pages: 1. Splash Screen - App logo - Clean branded background - Minimal loading feel 2. Welcome / Intro Screen - Short heading explaining the app - Simple subtitle - Button: Get Started 3. Login / Signup Screen - Mobile input - Button to send OTP - OTP verification screen - Keep it simple and modern 4. "Check My Ref" Screen (Search & Filter) • Header: A prominent search bar at the top with a "Key Field" filter icon. • Core Function: As the user types a keyword (e.g., "Electrician," "Sardar Patel School," "Real Estate"), the app must scan the local device contacts. • Filtered List View: Display results in a clean list. Each contact card includes: o Contact Name & Phone Number. o Associated tags/categories. o Action buttons: Call and Share via App. 5. "Share My Ref" Screen (Workspace Entry) • UI Logic: Replace the standard dropdown menu with four dedicated input spaces. Each space represents a category where users can manage their own shareable data. • Category Sections: o Places: A text input area and a "tag cloud" for landmarks or locations. o Services: A dedicated field for adding professional services (e.g., Plumbing, Interior Design). o Company / Organizations: A space to list specific business entities. o Profession: A space for job titles or expertise. • Feature: Within each space, users can type a "Key Field" and hit enter to create a removable chip/tag. • Sync: A "Save to Global Directory" button that links these tags to the user’s phone number. 6. "Notification" Screen (Notification Hub) • Notification Feed: A chronological list of alerts. • Alert Types: o Access Alert: "Notification: [User Name] just accessed your contact for [Key Field]." o Share Alert: "Notification: Your contact [Key Field] was shared with a new user." • Details: Each notification should show a timestamp and a "View Details" button to see which specific key field was engaged. 7. "Profile" Screen • User Identity: Circular image placeholder with an editable User Name field directly below. • Saved Address: A dedicated card showing the user's saved location/address for service proximity. • Primary Actions: o Edit Profile Button: Enables editing for the name, photo, and address. o Logout Button: A distinct, red-styled button at the bottom of the screen to end the session. 8. Bottom Navigation Include a clean bottom tab bar with: - Check My Ref - Share My Ref - Notifications - Profile Design rules: - Keep all screens visually consistent - Do not overuse colors - Avoid heavy gradients and clutter - Make it look like a real service booking app - Use modern card-based UI - Use readable typography - Focus strongly on good UX - All pages should be connected logically for demo purposes ________________________________________ Technical Constraints for the Builder • Local Access: The app requires permission to read the mobile device’s contact list. • Real-time Updates: The "Check My Ref" list must update dynamically as the user types (Instant Filtering). • Database Trigger: When any user searches for and "accesses" a contact from the shared pool, a push notification must be triggered to the owner of that contact number.