Inspiration
One of our teammates has a close friend who lives very far away from him. She loves to draw, her favorite dish is crab salad made by her mother, and she has an adorable pet dog named Oreo. She also strives to become an artist. She is just a normal girl with a dream, but since she lives in Ukraine, her dreams can't come true. She works extremely hard towards her goals, but is suffering from the current events in Ukraine. We cannot image the pain and suffering Ukrainians are doing through right now. Many have lost their homes, businesses, and everything they hold dear. With this web application, we hope to shed some light on this dilemma and pray that we can provide support towards Ukraine.
What it does
Our project has information collected from multiple news source and have a filter function by city to see if that city is currently safe or not in hope that the people of Ukraine can flee to a safe place. We hope that this app can be a tool to spread awareness of the evolving situation Ukraine and perhaps be used by overseas Ukrainians to get the latest news updates from different cities. We have web scraping scripts that run every hour to feed latest news data onto our MongoDB database. When navigating to the endpoints, the backend will query the database and populate the frontend. With this, we are able to provide reverse chronological, latest news to our news feed.
How we built it
We built the application using Flask python to support our back-end and React to support out front-end. Our database is hosted in the cloud on MongoDB Atlas. In order to obtain news data for our news site, we built two different web scraping scripts with Selenium and BeautifulSoup to scrape data from Google News search and the CNN live updates page on the conflict.
Challenges we ran into
In Backend
- There were a few links that did not have a class attribute for the p tag and image tag. This made it more difficult to scrape the proper article content and image from the website. We originally wanted to display the first paragraph of the article, but some of the p tags were used to display the author of the news article. For the images, we wanted to display an image related to the article, but some links scraped images of the author or images of the source.
- We had implemented two different summarizing functions. One function was faster, but the number of sentences was not bounded. If the news article was longer than normal, then the function would output an extremely long summary. The other function was a lot slower, but it was possible to provide it any number of sentences, and it would summarize it to a specified number of sentences
- There were issues with MongoDB with retrieving data from the database. The data did not jsonify properly which caused issues with the API call, and structuring queries was challenging.
In Frontend
- The UI is not responsive as expected, since this problem is overlooked until there is not enough time to fix it
- We had a lot of difficulty in setting up the connect from Flask server to React, so we had to reduce all the functionality intended for our project (Blog, messaging function, ...)
- The frontend took too long to create the overlay and finding an image for the background
Accomplishments that we're proud of
We're proud to overcome the challenges of connecting the frontend with the backend, which was plagued with issues throughout the process. We are really proud of our database schema, which was scalable and how we populated our database with data scraped from both Google news and from the CNN live updates site. Because of this, querying the database was fairly easy and efficient.
What we learned
We learned how to use different python packages effectively scrape the websites. We learned how to properly link Python to React. Overall, this was a great learning experience in full stack development for all of us!
What's next for UMonitor
With more time and funding, we will be able to add functionality like a map that show unsafe zone. We also wish to add a blog for people to express their concern and know that they are not alone.
Challenge Questions:
How can technology play a role in proper waste disposal and waste reduction? (e.g., batteries, textiles, food waste)
One of the main factors that prevent people from properly disposing waste is awareness. Many people around the world are only focused on what directly affects their lives. Once they throw something out, they do not understand the repercussions to their actions. For example, how to properly throw out batteries and throwing out food. Since people use technology everyday, it can play a large role towards informing the audience about proper waste disposal and waste reduction. Through social media and attractive advertisements, businesses can display the impact a single individual can have.
How can we best monitor the impact of individual and collective sustainability efforts?
We can utilize social media to observe what individuals are doing to contribute to the sustainability efforts.
How can technology make sustainability behaviors more habitual and enticing?
Technology can encourage the audience to have more sustainable behaviors through the use of attractive advisements and social status. Advertisements can help show audiences how they actions can change the world and also show the current status of other people around the world. In first world countries, social status is everything. People can gain social status making more sustainable behaviors.
Log in or sign up for Devpost to join the conversation.