We were motivated to create a tool that could be used to help educate kids about social media and cybersecurity, in a fun, engaging and contextual way.
Current cybersecurity education lacks context and is detached from the tools and platforms kids actually use. That is why we wanted to create an interactive, educational experience which looks and feels like a real social media platform. We hope that by doing this, kids will better associate the dangers they are taught about at school with their own experiences.
What it does
Fakebook is an interactive experience which guides users through some common social media interactions and helps them identify dangers on the platform, asking them what they would do and teaching them how best to respond. In some ways, Fakebook is a test of a user's cybersecurity savviness. Once users have completed their educational journey around the platform, we give them access to the live Fakebook site where they can make posts and see posts made by other Fakebook users.
How I built it
React.js: Front end, The entire application is built with React, using state hooks and components to make this a single page application with conditional rendering to make elements dynamic and responsive. HTML/CSS: For webpage structuring and styling, with custom CSS for each individual react component. Firebase: For hosting and database storage of the live site's posts
Challenges I ran into
Our two team members combined had around 8hrs of react experience previous to this project, so we encountered a lot of problems as we learnt on the job, Our use of hooks and states was not totally efficient and we definitely need to refactor the code and remove excess files and functions. One of the biggest challenges was trying to effectively divide the work between two people and then having to combine different workstreams and files at the end without breaking the project.
Accomplishments that I'm proud of
We are very proud of the visual style and design of Fakebook. We were amazed at how quickly we could create functional components which looked just like Facebook itself. We are quite proud of some of the micro-interactions in the journey such as the comments and the friend requests appearing on cue. We also thought it was super cool to have a live news feed which other people can post to, our own little Facebook.
What I learned
We both learnt crazy amounts about react, how powerful it is and how confusing it can be to write in JSX. I learnt a lot about state management and conditional rendering and I'm now very excited to make another react app. Ultimately we learnt how much we can get done in such a short time and we are very proud of our app.
What's next for FakeBook
The sky is the limit for Fakebook! We think that this app could be developed into a complete cybersecurity education system which could be used at schools and at home. We could gamify the experience with challenges, levels, badges and rewards and we could create looks-like clones of many other social media platforms to address some of their inherent dangers. This is just a small taste of what this kind of app could do and we have only touched on a few very small social media dangers, there are many others we could highlight next.