Our inspiration starts with one of our team members having learned the language before. To apply the language, he tackled a computer science competition problem in the language. After completing the problem, our teammate showed our teacher the code. After being shown the language, his teacher thought that this would be a good application to help teach his students to learn the problem solving and logical thinking needed in computer science. As the language has an application to teach logic at the high school level, we wanted to create a course that allows younger children the same experience.
What it does
Brainfun is an intuitive experience to help teach young kids logical thinking and programming via the esoteric programming language Brainf***(it is traditionally an expletive throughout the rest of the written portion we will refer to the language as Brainfun). We provide 19 unique exercises and easy to use UI to help promote learning. Additionally, it allows authentication so your progress is saved. We give notes that help the user retain information and an easy to use environment so that a language typically hard to visualize is now easy to visualize.
How I built it
We used a modular approach to build BrainFun. Each piece of the website was made into a Vue component and then pieced together. To manage the website's state, we created a flow of events to transmit information to and from the different components.
Challenges I ran into
Our three biggest challenges were: Dealing with the changing data states. Passing data between components Integration between front-end and back-end
Accomplishments that I'm proud of
I think the two things we are most proud of are: The UI and how the website looks. We got a working product that helps our community. I am proud of the login functionality that we added.
What I learned
As a team, only one of us knew Brainfun prior to the hackathon, so as part of the process we all learned the language. Below are individual things we each learned.
Adam - I learned how to use Vue for the first time which allowed us to make a unique front end design. Along with this, I learned how to implement new libraries such as Vuebash material
Tyler - I improved my skills in CSS. Prior to the hackathon, my skills were very limited. I specifically used CSS to help style the front end of the website.
Peter - I primarily designed throughout the process. I learned about the design workflow. Also, I got exposure to the iterative improvement process.
Iain - I learned how to make JSON objects for the first time to store the lessons, exercises, and answers.
What's next for BrainFun
We will continue to work on Brainfun to make it a viable platform for people to learn to program. One thing we hope to improve is the responsiveness of the website. Additionally, note that the domain below, brainfun.tech, was bought at Domain.com via the code we received.
Music Credit for Video: "Show Your Moves" Kevin MacLeod (incompetech.com) Licensed under Creative Commons: By Attribution 4.0 License http://creativecommons.org/licenses/by/4.0/