Woodsy

A story-based quiz website to raise the awareness about the climate change and educate people on other environmental problems.

Comment

Inspiration

It was a long time since I just gathered all the ideas for the projects I wanted to create, so I decided it would be nice to have a small push in the way of strict deadlines for the hackathon that was already going for 2 weeks. And one of the ideas I kept in To Do section of my log was a storytelling website with nice parallax animations that implements the concept of mission, by finishing which you will get an appealing results. When I was searching for hackathons I came across this one and thought that this concept fits the environmental problems field really well. Firstly, I was inspired by those educational quizzes we all were playing at home or at school: they were both interactive and gave necessary knowledge on the topic. And I decided that this kind of approach suitable not only for young kids learning basic stuff, but will also serve a good purpose to increase awareness about climate change and educate people of all ages.

What it does

It has 6 main components to it:

1)Preloader This is the loading animation-introduction which shows the user the reality of our negative impact on the nature, It is present to make the user start thinking, empathizing and smoothly transition the user to the actual functionality of the app even before the actions begin.

2)Landing This is where the story begins. In 3 sections user is immersed into the horrific situation that happened in the forest: wildfire. Parallax animation in the first section helps to unveil this story. In the second section the main character is introduced - A wood spirit named Woodsy. He is the one who asks for help and gives the mission to the user: in order to save the wood - user needs to successfully finish all 3 games: each gives a magical item that is required so the spirit can do its magic and revert the consequences of the disaster. And the third section is the games themselves.

3)True False Game This is a card flipping game that presents to user some of the facts about climate change and user should understand what is a real fact and what is a misconception.

4)Waste Sorting Game This is a simulator that is intended to teach people how to sort different items. User should find a relevant container (compost, recycling or landfill) for each of them.

5)Associations Game Here user has two columns of emojis: on the left - an action/habit, on the right - its impact. And user should match those. If the valid pair is found - a pop up with more detailed information about this sustainable habit and with additional resources appears.

6)Congratulations And if user have won all 3 games - a treasure box becomes visible in the games section. On click a congratulation pop up is opened. It provides an opportunity to get a gift - a 30-day eco-friendly checklist: a Canva document that I created to help users establish eco-friendly day-to-day habits.

How we built it

Firstly, I used a sticky notes to brainstorm and come up with all of the features I wanted to include to this app. Then I made a rough design drafts on the paper and later converted them in working prototypes with Figma. To start implementing it I used Vite build tool to initiate the React project and configure stylings with TailwindCSS. Throughout the project I created the main page components and smaller functional components. For animations I utilized GSAP and FramerMotion libraries and of course plain CSS. For drag and drop functionality in Waste Sorting game I made use of React Beautiful dnd library. For the last game - Associations, I came across an interesting library called React Flow. And exactly this find laid out how this game will look and function.

Overall the built process was based on:

  1. Modularity, as everything is refactored in logical components
  2. Use of React Hooks like: useState, useRef, useNavigate, useContext, useEffect etc.
  3. Managing the progress of the whole journey and individual games with context - because I didn't see the point in making use of local storage or a database: as this app was intended as a one-flow story that user should finish in one go to really immerse in the experience and atmosphere.
  4. Utilizing libraries I have never worked with before.
  5. Relying on utility classes for quick styling and optimized final CSS files.
  6. Implementing interesting and compelling animations.

Challenges we ran into

I won't lie, even though the application is not that complex, but because it should have been really visually appealing, there were a lot of issues with styling and responsiveness: as games are interactive it was quit hard to organize everything so that they can be played even on smaller screens, especially Waste Sorting game. There were also some challenges with React dnd library as this library is no longer updated and supported (developers created a new library instead of continuing working on this - only security updates are made currently). And I didn't want to migrate to the new library as I had already put a lot of effort into trying to make needed functionality with this one. So it was a bit complex to orient in the documentation and make changes on the go because something was not working anymore or worked in a bit different way.

Accomplishments that we're proud of

I am really proud of the fact that I was able to implement practically what I had in my mind almost from scratch and it looks and works exactly how I imagined it. When I started I had 0 ideas of how exactly I am going to do all of these crazy to-do items that were the results of my crazy imagination. But I am happy I didn't give the initial idea and didn't cut the corners during the work to make it a bit less challenging.

What we learned

Before this project I didn't had much experience of working on the project alone without the need to always rely on the tutorials and being dependent on them. Here I gave more freedom to my mind to try and figure out how to do something on my own and of course with the help of documentation (which I understood is a much grater greater source of info that doesn't makes you "numb" in front of the screen but pushes you to act). So in conclusion, I learned to be more proactive and not to afraid of failures and challenges (there were a lot of them).

What's next for Woodsy

I am definitely would like to make it look better for mobile devices, because I didn't have much time left to make the landing page responsive. I also think, it has a great potential to provide even more interesting and educational quizzes. It would be also nice to create a user profile and ensure that all the info from the games can be revised with the help of spaced repetition cards or something like that.

Built With

Share this project:

Updates