Dash | Devpost

Inspiration

Some weather or news sites can be a little bit complex to navigate as we often have to click through many different pages and categories to get where we want to go. To solve this issue, we wanted to have all of that information easily and quickly accessible through a command search bar.

What it does

Dash is a dashboard web-app that allows users to fetch the current weather conditions of any location along with trending news articles of a specific location or topic. A user can type in “/news” or “/weather” with a location and topic to get the information they need quickly.

How I built it

The backend was built using Flask, which handled the API calls given user input to both the OpenWeatherMap API and the Python News API. The frontend was built using HTML/CSS/JS. Specifically, we used the Bootstrap framework for the interface, along with the Particles.js library to add a dynamic background and the Tippy.js library for tooltip implementation.

Challenges I ran into

--Front End-- Throughout the front end development of the webapp, there was an issue with CSS design regarding the background image fitting different resolution sizes which would end up creating whitespace. When moving corners of the browser, the font-sizes would not change with the new resolution. Lastly there were minor issues with the linkage to other websites and images with file paths that would prevent images or websites from being presented.

--Back End-- The back end portion of this web app required mainly Flask using Python, along with the usage of a bit of javascript. Getting user input and returning the necessary data from the APIs weren’t an issue, however, there were many instances of errors forming when using the try and catch solution to validate user input. The user input often has a strict range of acceptable values, such as the weather API only takes in valid and existing locations. This made the user input validation a huge part of the back end and due to that fact, it also came with many challenges of implementing our solution. The biggest challenge, apart from the user validation, was to simply be able to process data as fast as possible with the minimal sacrifice of accuracy. In other words, to ensure performance while maintaining data integrity.

Accomplishments that I'm proud of

Dash was our first full-stack project as well as our very first Hackathon! Our team learned how to work together on this project, using GitHub for version control and Discord for communication. Collaboration can sometimes be hard due to everything being remote, but we are proud of how well we worked together.

What I learned

We ultimately learned how to collaborate well in a team! For all of us, it was our first time using GitHub to collaborate on code. We learned the ins and outs of GitHub, like making pull requests and deploying our code. We were happy to learn new frameworks and technologies as well -- most of us hadn’t touched APIs and none of us had used Flask, so learning backend was an interesting feat. On the frontend side, we learned about the various Javascript libraries that can be used to enhance a webpage.

What's next for Dash

We want users to be able to access what they want easily and quickly, and we’d also like Dash to have more personalized aspects to it as well. In the near future, we’d like to add more features to Dash, such as a to-do list, daily statistics, and stock information, ultimately making it a fully-functional web dashboard.