• 

  Home Page

• 

  Business Directory

• 

  Map View

• 

  Business Dashboard

Hong Kong Extreme Weather Store Status - Project Overview

Inspiration

During Hong Kong's frequent typhoons and extreme weather events, people struggle to find which businesses remain open for essential services. When Typhoon Signal No. 8 is raised or Black Rainstorm warnings are issued, people need immediate access to information about open supermarkets, pharmacies, and convenience stores - but this information is scattered and often outdated.

What it does

Our mobile-first web application provides real-time business status updates during extreme weather conditions. The platform features an interactive map, intelligent search filters, and automated status adjustments based on weather severity (T1-T10 typhoon signals, rainstorm warnings). Business owners can update their status through a dedicated dashboard, while community members can report incorrect information, ensuring accuracy when it matters most.

How we built it

Built with Next.js 15, React 19, and TailwindCSS 4, the application uses static generation for fast loading during emergencies. We integrated Leaflet maps with OpenStreetMap, implemented comprehensive weather simulation logic, and created a real-time status management system. The architecture prioritizes mobile performance, accessibility compliance, and seamless deployment to platforms like AWS.

Challenges we ran into

The biggest challenge was creating realistic business logic that responds appropriately to different weather scenarios—some businesses close proactively during T3 signals while others wait for T8. Balancing real-time updates with static generation for performance, ensuring mobile touch interactions work smoothly on maps, and maintaining data consistency across multiple pages required careful architecture planning.

Accomplishments that we're proud of

We successfully created a comprehensive MVP that demonstrates modern web development practices while solving a real community need. The weather simulation system accurately reflects Hong Kong's complex warning system, and the mobile-first design ensures usability during actual emergencies.

What we learned

This project deepened our understanding of Next.js 15's App Router, React 19's features, and TailwindCSS 4's performance improvements. We gained valuable experience in mobile-first design, accessibility implementation, and creating complex state management systems. Most importantly, we learned how to balance technical excellence with real-world usability during crisis situations.

What's next for Hong Kong Extreme Weather Community

Future enhancements include real-time weather API integration, push notifications for business owners, offline functionality with service workers, multi-language support (Traditional Chinese / Simplified Chinese / English), and integration with business POS systems. We plan to add user authentication, community moderation features, and advanced analytics to track status accuracy and community engagement patterns.

Developed with assistance from Kiro, Amazon's agentic IDE, which accelerated development through intelligent code assistance and automated refactoring.

Built With

• next.js
• react.js
• tailwindcss