You have probably made a list of resolutions and new habits that you want to carry out for this year, but they are repeated year after year because you do not fulfill them! For this reason, our inspiration was to create a platform that motivates users to achieve their goals through rewards and different levels. A didactic way of taking small steps so that during the year you can have a better lifestyle and even take better care of your health.
Have you had a hard time trying to accomplish any goal in life? GrindHub will help you turn your procrastination into your habits! We built an intuitive platform where you can challenge yourself and do different daily missions and receive rewards, that will help you increase your level! Using GrindHub will be fun and rewarding at the end of the year.
We used HTML and CSS to create the UI and JS for the back end. But it's mostly the backend doing all the work (not to brag). First we had to solve the problem of user logins, how do websites keep their users safe? Well with verification that is actually you logging in so we had to implement the same design into our app through Emailjs and then used a sha256 hash as your user key that you use to login. The other main problem that we had to solve was the user data and missions which we decided to use MongoDB for our database because it is fast, efficient, and we already had some experience working with it in other projects. Finally the cherry on top which are the missions, completely generated by OpenAI’s ChatGPT (also stored in mongo) to help you on with that grind in your everyday life. Image Image
We utilized design tools like Canva & brainstormed in Google Docs to prototype our designs before doing any coding. Through this, we are able to get iterative feedback so that we spend less time rewriting code. Our main purpose was to create a platform that helps us accomplish daily goals that help make our lifestyle better and healthier.
Research is the key to empathizing with users: we found our specific user group early and that paves the way for our whole project. Here are a few of the resources that were helpful to us —
- HTML Forms : https://www.w3schools.com/html/html_forms.asp
- Email JS: https://www.emailjs.com/docs/
- MongoDB: https://www.mongodb.com/docs/atlas/
- Credits to TokyoWeb for the CSS squares tutorial! https://codepen.io/tokyoweb
- Credits to this guy for the CSS confetti tutorial! https://dev.to/official_fire/creating-a-confetti-effect-in-5-minutes-16h3
This project taught us a lot about how webpages and real life applications use and manage login security with 2fa and verification codes. CSS animations were a real REAL pain, but somehow our amazing (me) front-end dev made them work, and even included some easter eggs. Try clicking on random squares in the login or sign in page!! Connecting ChatGPT to our site was another problem but it worked out!
We are proud that this idea that we had on our minds was actually successful. We are very proud that our teamwork helped us having this project on time! That deadline extension really saved us tho.
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. Image EmailJS Documentation | EmailJS Well organized and easy to understand documentation with examples! Image What is MongoDB Atlas? What is MongoDB Atlas? CodePen TokyoWeb on CodePen Learning... TokyoWeb on CodePen DEV Community 👩💻👨💻 Add Confetti Effect in 5 minutes Hello guys 😊 Hope you are safe. So after reading this blog i hope you will be able to create a... Add Confetti Effect in 5 minutes
We gained knowledge in frontend development using HTML and CSS, as well as some Javascript and NodeJS. Also not to mention, we enhanced our googling and Stackoverflow searching skills during the hackathon 🙂
We want to implement more skills and different rewards.
