LearnWithMelvin

Landing Page
Challenge
Initial Design

Inspiration

'LearnWithMelvin,' named after our cherished plush toy Melvin, is a pioneering project inspired by Capture The Flag (CTF) challenges. In today's digital era, we realize the importance of cybersecurity cannot be overstated. Unlike traditional battles against natural elements, we now face a new kind of challenge — threats originating from human actions in the cyber world. Through our own personal experience of getting involved in the IT/Cyber Defense space, we made it our initiative to cultivate critical thinking and problem-solving skills crucial for future engineers from an early age. By introducing young minds to the fundamentals of cybersecurity, we're not just nurturing future talents but also preparing them for the reality that the most significant, yet common threats now arise through the internet.

What it does

'LearnWithMelvin' is an innovative educational platform that immerses young children in the world of STEM, focusing on vital areas such as cybersecurity, reverse engineering, and cryptography. Our approach is unique in that we present these complex concepts in a manner that is not only accessible but also engaging for young minds. To achieve this, we have employed a combination of cute, child-friendly graphics and a straightforward, user-friendly interface. These visuals serve a dual purpose: they reduce the intimidation often associated with technical subjects and they make the learning process more enjoyable. Enjoyability eventually results in "long-lasting" usage.

How we built it

We split the creation of LearnWithMelvin into two parts: design and implementation. In the design phase, we had a dedicated UI/UX designer who was responsible for crafting a general mock-up of our product. Furthermore, we preemptively planned our presentation slides simultaneously.

In the development of LearnWithMelvin, we harnessed the powerful combination of React, Bootstrap, and Firebase to create a comprehensive and user-friendly platform. For the front end, we utilized React for its efficient and flexible approach to building interactive user interfaces, which was further enhanced by integrating Material UI and Bootstrap. This combination allowed us to design a responsive and visually appealing layout, ensuring that the platform is both attractive and intuitive for young users. We chose Firebase for its versatility and ease of use, particularly for developing our login database. Firebase provided us with a reliable and scalable solution for user authentication and data storage, essential for maintaining a secure and efficient user experience. Additionally, firebase is known to be a quick and fast solution which is perfect under the time constraints of the hackathon. This robust technology stack enabled us to create the sensation we have for you today.

Challenges we ran into

Throughout this project, our team, mostly new to web development, initially struggled with where to begin. Despite attending a web development session, applying those concepts in practice proved challenging. We grappled with implementing fundamental components like buttons, colors, and images, and creating landing and sign-in pages. Nevertheless, through dedicated research and a trial-and-error approach, we successfully navigated these challenges to achieve our goals.

Accomplishments that we're proud of

Despite the complexities we faced in developing LearnWithMelvin, there are several accomplishments we take great pride in. Firstly, we succeeded in creating a functional task/challenge, serving as a tangible demonstration of what 'LearnWithMelvin' has the potential to become. This milestone was crucial in bringing our concept to life. Secondly, we gained a fundamental understanding of web development, opening our eyes to the vast possibilities of what we could create within this domain. Lastly, a significant achievement was the making of our initiative to contribute to the future. We all have some connection when it comes to teaching others; hence, why we pursued the project. This key functionality, spearheaded by our product manager (PM), Johnny, was essential in laying the groundwork for a scalable and user-friendly educational platform.

Side note, our GitHub repository was the most satisfying thing to look at

What we learned

At TAMUHACK X, we believe to have gained invaluable insights into various facets of web development, organizational skills, and team dynamics. Focusing on the technical side, we delved into the nuances of web development, specifically mastering React and Bootstrap for crafting responsive and attractive layouts. Even though three-quarters of our team were novices in web development, with little to no experience in HTML, CSS, or JavaScript, we boldly chose to challenge ourselves by opting to use Bootstrap.

Additionally, we further our understanding of the importance of organization and documentation. We learned to effectively use Git for version control, ensuring a smooth workflow and easy collaboration among team members via enforced pull requests and denial of direct pushes to "main".

Lastly, we discovered the crucial role of serving as a product manager, especially for our more experienced teammates. This involved understanding and balancing the varying skill levels within our team, prioritizing tasks, and ensuring that each member's contributions were aligned with our project goals.

What's next for LearnWithMelvin

Although we’ve learned a lot with Melvin, there's a lot of potential in LearnWithMelvin. We will divide this discussion into two parts: polishing and content.

While LearnWithMelvin has achieved significant milestones, there's a considerable scope for refinement to enhance its overall effectiveness and user experience. Currently, the platform, though functional, can be described as quite barebones. This initial simplicity, however, should not be mistaken for a lack of sophistication in our implementation. It forms a solid foundation upon which we can build and scale. The polishing phase, therefore, is a crucial step towards achieving a successful platform that can change how education in cybersecurity is perceived.

The focus of our polishing efforts will be on refining the user interface and optimizing the user experience to make it more intuitive and engaging. This includes improving navigation, enhancing the visual appeal with more interactive and age-appropriate graphics, and ensuring the platform is responsive across various devices. Additionally, we aim to streamline the back-end processes to support a more robust and scalable architecture.

Now for future plans with LearnWithMelvin in terms of content, we want to further our project by creating more advanced levels for students to learn. Our current project focuses on engaging and introducing basic concepts of CTF so students can learn how to reverse-engineer. Parents who want to challenge their kids to think conceptually and out of the box can use LearnWithMelvin to take problem-solving to the next level. However, once they grasp the basic concepts of our current challenge, we want to integrate other forms of cryptography so high school students and even college students can challenge themselves. Furthermore, we also plan to give students a final project, where they create their own CTF challenge for other users to participate in. This will enable users to apply what they learn and showcase their skills. Users on LearnWithMelvin can see the creativity of other students and be inspired.