We were inspired by desktop widgets that display general information for the day, and wanted to try recreating something similar with React.

What it does

This website gives the user a daily update in an minimal, easy to use site. The weather and some current news are displayed, and you can create a schedule to map out your day.

How we built it

The web app was built with React.js, styled with CSS/SASS. We also used OpenWeatherAPI and NewsAPI to get data for the weather and news.

Challenges we ran into

The first major hurdle we had was that none of us really had experience with React, so even just starting was daunting. A couple of team members had little to no experience with HTML and CSS as well! Then, the Google Calendar API required a bunch of legal stuff to authorize usage, which was above our pay grade...

We pushed through, we bumped into issues with initializing JSON that seem to be React specfic. In addition, we had wanted some user interaction and selections, so we also had to receive those and update our modules and API calls accordingly, which caused some problems that were eventually fixed.

There were lots more road bumps after solving that, including fixing a couple of bugs in the dark mode toggle and a cohesive styling, but it all ended up pretty decently more or less.

Accomplishments that we're proud of

We're proud of having a finished product, despite working with React.js for the first time. We're proud of getting our individual components to function properly. We believe the design of the site (the icons -- especially how they change whether it is the day [sun icon] or the night [moon icon], dark mode, etc.) is pretty decent given the time constraint.

What we learned

We learned a lot more React and JavaScript than we were expecting to in 24 hours. Also usage of some public APIs, and some more CSS!

What's next for Morning Refresher

We could add authorization with the Google Calendar in order to get the events today, instead of having to manually input them! The Weather component also has the location stored within its state and utilized throughout, so that we can easily add future functionality in order to let the location be updated by users.

Built With

Share this project: