Inspiration

This project was inspired by some research a lecturer at my uni had done on the benefits of gamifying learning. Based on the current climate where more people in varying professions have transitioned to a digital presence, it has become pretty important to develop good cyber security practices. I want to provide an environment where persons can learn about various security concepts in a way that seems applicable to their day to day life and is pretty easy to digest.

What it does

Cybersecurity for Everyone is a choose your own adventure game aimed at introducing persons in non-technical roles to cybersecurity concepts in a relatable manner. Past choices can influence future scenarios and at each step, you will be able to learn from any mistakes made and understand how decisions can lead to a cybersecurity risk.

How we built it

I used Next.js framework and DaisyUI + TailwindCSS. The svgs were sourced from the amazing resource that is Story Set. It made adding animations and modifying the color scheme super easy.

Challenges we ran into

One of the major challenges was putting the game logic into code & handling any edge cases. It showed me the importance of writing tests 😅 I also had a bit of a time getting used to CSS grids, but in the end, thanks to Jen Simmons of Layout Land I was able to develop the required mental patterns.

Accomplishments that we're proud of

I'm super proud of following through with the idea and getting it from a few electrical pulses in my brain to an actual thing. I'm also really proud of making the layout as responsive as possible and getting a better understanding of CSS Grids.

What we learned

I learned a lot about CSS Grids and how to break an idea down to its core parts and build from there.

What's next for Cybersecurity 101 for everyone

I would love to add more scenarios for different professions after having more convos with people who actually work in them. I also want to setup a scene creator where others could use it to generate scenarios unique to their organization.

Built With

Share this project:

Updates