-
-
Question 1 -- If you shower, you're wasting water. If you don't shower, you're a CS major! Congrats!
-
Question 2 -- Tell us about your mode of transportation. Choose wisely! But answer honestly.
-
Question 7 -- Did you know that one pound of beef requires 1800 gallons of water to produce?
-
End page -- you're super sus(tainable)! Check out the resource links to learn more about some of the topics covered in the Sus Check quiz.
Video timestamps
0:00 --> Intro and Project Description
1:03 --> Project Demo
3:26 --> Potential Impact
4:03 --> With more time, what would we add?
4:21 --> Biggest Challenge
Inspiration
Our team was inspired to create Sus Check because we wanted to create something that was funny while incorporating an informative aspect. With our experience in front-end development, we aimed for a project that would be simple to execute while being visually appealing.
What it does
Sus Check is a web application that evaluates a user’s sustainability score. We created a quiz that adds points to a total score based on the user’s answers to each question. The most sustainable habits are worth more points than the least sustainable ones. When the user is done taking the quiz, Sus Check displays a message tailored to the user’s score. There are also links to other informative resources regarding topics such as fast fashion, methods of transportation, single-use plastics, and sustainable diets.
How we built it
Sus Check was built using React. We used libraries such as react-router-dom and react-scroll, which provided button functionality and the ability to scroll to the next question after the user selects an answer. We also used styled-components for all of our website components.
Challenges we ran into
Our biggest challenge when creating Sus Check was with calculating the user’s score. With our limited experience in React, we weren’t sure how to make use of things like useState and useEffect, which were needed to increment the user score based on each answer to a question. However, thanks to the mentors at VenusHacks we were able to figure this out!
Accomplishments that we're proud of
We are proud that we have a finished product that actually works! Another aspect we are proud of is the styling of the components and the website’s appearance overall. Lastly, we are proud to have figured out how to calculate the user’s score and display a message based on that score.
What we learned
During the creation of Sus Check, we learned a lot about how to pass values into functions in React, such as the counter for the user’s score. We also were able to learn more about how react components can be created using various methods and that certain ways have benefits over others. In addition, we also gained experience in converting a Figma mock-up into an actual functional website and were able to better style the site as a result.
What's next for Sus Check
In the future, we hope to add more questions to assess the user's sustainability score and provide more resources! Not only that, but we would love to add more visual elements such as a gradient background or different button styles to improve the user experience.
Log in or sign up for Devpost to join the conversation.