(Work in progress ๐Ÿ˜…) Goalswin - Set your goals and track your habits

(Work in progress ๐Ÿ˜…) Goalswin - Set your goals and track your habits


7 min read

This is embarrassing ...

I thought I would finish my app on time, I was wrong ๐Ÿ˜….

In fact, 3 weeks ago, I stumbled across the hackathon announcement and decided to give it a go.

I collected some design ideas, shared my mocks on Twitter, and optimistically started developing...

Despite not finishing the app, I would like to share with you some learnings while you can find the code here.

But what to build?

After prolonged reflection, I settled on a goals tracker app. I know... there is a lot of them, so why another one?

I would say for 4 reasons :

  • I always feel behind when I use the current solutions: there is always something to do and I don't see my progress

  • I can't see the high picture with the current apps: I can track goals, I can track habits, but I don't see the link

  • I want an app that combines Pomodoro + goals tracker + actions/habits tracker

  • I want to own my data completely

The first step: Design

I love designing UIs. I am not that skilled, but I love it.

As a result, I spent ~20h on Adobe XD making the app mocks ๐Ÿคฆ๐Ÿพโ€โ™€๏ธ. I collected inspirations on Dribble, picked a color (red for energy), a font - "Karla", etc...

You can find some of the results below. Let me know what you think ;)

original mocks light original mocks dark

Second Step: Pick a stack

Along with UI design, I love learning new things. So for the challenge, I decided to go for the following tech stack:

Third Step: The development + challenges

I wouldn't want to use a slow web app. So, perf was a priority for me. Because of that, and early optimizations, I stumbled upon a series of issues :

1. Preact != React


My code would work locally but not in production. I tried many things but couldn't find the culprit.


I was using Preact in production (because it can trim >20kb of JS) and React in dev mode. What I didn't know was that Preact doesn't work well with some Chakra UI components or NextAuth.

2. Responsiveness and server-side rendering


Media queries don't work on the server. As a result, I was shipping some useless code for mobiles.


3. Picking a database


I hesitated a lot between Firebase, Prisma, and Faunadb and listed the following pros and cons :

Pros: I already used it, it handles authorization well + It is free + I don't need a BE

Cons: The billing is not clear + I will learn nothing new ๐Ÿ™ˆ

Pros: It looks really efficient + It handles authorization well + It has a free tier + I learn something new

Cons: The billing is not clear too + I couldn't use multi authentication in the free tier

Pros: It integrates well with Next.js + very friendly documentation + I can use it with NextAuth + I learn something new

Cons: I need to set up my own DB + I need to handle the authorization


I ended up choosing Prisma and I set up a Postgres instance with AWS :).

4. Performance


I would either :

  • render too many components on the server,
  • or use dynamic imports aggressively (which creates too many chunks)
  • or not use dynamic imports enough and have big chunks sizes

Resolution This is still in progress. But, by using a combination of console coverage + Lighthouse, I was able to identify some culprits.

4. Encrypt user data (still searching)

I want to have end-to-end encryption for the user but all the solutions I could find ( Virgil Security, Seald) were expensive.

At this point, I hesitate between using IndexDB (and store the data on the user desktop/phone) or use encryption on Node.js.

5. NextAuth not working in production Vercel (still looking for a fix๐Ÿ˜ฅ)

What is next?

I am super excited about this app and I will be actively building it. If you are interested or have any idea, ping me on Twitter ๐Ÿ’ช๐Ÿพโค๏ธ

Thanks #Hashnode + #Vercel for organizing this great competition.

App => goalswin.vercel.app

Github => goalswin.vercel.app

Twitter => twitter.com/joyancefa