DEV Community

Shang-Lin Chen
Shang-Lin Chen

Posted on

Keeping on Track: Building a Smart Goal Planner with Bolt

WLH Challenge: Building with Bolt Submission

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

In June, I participated in the World's Largest Hackathon, sponsored by Bolt. I used Bolt to create KeepMeOnTrack, an AI goal planning and tracking web app.

More than a decade ago, I participated in a Startup Weekend competition. I went in without plan, but while listening to the introductory presentation, I had a flash of inspiration and pitched the idea of a goal and habit-tracking game. This idea became one of the finalists for forming a team and making a pitch. We didn't win or continue the project, but I held on to the idea.

Now fast forward to 2025. Once I learned about the World's Largest Hackathon, I decided to revive my old idea and see if I could build it myself. I've spent most of my career doing back-end programming and maintaining operational pipelines on Linux systems, with limited web development experience. I was not sure if I could build a full-stack web app myself, but I was able to build and deploy a fully functional web app with a few days of work. I decided to build a less gamified version that incorporates AI.

This is how I did it.

The Starting Prompt

I asked ChatGPT to generate a prompt for Bolt:

Create a prompt for bolt.new to generate a goal and habit tracking website. This website should:
- Support user account creation and authentication.
- Allow the user to enter a goal.
- Use an AI API to break the goal down into actionable habits and subgoals that can be added to a calendar.
- The user should be able to customize the habits and subgoals.
- Supabase should be the back end. 
Enter fullscreen mode Exit fullscreen mode

and this is what ChatGPT gave me and what I gave Bolt:

Here’s a clear and complete prompt you can use with **[bolt.new](https://bolt.new)** to generate a **goal and habit tracking website** using **Supabase** as the backend and integrating **AI for habit breakdown**:

---

**Prompt for bolt.new:**

> Build a full-stack goal and habit tracking website with the following features:
>
> 1. **User Authentication & Accounts:**
>
>    * Use **Supabase** for backend and auth.
>    * Allow users to sign up, log in, and log out.
> 2. **Goal Entry:**
>
>    * After logging in, users can enter a **goal** (e.g., “Run a marathon” or “Write a book”).
> 3. **AI-Generated Habits/Subgoals:**
>
>    * When a goal is submitted, call an **AI API** (e.g., OpenAI or similar) to break it down into **actionable habits** and **subgoals** with suggested timelines.
>    * Automatically display these items on a **calendar or timeline UI**.
> 4. **Customization:**
>
>    * Users can **edit, delete, or reorder** habits and subgoals.
>    * Each habit or subgoal can have:
>
>      * Title
>      * Description
>      * Frequency (daily/weekly/custom)
>      * Due date
> 5. **Calendar Integration:**
>
>    * Display goals and habits on an interactive calendar.
>    * Drag-and-drop functionality for rescheduling.
> 6. **Database:**
>
>    * Store users, goals, subgoals, and habit schedules in Supabase tables.
> 7. **Tech Stack:**
>
>    * Frontend: React (or Next.js)
>    * Backend: Supabase (PostgreSQL, Auth, Realtime if needed)
>    * AI: Call to an external AI API endpoint (mock if needed)
> 8. **Bonus (if time):**
>
>    * Dark mode toggle
>    * Progress tracking (percentage complete per goal)


Enter fullscreen mode Exit fullscreen mode

From this prompt, Bolt generated a Typescript app that uses the React library. Bolt also created the SQL for a Supabase migration. Once I linked Supabase to Bolt, Bolt created the database.

Refining

I iterated with Bolt in a back-and-forth exchange to get signup and sign-in to work, tweak the UI, and add the Bolt logo required by the hackathon. Adding the logo broke the appearance of the UI, and despite repeated prompts, I had to manually edit the code.

I also discovered several bugs that I was able to prompt Bolt to fix, and thought of new features that I prompted Bolt to add:

  • Adding milestones to each goal.
  • Adding start dates to habits that didn't necessarily correspond to the start dates of goals.
  • Showing a progress bar.
  • Displaying habits, milestones, and goals on the calendar.
  • Allowing the user to push a button to mark a goal as completed.

Deploying on Netlify

Deploying on Netlify was simple as pushing the publish button. A Netlify URL was generated, and I claimed it in my Netlify account by clicking a link.

Adding my pre-existing domain name was more complicated. I tried to add Netlify's ALIAS and CNAME records to NameCheap's DNS service but could not get Netlify to verify the domain. Eventually, I successfully set up my domain by moving its DNS to Netlify and adding an ALIAS record for the root domain.

Adding AI Integration

So far, the AI goal planner feature had been just a mock, with pre-programmed plans for a few specific goals, like running a marathon and writing a book. I asked Bolt to fully implement the AI goal planner with OpenAI's API. I was prompted to add my OpenAI API key to the .env file. This made me hesitate. Would my API key be safe in the .env file? From a bit of research, the answer was no, it would be visible in the source code of the page. I asked Bolt to put the AI integration in a Supabase Edge function, and Bolt built the function. Now, when the AI planner is given a goal, it calls the Edge function get a JSON list of milestones and habits from the OpenAI API. The user can choose whether to add each milestone and habit, or to accept all of them.

Screenshot of AI goal planner

Guest Access

Finally, I wanted hackathon judges to have access to the dashboard without having to create an account. I asked Bolt to implement access for guest users who don't sign up for an account. Bolt created a guest link that generates temporary URLs for guests. Guests can use the dashboard, AI goal planner, and calendar as if they were regular users, but data is stored in the browser's sessionStorage instead of in Supabase.

What's Next

Now that the hackathon is over, there is more to do to get KeepMeOnTrack production-ready. In addition to bugfixes and improving security, features for consideration include goal coaching, sharing goals with other users, and following and celebrating each other's progress.

Top comments (0)