Inspiration
Regarding this issue, I've always thought that one of the most effective ways to prevent victims, especially young ones, is to teach them to vocalize discomfort and not to feel ashamed to do so.
A precedent that victims will speak out instead of keeping it to themselves will deter potential abusers. This of course will not solve the problem entirely, but I think it will help.
What it does
It's a simple web quiz game aimed towards children. It's comprised of different lessons, which themselves have a set of questions centered around the theme of their corresponding lessons. The main theme of this quiz is boundaries.
Each question of each lesson will have multiple choices. Upon incorrect and correct choices, the user will be given a proper explanation of why a particular choice is incorrect or correct, respectively.
The design is meant to be colorful and fun to stay light in mood while also effectively imparting important lessons to children about boundaries, respect, and vocalizing discomfort.
This app is also very extendible, meaning adding more questions and lessons will be very easy and quick.
How we built it
I built this using React and TailwindCSS with Vite as the base framework.
Challenges we ran into
Coming up with questions and lessons were the most difficult part of this process. I tried to make effective lessons while also keeping the mood fun and friendly.
Accomplishments that we're proud of
I'm glad to have accumulated enough questions, answers, and lessons to fill an entire quiz game.
On a technical note, I learned a lot about animating React applications in general and some specific techniques like staggering animation on component children.
What we learned
I learned about animating using framer-motion. But importantly, while researching questions for this application, I was enlightened on some real world issues that many young people face.
What's next for Boundary Buddy
I hope to add more meaningful questions to the quiz. I also want to add more fun elements to the application.
Built With
- framer-motion
- react
- tailwindcss
- vite
Log in or sign up for Devpost to join the conversation.