Humanity Clock

🌍 About the Humanity Clock Project 💡 Inspiration The "Humanity Clock - Global Crisis Monitor" project was inspired by the urgent need to visualize and understand the critical environmental and humanitarian challenges facing our planet in real-time. The idea was to create an intuitive and impactful dashboard that not only tracks global crises but also highlights the proximity to critical climate tipping points, serving as a constant reminder of the urgency of collective action. The goal was to make complex global data accessible and engaging, fostering greater awareness and encouraging informed responses.

🛠️ How It Was Built The project was built using a modern web development stack, prioritizing a clean, responsive, and performant user experience: Frontend Framework React was chosen for its component-based architecture, allowing for modular and reusable UI elements. Vite was used as the build tool for its fast development server and optimized builds. Styling Tailwind CSS provided a utility-first approach to styling, enabling rapid UI development and ensuring a consistent design language across the application. This allowed for fine-grained control over responsiveness and visual details. Mapping The interactive world map is powered by react-leaflet and leaflet, providing a robust and flexible solution for displaying geographical data. Custom markers were designed to visually represent different crisis types and their severity. Icons lucide-react was integrated for a comprehensive set of vector icons, enhancing the visual appeal and clarity of the user interface without adding unnecessary dependencies. Data Management A custom useRealTimeEvents React hook was developed to manage the fetching, loading, and error states of real-time crisis data. This hook interacts with a dedicated EventService to retrieve data from the api.humanityclock.world API. javascript// Custom hook for real-time event management const useRealTimeEvents = () => { const [events, setEvents] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);

// Implementation details... }; Data Transformation The EventMapper utility was created to transform raw API responses into the application's defined CrisisEvent structure, ensuring data consistency and enabling features like event grouping by proximity. User Interaction Components like CrisisControlPanel and SearchBar were implemented to provide users with control over:

Visible map layers Event filtering Location searching "My Location" feature using the browser's Geolocation API Recent searches stored locally using localStorage

Countdown Timer A dynamic countdown timer was implemented to visually represent the time remaining until critical global thresholds, with detailed breakdowns and explanations available via interactive popups. Responsiveness Significant effort was put into making the application fully responsive, ensuring a seamless experience across various devices, from large desktop monitors to mobile phones.

📚 What Was Learned Throughout the development of the Humanity Clock, several key learnings emerged: Effective State Management in React Gained deeper insights into managing complex application states using useState and useEffect, especially when dealing with asynchronous data fetching and UI interactions. Leveraging Mapping Libraries Mastered the integration of react-leaflet for dynamic map rendering, including:

Creating custom markers Handling popups Programmatically controlling map views based on user selections

API Design and Consumption Understood the importance of a well-structured API and the process of consuming external data, including:

Error handling Data mapping Implementing fallback mechanisms (e.g., falling back to mock data when the API is unavailable)

Building Custom Hooks Recognized the power of custom React hooks for abstracting complex logic, such as real-time data fetching and processing, leading to cleaner and more reusable components. Responsive Design with Tailwind CSS Solidified skills in building responsive layouts using Tailwind's utility-first classes, adapting components to look great on different screen sizes.

🚧 Challenges Faced The project presented several interesting challenges:

1. Data Consistency and Mapping The primary challenge was ensuring that data from the external API was consistently mapped to the application's internal data models. This involved:

Careful consideration of data types Handling missing fields Transforming raw data into a more usable format for the UI

1. Real-time Data Synchronization Managing the refresh interval for real-time events and ensuring the UI accurately reflected the latest data without excessive re-renders or performance issues was a continuous balancing act.
2. Geolocation API Integration Implementing the "My Location" feature required careful handling of:

Browser permissions Potential user rejections Gracefully managing loading states

javascript// Geolocation implementation example const getCurrentLocation = () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { // Handle success }, (error) => { // Handle error gracefully } ); } };

1. Map Performance with Many Markers While not fully optimized for thousands of markers, ensuring the map remained performant with a reasonable number of crisis events required attention to how markers were rendered and updated.
2. Responsive UI Complexity Adapting the various control panels, search bars, and popups to be fully functional and aesthetically pleasing on small mobile screens while maintaining their desktop layout required:

Iterative design Careful application of Tailwind CSS

1. Debugging JSX Syntax As seen during development, even minor misplaced JSX elements can lead to compilation errors, requiring precise debugging to identify and correct the exact location of the issue.

🎯 Overall Impact The Humanity Clock project was a rewarding experience that deepened understanding of modern web development practices, particularly in building data-rich, interactive, and visually compelling applications. The project successfully demonstrates how technology can bridge the gap between complex global data and public awareness, creating a foundation for informed climate action and crisis response.

🔗 Live Demo: www.humanityclock.world 🛠️ Built with: React, Vite, Tailwind CSS, Leaflet.js, and real-time crisis APIs 🌍 Mission: Making planetary health monitoring accessible to everyone

Built With

• leaflet.js
• react
• tailwind-css
• vite