A view of current environmental state


People talk about global change and how it affects wildlife and humanity. We thought it would be a great idea to actually show the impact, not just on the environment but also on humans.

What it does

Vyew shows you the current events, news articles, and tree locations on the world app. It takes in information from newsapi.org and sorts them based on tags. We wanted to use Watson Api in order to filter the articles, but it took too long to implement in our time constraint.

How we built it

After we decided on what exactly we wanted to do, we used courage and a lot of caffeine to start the project. We started by creating a custom React - Node.js - Express boilerplate, we were able to get a decent interface up and running in minimum time. Our next step was to render our world map and then find databases with appropriate data to plot into our map. We created our map using leaflet.js and used a template from openstreetmap.org. We then looked for suitable databases but this task turned out to be rather harder than expected. We were unable to find a suitable source for world maps so we settled with NYC open data and focused on NYC. As for news, we used postgresql as a cache for extracting news from newsapi.org. We had to do this because the api would only allow us a limited number of calls so storing the data for was necessary for testing purposes. We then used redux to store states and continued with react to build out other components for the navigation bar and other menus. Finally, to finish up our deployment, we used Google Cloud and registered the domain vyew.net from domain.com.

Challenges we ran into

We hit a little too many obstacles than we would've wished for. Our idea morphed and changed every hour depending on the resources we had available and the amount of time it took us to learn and implement something new. Watson API was a big challenge, not because we could not implement it, but because we couldn't figure out how to implement it on our postgres data set. Speaking of postgres, the API routes we made for newsapi.org worked but would often give us different mixed results for the same search query. So, figuring out the proper way to fix this problem took more than 50% of our overall time and had one of our teammates tied up for the majority of the duration. If we had more time and a little more experience, we probably could have done a lot more of what we had planned to do originally. Additionally, the marker function for leaflet.js has a bug that has yet to be fixed by the developers which resulted in us using radius instead of markers for plotting our points.

Accomplishments that we're proud of

THE EXPERIENCE! Attending hackathons for us is more of the learning experience than winning prizes. (winning something is a cherry on top, of course). For 3 of us, it was our first time using react-redux-express-node in this environment as we had just learned it recently and for our last teammate, who is new to this, he learned how we interpreted tasks in this stack and divided tasks. Apart from that, the various events helped us network and meet many talented people, both hackers and non-hackers which is always amazing.

What we learned

Teamwork, networking, working on a heavy time constraint with excessive caffeine in our bloodstreams and of course technical stuff like Javascript and its various libraries, node, react, redux (which still does not fail to be confusing), postgres and express.

What's next for Vyew

The first thing on our list will be to fix the map points itself. It currently shows radius and we would like it to be markers with descriptions. Using a different api source for it like Google Maps would be helpful. We would also like to integrate the Watson api somewhere in our program because we are highly intrigued by it and believe that it can really help us parse through our cluster of news sources. We would also like to make Vyew slightly more useful and exciting by adding more features to it in the future like sorting news based on geo location, adding options to search for specific queries and using a better news source api.

Share this project: