CyberPrint

Your Guide to Digital Awareness

Comment

Inspiration

When we came together for our first team meeting, we immediately decided that we wanted to create something for social good. With the global pandemic, we recognized that many of us have gotten a lot closer with technology than we were before. That being said, some of us may have not realized the impact on our lives and other lives that our use of technology has. We decided that we wanted to educate people so that they become digitally aware of their technology usage. However, we didn’t want this to be an ordinary resource guide. To encourage learning, we decided to also include an interactive game to help make it easier to retain information and test current knowledge.

What it does

CyberPrint is a one-stop guide to become digitally aware. It includes key information for what you need to know to become digitally aware. It covers important topics such as what digital footprints and digital citizenships are. Along with given information, there are links to important resource guides one could use to conduct their own research and discover new things on their path to becoming digitally aware. To solidify their learning and test their knowledge (both prior and learned), CyberPrint has a built-in trivia game for the user to interact with and try to achieve their best score possible, competing with other users around the world.

How we built it

We created our wireframe in Figma and used that as a reference guide for our website. We built CyberPrint with Qoom, HTML, CSS, and JavaScript while utilizing both resources found on the web and the tutorials found on Qoom itself. We created graphics on our website with the help of tools such as Canva and Procreate.

Challenges we ran into

We’re a pretty ambitious group, so we all ventured out and tried implementing and trying to do new things for CyberPrint. First off, creating the wireframe in Figma was difficult for us since we had little to no experience using the application. However, it definitely paid off in the end because we created a website that closely resembled what we had visioned, which is always satisfying. Second, working with JavaScript was also a brand new adventure for most of us. Implementing the user login system and the game both were proven to be giant hurdles we had to face. Additionally, there were a few issues with Qoom itself. The collaboration system is still in beta, so some of our changes were lost due to simultaneously working on the code, so that did set us back a bit. There were also file limits so we had to access images from outside of the project. However, we were able to work around all of our challenges through research, tracing back our steps, and troubleshooting on the go, and still ended up with great results.

Accomplishments that we're proud of

This was our first hackathon for two of us and first hackathon team for three, so it was definitely a wonderful experience coming together from 3 different states/provinces to create CyberPrint. We’re proud of our planning process, utilization of various tools and resources, and design process as we understand that it’s not just about the coding and the final product. The planning process is very important as well. We’re proud of all of us for going out of our comfort zones for this project, learning new things as they come up, and our abilities to help each other out whenever necessary. We had a great collaborative environment which led to a successful end result. Finally, we are incredibly proud of CyberPrint as a whole, from the message and mission to the intermediate features it possesses. We definitely think it could benefit many people coming from different backgrounds, and constantly relates back to our current world’s state and its growing future.

What we learned

We learned several things about web development and its process through this experience. It was our first time using Qoom and/or Figma, two crucial tools we used to allow CyberPrint to come to life. We learned about the design process and how planning the design beforehand makes web development more efficient. Additionally, we learned that it’s important to make the interface of our website more user friendly and interactive. We learned about various new properties in HTML, CSS, and JavaScript and effectively implemented them into our project.

What's next for CyberPrint

We recognize that CyberPrint has a lot more potential. There are far more topics to be covered and better ways to implement our ideas into the site. We could add more topics including internet safety, what malware is, the impact of technology on our mental health, and more. We could create more uses for the user system. As part of our original plan, we could create a community tab and a chat feature where users can interact with other members of the CyberPrint community, allowing them to practice their newfound digital awareness while interacting and growing with each other.

Built With

Share this project:

Updates