Web Development Project 6 - Global Weather Dashboard

Submitted by: Thien An Truong

This web app: An interactive weather dashboard that displays climate information for 25 cities worldwide. Users can explore cities through a searchable dashboard with data visualizations, then click on any city to view detailed climate information including humidity, rainfall patterns, best visiting times, and more. Features include two interactive charts analyzing temperature distribution and geographic diversity, along with a persistent sidebar providing navigation and data insights.

Time spent: 6 hours spent in total

Required Features

The following required functionality is completed:

• Clicking on an item in the list view displays more details about it
  • Clicking on an item in the dashboard list navigates to a detail view for that item
  • Detail view includes extra information about the item not included in the dashboard view (humidity, rainfall, best time to visit, population, elevation, detailed description)
  • The same sidebar is displayed in detail view as in dashboard view
  • To ensure an accurate grade, your sidebar must be viewable when showing the details view in your recording.
• Each detail view of an item has a direct, unique URL link to that item's detail view page
  • Each city has a unique URL route: /city/1, /city/2, /city/3, etc.
  • Direct URL access works for all 25 cities
  • To ensure an accurate grade, the URL/address bar of your web browser must be viewable in your recording.
• The app includes at least two unique charts developed using the fetched data that tell an interesting story
  • At least two charts should be incorporated into the dashboard view of the site
  • Each chart should describe a different aspect of the dataset
  • Chart 1: Bar Chart showing Temperature Distribution by Climate Type - reveals that Tropical and Desert climates have the highest minimum temperatures, while Continental and Subarctic climates have the lowest
  • Chart 2: Pie Chart showing Cities Distribution by Country (Top 8) - demonstrates that the United States has the most diverse representation with cities spanning multiple climate zones, followed by UK and Myanmar

The following optional features are implemented:

• The site's customized dashboard contains more content that explains what is interesting about the data
  • Added a comprehensive "Data Insights" section explaining fascinating patterns in the dataset
  • Temperature extremes analysis: Novosibirsk shows 75°F range vs. consistent tropical temperatures
  • Rainfall comparison: Yangon receives 106 inches/year vs. Phoenix's 8 inches/year (13x difference)
  • Filter suggestions encouraging users to explore "United States" to see climate diversity within one country
  • Chart annotations explaining what each visualization reveals about the data
  • Sidebar includes "Quick Tips" and "Key Insights" sections
• The site allows users to toggle between different data visualizations
  • Toggle buttons with eye icons (👁️) for each chart
  • Users can show/hide the Climate Distribution chart independently
  • Users can show/hide the Country Distribution chart independently
  • Visual feedback shows which charts are currently active/visible
  • Charts maintain their state when toggled

The following additional features are implemented:

• Search Functionality - Real-time search across city names, countries, temperatures, and climate types
• Country Filter Dropdown - Filter cities by country of origin with combined search + filter capability
• Summary Statistics Cards - Dashboard displays Total Cities (25), Average Min Temperature, and Countries (15)
• Loading States - Smooth loading animation while data is being fetched
• Empty State Handling - User-friendly message when no cities match filter criteria
• Responsive Design - Fully responsive layout that works on desktop, tablet, and mobile devices
• Back Navigation - Easy-to-use back button from detail view to dashboard
• 404 Handling - Graceful error page for invalid city IDs
• Professional UI Design - Modern glassmorphism design with backdrop blur effects, gradients, and smooth animations
• Hover Effects - Interactive hover states on all clickable elements
• Enhanced Data Model - All 25 cities include humidity, rainfall, best time to visit, population, elevation, and detailed descriptions
• Reusable Components - Modular architecture with separate Dashboard, CityDetail, and Sidebar components

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with ...

Notes

Challenges encountered while building the app:

1. React Router Integration - Learning to properly set up React Router with BrowserRouter, Routes, and Route components. Ensuring navigation worked smoothly between dashboard and detail views required understanding React Router's navigation patterns and the useParams hook.

2. Chart Data Transformation - Converting the raw weather data into formats suitable for Recharts visualization. Had to aggregate data by climate type and country, calculate averages, and structure it properly for bar and pie charts.

3. Component Architecture - Deciding how to structure the app with shared components. Created a reusable Sidebar component that appears in both views while maintaining proper routing context and active state highlighting.

4. Data Model Enhancement - Extending the original weatherData with additional fields (humidity, rainfall, best time to visit, population, elevation, descriptions) for all 25 cities while maintaining data consistency.

5. Toggle Functionality - Implementing the chart toggle feature required managing component state and ensuring smooth show/hide transitions without layout shifts.

6. Responsive Design - Making charts responsive using ResponsiveContainer from Recharts, and ensuring the sidebar works well on both desktop (sticky) and mobile (full-width) layouts.

7. URL Routing and Direct Access - Ensuring that direct URL access (e.g., typing /city/5 in the address bar) works correctly and handles invalid IDs gracefully with a 404 page.

8. Styled Components Organization - Managing many Emotion styled-components across multiple files while keeping styles maintainable and consistent with the glassmorphism theme.

License

Copyright 2025 Thien An Truong

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.