On A Mission | Devpost

Landing Page
Task Manager - Empty State
Task Manager
Timer Page
Store Page

Inspiration

As students and people who love taking on challenging tasks, we know how hard it is to stay on track and not be distracted, especially during remote work and learning in Covid-19 times. Our team decided to create an application that helps solve this problem in a fun and unique way to stay productive by breaking down our challenges into something digestible.

What it does

This application is mainly about breaking down problems. People often find themselves undertaking a large task and they are unsure how to go about it, so they leave it off until they need to take it all at once. This application helps people look at that large task and break it down so that they can complete it with ease without having to worry. We prompt our users to create "Missions" and let them decide if they find it very difficult or easy. If it's easy, then we can set a timer to perform the Pomodoro technique. If it's difficult, we ask them to keep breaking it down until it is easier to complete. These users can then earn incentives by spending time in successfully completing these tasks. As we revolve around a "Space" theme, we allow users to purchase spaceships to decorate their timer.

How we built it

We built "On a Mission" first by creating a prototype on Figma. By creating the mock design app on Figma, we were able to better gauge the responsibilities among our teammates.

After having an outline for our application, we used Microsoft VS Code and collaborated together on Live Share. We used vanilla HTML, CSS, and JavaScript to build the front-end and functionality of the app. We also used Express.js and Node.js to create the backend API endpoints and the Joi data validation JavaScript library, tested with Insomnia and Postman. We experimented with Google Firebase and their Cloud Firestore.

Challenges we ran into

We had a hard time understanding how we would be able to store the tasks/missions into a particular data structure. The data structure had to be dynamic and be able to hold different missions. For example, a "Hard Mission" is able to store multiple Medium and Easy Missions. A "Medium Mission" can only store Easy Missions. We also had to consider a different option, such as using JSON to store the data instead.

We had to discuss what to prioritize when building the application. We were interested in creating nice and beautiful designs, which was done in the frontend, but we realized that it would take a lot of work when we have very limited time. The code that we planned to complete would have taken a long time as well, even when the code is the main part of the application. We had decided to focus on creating a Figma prototype that would appear very close to the final product so that we know what we plan on coding when working on it in the future.

Another challenge we faced was working with Google Firebase as we were new to creating an application with their platform. We had trouble trying to create an API endpoint that would store our data into Firestore.

Accomplishments that we're proud of

We accomplished the vision that we had for the application as it very much correlates to the what we had in mind. Although not ideal, we have a great foundation to program off of and we were able to learn a lot about stylings, UX/UI design, and logical implementations in code.

What we learned

By using vanilla HTML, CSS, and JavaScript to learn more about web development and creating web applications.

After using Figma, we learned more about UI/UX design fundamentals and creating interactive and unique pages that gauges our users.

What's next for On A Mission

We plan on creating many different features, such as:

Sorting by priority/completion
Adding a date
Add ability to Edit missions
Using Google OAuthentication
Search Function
Improved color palette
Display informative page to understand how to navigate the application
Create other in-game purchases such as: backgrounds, trails, planets, and more spaceships!
Apply animations to various parts of the application
Parallax landing page
Responsive web design / Bootstrap or Media Queries
Deployment on Firebase
Personalized profiles