HabitHatch!

openai api implementation
dashboard with list of completed goals/collected hatchlings
checked boxes
unchecked boxes
enter your goal
log in page
sign up page
sign up error
MERN development

Our website allows you to create and manage your daily tasks while collecting adorable animal characters. The more tasks you complete, the more animals you unlock! And here's the best part - you can invite your friends to join in on the fun from their own accounts. Collaborate with them to complete tasks together and earn even more animals.

Whether trying to stay on top of your work tasks or accomplish personal goals, our website is a fun and engaging way to stay motivated and track your progress. So what are you waiting for? Sign up today and start collecting those animals while achieving your goals with the help of your friends!

Inspiration

Humans are social creatures, and we thrive on connection and collaboration. When it comes to completing tasks, having someone to hold us accountable and provide encouragement can make a world of difference. Working with friends on daily tasks can help us stay motivated, focused, and engaged.

In addition, our natural competitive spirit can also come into play when we work with friends. Knowing that our friends are also completing tasks and earning characters can inspire us to work even harder to earn our own rewards. This sense of healthy competition can help us stay committed to our goals and push us to achieve more than we might have on our own.

Using HabitHatch!, rewards users with animal characters for completing tasks, and individuals can create their own portfolio of unique and adorable characters that represent their accomplishments. This can be a fun and engaging way to motivate people to complete tasks, and the characters can serve as a tangible reminder of their hard work and progress.

What it does

How we built it

Our web app was built using the cutting-edge MERN stack, which includes MongoDB Atlas, Express, React, and Node. This powerful combination of technologies enabled us to create a seamless user experience that allows users to easily track their goals, tasks, and unlocked characters.

To achieve this, we designed a sophisticated user schema in our backend using MongoDB, allowing us to store and retrieve all necessary user information with ease as well as keep track of no duplicate accounts through the same email. This information is seamlessly passed between the front end and back end, with the front end primarily built using React and leveraging HTML/CSS/JS.

Another key feature of our app is the implementation of OpenAI which allows users to prompt a chatbot for any questions they may have pertaining to their goals/tasks. This allows for enhanced learning experience.

Challenges we ran into

As two passionate and driven developers, we took on the challenge of building our web app using the MERN stack, despite having no prior experience with it. While this presented a steep learning curve, we were determined to master the interface and create a top-quality product.

One of the main challenges we faced was ensuring that our database was properly configured to take in and output the correct information. This required a great deal of time and attention to detail, as even small errors could have major consequences for the functionality of the app.

In addition, we wanted to ensure that user information was always saved and easily accessible, even in the event of a refresh or other unexpected event. This required a great deal of testing and troubleshooting to ensure that the app was robust and reliable.

Despite these challenges, we persevered and ultimately created a web app that we are proud of.

Accomplishments that we're proud of

When it comes to the overall UI and functionality of our code, we took on a significant challenge despite our relative inexperience, and we are proud of the results we achieved. With a keen eye for detail and a dedication to creating a top-quality product, we worked tirelessly to ensure that every aspect of our code met the highest standards.

One of the key features of our app is our use of Twilio, which allows for seamless communication between users and ensures that they are always up-to-date on their progress. We also implemented a session log, which keeps track of user information even as they navigate between different pages of the app.

What we learned

We were thrilled to take on the challenge of learning MongoDB Atlas, React, Express, and Node for our project, even though these technologies were completely new to us. Despite facing many setbacks along the way, we persevered and ultimately succeeded in developing a highly functional and user-friendly app.

Through this process, we learned a great deal about the importance of teamwork and collaboration. By dividing the workload and working together, we were able to accomplish much more than we could have on our own. We also discovered that setbacks and challenges are an inevitable part of the development process and that the key to success is to keep pushing forward, no matter what obstacles we may encounter.

Overall, we are proud of what we have achieved through this project, and we are excited to continue exploring and mastering new technologies as we continue to refine and improve our app.