Test github action
This project is a Turing front-end evelopment project focused on working with React, Redux, and and Enzyme/Jest.
This was a custom app I built for my household to track weather metrics we cared about that are being measured by a weather station in our backyard. I was excited to see there's an AmbientWeather API for this, and also made use of Darksky's API for weather forecasting so we could see both historical metrics and future forcasting in our area. I passed on any details in other weather apps we don't care for and included the metrics we most care about.
If you'd like to clone this repository to your own local machine, run the following command in your terminal:
git clone https://github.com/lynnerang/rang-weather.git
Then run the following command to install dependencies:
npm install
To view the app in action, run the following command in your terminal:
npm start
Then, go to http://localhost:3000/
in your browser to see the code running in the browser.
- On the home page, you can see the current metrics from a specific AmbientWeather device and how they have been trending over the past ten hours.
- On the forecast page, you can see weather forcast data from Darksky like the high and low temperature for the day, sunrise and sunset times, and whether a storm is nearby.
- Below on the forecast page, you can also see hourly metrics of the weather for the next twelve hours.
The spec I was given had no information on UI design elements, so I started by wireframing a general idea of the layout.
Then I created a high-fidelity prototype of the design on Figma to have a more detailed idea of where I wanted everything to go on the different screens pages.
I plan to keep working on this to add more features like a notification setup interface where I can receive a text on my phone for instances like the following:
- If the house temperature is outside the expected range
- If it gets below freezing outside
- If it is raining or snowing at my house
I'd also like to add more interaction like tapping indoor vs outdoor to see metrics over time for each.
View the project specification on the Turing webpage for this project.
- HTML & CSS
- Flex-box
- Wireframing
- UI design
- React
- React router
- Redux
- Es6 classes
- Async JavaScript
- API fetches
- Enzyme & Jest testing
- Webpack
- NPM
All credit goes to Turing School of Software for providing the project specifications.