A global warming quick reference for user's who would like to add sustainable efforts into daily routines.
View Deployed Site HereSummary | Tech Used | Getting Started | Current Features | Future Features & Noteworthy Limitations | Preview | Learning Goals | Organizational Tools | Reflection | Contributor
For the fast paced user who is looking for a quick and reliable climate change reference tool.
When a user visits the project•HTRAE website, they first land on the home page which gives a breif explaination of the mission. From there, the navigation bar offers a few pages to sift through. The first three pages: 'CO2', 'Surface Temp', and 'Glacial Melt' all have graphs to help visualize data and give context to the statements on each page. When a user clicks on the 'Sustainable tips' button in the nav, the page they are brought to generates tips for the user to incorporate into their daily life. The sustainable tips page can either be refreshed to display a new pointer or the user can click the 'Another Tip' button. The user has the ability to save and un-save lifestyle tips of their choosing. Additionally, viewing their saved recommendations is an option as well. The last page to check out is 'This Planet' page that offers some beautiful landscape images as a 'why' reminder to the mission.
JavaScript | CSS | HTML5 | Cypress/E2E | ReactRouter | React | React vis | propTypes
- Clone down this repo
- Then
cdinto the directory - Run
npm install - Run
npm start - Paste this:
http://localhost:3000/into your browser
- User has the ability to save and un-save lifestyle tips.
- Saved tips persist on page reload for better UX.
- Offers quick information on an expansive topic.
- Nice visuals, including graphs and overall UI.
- Add more images to 'This Planet' page & when the user hovers an image, flip it so the user has some context for each image.
- Add a few more pages on other natural gases that play a role in climate change, ex. Methane and Nitrous Oxide.
- Somehow add more places for the user to interact with the application.
- Implement responsive design for mobile devices. The graphs are pretty tough to style to how they are but I'd love to make it more responsive for more users.
- Better understand working with async JS
- Fine tune implementing a 'favoriting' feature in React
- Learn how to test E2E using Cypress
- Practice Router functionality
Project Spec • GitHub Project Board • Wireframe • Inspiration Board
As my final project of the term, I'm proud of my accomplishments with this project. It wasn't the easiest or least stressful that's for sure. However, I feel like I've gone beyond my original goals for this project, including taking on more self teaching than I time budgeted for. One aspect that used a lot of time was implementing a graph package. I found one I really liked but, as it turned out, that library used typeScript which made using it in this project not an option. I invested a lot of time learning and applying that package and when it didn't work out, I felt pretty defeated. Thankfully, I found another graph library that got the job done. With the deadline looming, I wasn't able to research it as much as I'd like since I still had to balance other project tasks.
All the while, the other huge hurtle for me during this project was changing the initial mvp. Originally, it was focused on a user updating the graphs. But, because of the hardship I felt with graphs at this point, I had to change the mvp. I was stressed but also confident that I would figure it out and I did. I must say too that I'm happier with this second mvp than the original. I think it gives the user a more relaxing experience with this application. It all worked out!
In the end, I delivered on the MVP and gave the user a friendly, informative and easy to use application. With additives like local storage, a 'fun' 404 page featuring an animation, and multiple pages that convey insightful information, I hope user's can see the enthusiasm that went into building this site and will enjoy using this application.