KeepMeOnTrack - The Smart Goal Tracker

Inspiration

I've always wanted to build my own products, but despite getting a CS degree and learning to code, I still struggled to execute. One of the ideas I put off was a productivity app that would help me combat my own procrastination. Once I learned about bolt.new and about this hackathon, I decided to build this app and use it to keep me on track to participate in this hackathon and to achieve future goals.

What it does

KeepMeOnTrack is a web app that keeps you on track to achieving your goals. Using KeepMeOnTrack, you can break down your goals into milestones and habits with AI in an easy-to-use interface. The app allows users to create an account and, once logged in, to create goals with due dates. For each goal, the user can create multiple milestones and habits with varying frequencies (daily, weekly, or every n days). The goals, milestones, and habits are all displayed on a calendar, where the user can mark habits and milestones as completed. The user can also mark a goal as a completed before the due date and even if not all habits and milestones are completed.

KeepMeOnTrack also includes an AI goal planner that will break down your goals into milestones and habits using an OpenAI model. If AI is not available, preset templates are used to break down the goals.

Regular users need to create an account with their email address. However, the app also supports generating guest links that allow guests to access the features of the app using the browser's session storage without creating an actual account. Guest users can run one AI goal planner query per session (browser tab). The preset templates will be used after the user runs out of AI queries.

How we built it

The app was entirely generated in Bolt. The code is in Typescript and uses React. Supabase is the back-end database and handles user authentication. The project is deployed on Netlify and uses Netlify's DNS with a custom domain, keepmeontrack.co, that I already owned. The project calls OpenAI's API and uses the GPT 3.5 Turbo model to break down goals into milestones and habits. The code for calling OpenAI is in a Supabase Edge function that was also generated by Bolt.

Challenges we ran into

Getting the custom domain set up on Netlify took longer than expected. At first, I tried setting the DNS records in my registrar's DNS, but this didn't work even after letting the DNS propagate for more than a day. Eventually, I was able to set up the domain and https certificates by changing my nameservers to Netlify's servers and adding an ALIAS record for the root domain, which wasn't very well-documented. I used ChatGPT for help.

Another challenge was getting the layout right. Bolt had trouble changing the positioning of some elements.

Another challenge was enabling guest or demo access to allow judges and other guests to try the app without creating an account. The initial approach of having a demo button did not work with the authentication hooks. The final approach was to generate guest links that would use the browser's session storage.

OpenAI key security was also a challenge. The initial approach, putting the key in .env, would have been insecure because the key would have been viewable by users looking at the front-end source code in their console. The final approach, deploying a Supabase Edge function, was something I only knew about after prompting Bolt and asking about security.

Accomplishments that we're proud of

I'm proud that I was able to build a product and generate a functioning, professional-looking web app with a database, authentication, and AI integration, all using Bolt and its integrations, in a short amount of time.

What we learned

I learned to vibe code a working web app in an unfamiliar tech stack using Bolt. I also learned about deploying projects on Netlify and how to set up a custom domain in Netlify.

I learned about Supabase and how its anon key and row-level security work, and its Edge functions.

I've also started to learn about React, as that was the tech stack used. Although I have some familiarity with Javascript, most of my experience has been on the back end in languages like Python, C, and C++.