ConQuest

First page. Sign in/Sign up
Login In page
Login in page. Forgot Password
Sign Up page. Avatar customization and user input form. Blue Avatar selected
Sign Up page. Avatar customization and user input form. Green Avatar selected
Sign Up page. Avatar customization and user input form. Red Avatar selected
After sign up page. Asks to List all tasks for the project.
After sign up page. Subtopics for the main topics.
User dashboard. Contains all projects, shop, and inventory.
Inventory menu.
First shop menu. No category selected.
Second shop menu. Helmet category selected.
Third shop menu. Pet category selected.
Fourth shop menu. Mount category selected.
First page of project progress, avatar is at the start. Contains map, tasks, inventory and shop
Second page of project progress, avatar moved once. Contains map, tasks, inventory and shop
Third page of project progress, avatar moved twice. Contains map, tasks, inventory and shop
Fourth and last page of project progress, avatar is at the top. Contains map, tasks, inventory and shop

Inspiration

We were inspired to create something that makes users motivated to get their big projects done by having a visual motivator when completing tasks. Everyone likes checking items off of their list, but getting rewards and seeing your character progress through their quest is an added bonus! We wanted to game-ify productivity and make getting things done feel like leveling up!

What it does

ConQuest allows a user to create their avatar, list their tasks and subtasks, and watch as their character makes their journey through the map to accomplish their tasks and conquer their overall goals as the user themselves checks off their real-life tasks.

How we built it

We started with brainstorming based on the prompt, coming up with the idea to game-ify productivity and setting our initial goals and wireframes for our website. We then talked about UX/UI and how the flow of the website should work (i.e what buttons will go where).

For the backend, we started with making UML diagrams, and then trying to build our relational schema in order to integrate a proper backend.

For the frontend, we started by making some Figma mockups to get an understanding of what we wanted our final product to be, and then translating those mockups into our actual website, as well as routing the website's buttons to move around our pages.

Challenges we ran into

The main challenge that we ran into was being too ambitious with our scope. However, we navigated this by still working on our mockups to show off our ambitions and what we eventually hope to do with this project. The other main challenge was integrating PostegreSQL through a remote server, as well as learning Express and React for the first time. Overall, we were ambitious with our goals, but still proud of what we managed to learn!

Accomplishments that we're proud of

The mockups of the overall projects look great and reflect the feel that we want to provide to the user. We are also super proud of all that we attempted to learn, both design and technical wise, and how we were able to stay consistent throughout the entire event in attempting to make our vision come to life.

What we learned

Something that we have learnt is how to integrate a Postgres SQL backend locally, how to work with React, and work with libraries such as Axios, the PG library. Express and Node to connect with our backend.

We also got more experience in creating visual assets in a pixel art style, learning how to use the Aseprite software, as well as improving our Figma skills to create mockups. We are very proud of the visual components that we were able to design in only 24-hours, especially considering this is our first time doing pixel art!

What's next for ConQuest

Something that we hope to implement in the future would be the rest of the Figma Designs. There are some awesome concepts that would increase how engaging the site can be to a user, such as adding a shop, currency and an inventory.

Built With

Submitted to

MRUHacks 2024

Created by

I worked on the design and on implementing our pixel assets into the website. This was my first time doing pixel art (or any art really!), as well as my first time using JavaScript outside of class!

Ashley Hunchak
I worked on creating the visuals using aseprite for my first time. Majority of what I did was put together the UI layout for the site using Figma, as well as provide a visual on new concepts we want to implement given more time. I was able to learn some react and JavaScript and contributed to some of the implementation for the front-end.

Viktoriya Bolgachenko
I worked on the back-end. It was my first time working with a PERN stack, but I came out learning a lot about APIs, querying databases and http requests in general. It was a steep learning curve, still super worth it! (i know how JSON objects work now :D )

Dara A
I worked on the back-end and implemented some front end features! It was my first time working with express, and integrating a POSTGRESql back-end with a react based app. I also worked with a few react libraries that I did not work with before.

Nik Srivastava

Updates

Ashley Hunchak started this project — Oct 05, 2024 11:39 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.