MoodPraiser - Fun habit tracker to keep everyone accountable

Hello Hashnoders!

I'm Candy. Super excited to share MoodPraiser with y'all! Huge thanks to the #harperdbhackathon to keep me motivated throughout the month. It definitely wasn't easy to pick up the keyboard after work every day.

What is MoodPraiser?

MoodPraiser is a simple, useful and fun habit tracker that keeps you and your friends accountable for each other by giving praises y'all deserve to reach your goal!

Live Demo / GitHub Repository

The Story Behind MoodPraiser

Guess what? This wasn't intended to be a habit tracker in the first place! The project name gives itself away as a "mood" praiser. Yup! It was supposed to be a mood tracker. What happened?

I've always wanted to build a super simple mood tracker so I came up with the name during early June. Then I left the name and the project there to hang until I realized I wouldn't be able to complete it in time because I wasn't working on it. 😂

I believe a lot of people are like me:

Start a new habit
Execute it for a few days
Forget about it
Back to step 1

Let's call this the deadly "start a new habit" loop.

In order to escape the loop, MoodPraiser became a habit tracker with me being the first user. Here I am, participating in a hackathon with a project to make sure I complete the hackathon. How hilarious! 😂

To make things more fun, a praise feature was implemented so that we can receive praises from friends and families to keep ourselves going. Also, it's a good chance to get them to signup and get themselves out of the loop!

That's the story of how MoodPraiser turned into a habit tracker to keep everyone out of the deadly "start a new habit" loop!

Tech Stack

HarperDB - The Database known for simplicity without sacrifice!
Auth0 - User authentication that's super easy to integrate
Next.JS - The React framework for production
Chakra UI - UI development that's just deadly simple
Vercel - Deployment for the app, where the app lives

Features and Usage

🌓 Supports dark and light modes

Screenshot - Supports dark and light modes

📱 Responsive on all devices

Screenshot - Responsive on all devices

✏ Track your habits and moods

Create habit

Screenshot - Create habit

Track your mood and habits

Yay the mood part is still alive, tied together with the habit tracking!

Screenshot - Track your mood and habits

Step 1: Copy the praiser link

Screenshot - Copy praiser link

Step 2: Share it with your friends

Step 3: Praise your friends back

Screenshot - Praise your friends

Hurdles Along The Way

After having the project idea in mind with some basic features, it's time for implementation! It's my first time releasing a side project to the public with the front end and back end all built on my own.

Choosing the stack

Database - Easy choice and you know why! HarperDB to the rescue!
Authentication - I didn't feel comfortable going through sensitive information, so I chose a trustworthy Auth0 which also supports login with third-party services such as Google.
Front End & Back End - I wanted to use TypeScript for everything and manage APIs easily. Loved using React and also heard about the Next.JS for quite some time. Next.JS fulfills all my wishes so I definitely should try it out.
Deployment - Since I chose Next.JS, Vercel as the main contributor behind it supports deployment for it like no one else. Only a few clicks away from deploying the app's front end and back end automatically. Super easy to setup!

Database

HarperDB exposes a REST API along with example code and a Postman collection to start out, it was super easy to follow. I didn't find the need to use a wrapper library. CRUD operations can be called easily without much hassle.

Below is the how I structured the database to save all the data I needed for MoodPraiser to work.

MoodPraiser entity-relationship diagram (ERD)

One thing that I'd like to mention was when I was altered the database schema, such as removing columns from a table, sometimes I was unable to delete rows in the database after that. Due to the project hasn't been released yet, my tentative solution was reconstructing the table.

Querying

I'm awful with SQL queries and have always wanted to practice it in a real project instead of following tutorials. Truly love the HarperDB Studio since we can try out queries directly from the GUI. Although complicated queries are not supported, but it fulfills most of my use cases in the project.

Screenshot - HarperDB Studio

Code quality

Currently going live with absolutely 0 tests written. Here's what I'm relying on currently:

Linter to keep coding style consistent
Relying on TypeScript types to get the parameters right

Will be planning to add tests and run CI with GitHub actions in the future.

FAQ

Who is suitable for MoodPraiser?

Anyone and everyone! You can use it by yourself and praise yourself, or let your friends join in the fun as well!

Where is my data saved?

Application data such as user profiles, habits and praises are saved in HarperDB. Passwords goes through Google if you choose Google login and Auth0 if you register an account with them. MoodPraiser don't have access to all passwords.

Feel free to ask about anything in the comments below!

What's Next?

Reminders - Email reminders so that you won't forget to log your accomplishments.
Edit profile - Ability to change the display name, add an avatar, etc.
Badges - Gamify MoodPraiser! Some ideas in mind are: creating your first habit, getting your first praise, etc.
More statistics - Show if you've been praised today, more history stats, etc.
Internationalization - Hopefully I can support many languages in the future. For now, planning to support Chinese since it's my mother tongue.
You name it - Feel free to comment on what features you would like to see!

Contributing

MoodPraiser is an open source project so you're more than welcome to contribute ideas, report issues or send in pull requests!

GitHub Repository

Kudos for reading this far! Love to know what you think about the article and the project.

This is also is my first post on Hashnode! Extremely thrilled that I joined in time to participate in the hackathon.

Shameless plug: Moodpraiser

MoodPraiser - Fun habit tracker to keep everyone accountable

Comments (8)

Side Projects

Learn Indonesian with ReadIndo!

More from this blog

Pointers in Go - When to use the ampersand and the asterisk?

Learn Indonesian with ReadIndo!

Why We Should Listen to Lightning Talks - Starting with RailsConf 2021

Stuff I Install When Setting Up a Mac

Installing Ubuntu 20.04 on Raspberry Pi 4b

Hello Hashnoders!

What is MoodPraiser?

The Story Behind MoodPraiser

Tech Stack