TypeRose was created because we wanted to make a better, more approachable way for anyone who is even slightly interested in code to get started. We think that current ways of teaching code are not very readable, and often have large walls of text that are intimidating to someone who's unfamiliar with anything related to programming. We believe TypeRose can convince those who are intimidated by code, or don't think it's for them that anyone can code.

What it does

TypeRose is a web-based learning tool that takes the user through a series of lessons as a basic introduction to the concept of programming, and makes the user familiar with how programming works. Once the user inputs a login and hits play, the lessons begin.

The program begins with an introduction of how a program stores information, the variable. It describes variables, and prompts the user for responses in order to familiarize them with the syntax of actually typing the code. Once the user inputs the correct answers to the prompts, it moves forward to discuss the different variable

How we built it

TypeRose was built using HTML, CSS, JavaScript, express.js, Node.js, and Bootstrap. Although we used Bootstrap on the login page and buttons, every single other style and keyframe animation is pure custom CSS. We used a hash system to decrease load times as much as possible, making the user stay on the same page and simply changing the content within it. This made transitions between sections incredibly quick and smooth.

We implemented the login system using MongoDB, a Google Cloud database. While we only have one functional user currently, and did not have time to build a full working registry, the framework is in place for when we have the time to implement it. The database can keep track of a user's progress within TypeRose, and allow them to return to a lesson whenever they like using the hash system we implemented.

We implemented the interaction with the user by trying to be as approachable as possible. By only outputting one text line at a time, it allows the user to fully read each line and process it. We felt a large problem with current code learning tools is that there are too many walls of text, and that intimidates many new learners. By taking it one line at a time, we can ensure no user feels as though they are unable to handle the content. We also decided on a large text size to make the text accessible for those who may be visually impaired - a serious blockade for learning code.

The animations and the aesthetic were designed to be smooth on the eyes and cohesive, making sure no jump feels too quick, and that the user is being taken on a ride. This user experience makes learning code much more comfortable.

We thought the Penrose triangle was symbolic of how impossible it can feel to begin programming when you've never done it before - it's near impossible to even comprehend at first glance. But the goal of TypeRose is to make comprehension a breeze, and make the experience of learning code enjoyable for everyone.

Challenges we ran into

We originally wanted to implement a "TypeWriter" style of text output, creating an even more pace controlled environment. However, what we realized is that, in JavaScript, Promises don't work well on recursive functions - the flag is not properly signaled. We only ran into problems with this when trying to implement multiple lines of TypeWriter on one page, as the program would just move on without waiting for the recursive function to finish. We scoured for solutions for about 5 hours, and settled on simply making the text output a different smooth style.

There were also challenges in making the animations as smooth as possible between hashes - there's about a single frame of document body while switching hashes. We had to implement a dynamic document body style in order to change background color based on where the user was in the program. It was a difficult solution to come up with, but we created an experience that was as smooth as we could get it.

Accomplishments that we're proud of

409 lines of custom CSS was not easy, but incredibly satisfying to watch all the different parts of the website work with one another to create a seamless, aesthetically pleasing experience. The whole goal was to make coding comfortable, and by creating gorgeous transitions and precise keyframes, we accomplished that goal.

What we learned

Never underestimate how long it may take to implement an idea you have. Like in the case of the TypeWriter, we thought it would not take too long, but problems will always come up where you have to make solutions on the fly, and sometimes those solutions can take hours to find - or don't even necessarily exist. Don't be too attached to what you write.

On the other hand, we learned how insane our potential is if we put the time and effort into creating something we care about. This is an insane amount of code, for the time limit, and even though we wouldn't usually stay up for 38 hours, making this exception showed us how much we can really do.

What's next for TypeRose

We want to implement several more learning modules for TypeRose. Learning code is an extensive process, and it wasn't realistic for us to be able to flesh out TypeRose's content given the time frame. Going forward, we would like to teach more and more, and even dive into specific languages in the future.

We also would like to implement features to revisit modules, once we have created more. We look forward to improving TypeRose in the future!

Share this project: