School has been really stressful for everyone lately, so I wanted to create something that motivates students to complete their assignments by turning them into a game. In general, I love the idea of gamifying productivity and learning using apps like Habitica and Duolingo, and I've always wanted to create my own.

What it does

On the front end interface, you can create new "quests" by entering a name, difficulty level, and list of tasks. When you start a quest, each task becomes an attack button that you can click to deal damage to the boss. Once you complete all of the tasks, you celebrate with a blast of confetti!

How I built it

As a mobile developer, I decided to expand my horizons by using React as my first step into front end web dev. I started with the Create React App and custom HTML, then switched to using Material-UI. I also created the simple logo and graphics using Figma's vector drawing tools. Near the end of the night (or rather the beginning of the morning), I set up a Firebase project and created routes for creating, retrieving, and deleting quests in hopes of connecting to backend, but ultimately wasn't able to.

Challenges I ran into

I had a lot of trouble understanding how state is managed in React, especially using hooks and functional components. I ran into a bug where the quests in the list don't update correctly and was ultimately unable to identify the problem. I was hoping to connect to backend to help with this issue, as then the frontend wouldn't be handling managing data, but I wasn't sure if I could combine them into one project or had to keep them separate and figure out some way to connect them. I was a bit overwhelmed by how many Firebase packages there are and didn't know which was appropriate for what I wanted to do.

Accomplishments that I'm proud of

I'm proud that I took this opportunity to genuinely expand my horizons and learn new skills. In the past two hackathons I've done, I stayed in my comfort zone with Flutter mobile development and shied away from trying new technologies, but I went full speed ahead this time with learning about React and JavaScript libraries. Although I didn't get as much done and found myself stuck, I'm really glad that I took the first step forward because that's always the hardest, and I know I'll be more comfortable with learning more about webdev in the future.

What I learned

I learned about both frontend and backend web development and how using Material-UI and React allows for more reusability and responsiveness than standard HTML, where you really have to implement everything manually. On the other hand, I found that Material-UI had so many built in components that were easy to use and customize. I also now think front end web dev can even be harder than backend because it's not easy to build responsive, accessible websites.

What's next for quesTodo

After getting more familiar with React and fixing the bugs to get a functional MVP, I'd like to learn how to connect the frontend to backend, then add more planned features like gaining rewards and coins for completing quests to make it more fun and motivating!

Share this project: