Inspiration
In today’s fast-paced world, staying updated with real-time information about different regions can be daunting. Inspired by the need to make it easier for people to visually comprehend the mood and recent happenings in various cities, we created Mood Map. Our goal is to harness the power of data visualization to provide immediate insights into the sentiment of any selected city, enabling users to quickly grasp the prevailing mood based on recent news.
What it does
How we built it
We built Mood Map using a combination of technologies that balance robustness and cutting-edge functionality. The frontend is developed with React, leveraging the powerful Leaflet library for rendering interactive maps. Our backend is constructed with Flask, a lightweight Python web framework, chosen for its flexibility and ease of use.
Our system interacts with MagicLoops APIs to handle real-time data efficiently. The first API fetches the latest news by city name, and the second converts state names to geographical coordinates. These data points are then processed to calculate sentiment scores which determine the color intensity on the heatmap.
We used HTML, CSS, and JavaScript for the frontend to create a responsive and intuitive user interface. The design focuses on usability, ensuring that users can easily interact with the features without any complications.
Challenges we ran into
Integrating real-time data fetching with dynamic map visualization posed a significant challenge, particularly in ensuring that updates from our Flask backend were correctly processed and reflected immediately on the React frontend. Meticulous state management in React was crucial for this synchronization. Additionally, we encountered CORS (Cross-Origin Resource Sharing) issues that initially blocked communication between our backend and frontend. We resolved these by configuring CORS settings in Flask to allow specific headers and methods, ensuring seamless data flow and interaction across different parts of our application.
Accomplishments that we're proud of
We are particularly proud of creating a seamless integration between the backend API calls and the frontend map visualization, providing a real-time interactive experience. Our team also successfully implemented a complex geographic data processing algorithm that accurately converts news data into visual sentiment indicators on the map.
What we learned
Throughout this project, we deepened our understanding of asynchronous API handling within React applications and enhanced our skills in geographic data visualization. We also gained a better grasp of Flask as a backend service, especially in terms of configuring CORS for a secure and functional development environment.
What's next for Mood Map
Looking forward, we plan to expand Mood Map to cover more regions and include additional data sources for a more comprehensive sentiment analysis. We also aim to introduce machine learning techniques to predict sentiment trends based on historical data, thus offering predictive insights alongside real-time data visualization.
Log in or sign up for Devpost to join the conversation.