Inspired by Google Trend’s Me Too Rising website (https://metoorising.withgoogle.com), our team decided to recreate a globe object to visualize information on a single webpage.
What it does
Maybe taking the cloud theme of the hackathon too literally, our team scoured the internet for pictures of clouds and mapped them onto a globe based on where they were taken. The end product is a website displaying a globe with markers, on which users click to see what the cloud looks like in that part of the world.
How we built it
Building on a remote repository of a "react globe" (https://github.com/chrisrzhou/react-globe), our team added several components: marker modals to display pictures of clouds; a database that stored these pictures that we scraped from a Reddit channel (https://www.reddit.com/r/CLOUDS/), as well as the recorded location at which these pictures where taken; along with a separate form for users to upload and contribute their own cloud pictures to the website.
Challenges we ran into
Maintaining the dependencies of the original react globe object, dynamically connecting/updating the React Globe with the MongoDB/Express.js backend, and displaying images properly in the modal pop-ups.
Accomplishments that we're proud of
With every member of the team being new to the React framework, we made our best attempt at learning and applying the knowledge to a rather sophisticated React template.
What we learned
Being first-time users of React, we formed a deep understanding of how props help components communicate with each other, the hierarchy of different components, and how they are eventually rendered to dom; we also learned how to use hooks to manage state and make custom ones for form and HTTP requests. In addition, we learned how to manage package dependencies, collaborate using git and Github and interact with an existing library by reading documentations.
What's next for Cloud Gazer
Implement dynamic updates to the React Globe from the database, and enabling Google Geocoding API to convert addresses into coordinates.