Follow as we build the HotDog App with bolt.new: Your Dog's Progress Journal

Hello everyone :) My husband and I have a 4-year old Cockapoo who is quite reactive to say the least! We are both coders but have never built an app before. When we came across the bolt.new hackathon and realized we can hopefully build an app (we know react, so expo could be perfect) to help anyone with a reactive pup track goals, training, and more (with the help of AI to make things easy) I'll be documenting our prompts and progress here if you'd like to follow along! Ana & Chris (We hired Emily Nancy several years ago for a never-launched NFT project, but we think the dogs she created will be perfect for HotDog!) We decided to spend some time working on our first prompt so the app had a solid foundation to start with. We tried to design the structure around the type of simple yet helpful app we'd want to use! We also thought out what databases tables we wanted to start with (we love using supabase in nextjs apps so a postgres mindset seemes like a good way to go) Here is our very first prompt to bolt.new to kick off HotDog! Initial Build Scope: The initial version should be basic and functional, built to run in Expo Go. It should use mock/test data for all dynamic content (like goals, sessions, dog profiles) to allow for rapid UI development and testing without requiring a full backend implementation at the start. 1. Core Concept & App Type App Name: HotDog Short Description: Your Dog's Progress Journal Tagline: Less chaos, more progress. Core Idea: Life with a reactive dog is chaotic. HotDog helps make it manageable. From leash reactivity to muzzle training—or just building better habits—HotDog gives you simple tools to stay consistent, track meaningful progress, and log each training session effortlessly. Track what matters: - Set goals that actually make sense for your dog - Log triggers, wins, and other factors affecting training - Record quick audio logs and get AI-generated summaries - Share your dog’s journey with trainers, vets, or family - Look back and say: “Wow, we’ve come a long way.” No guesswork or perfect pups required. Just structure, reflection, and support—so you can keep showing up, even on the tough days. Platform: This will be a mobile app for both iOS and Android, built with Expo (React Native) and designed to run in Expo Go for initial development. Philosophy: Built by reactive dog owners. Stay consistent, track progress, and feel good about training—even when it’s chaotic. 2. Welcome & Onboarding Flow The app will have a distinct flow for new users to introduce them to the core concepts and gather initial data. A. Welcome Screen (app/welcome.tsx) - This will be the first screen for unauthenticated users. - It should display the app name and logo. - It should provide primary authentication methods with placeholder buttons for "Continue with Google" and "Continue with Apple". These should be visually present but can be non-functional for the initial build. - It will include secondary options for traditional "Sign Up" or "Sign In" with email, which should be functional. B. Multi-Step Onboarding (app/onboarding/) After signing up, the user will be guided through a 7-step onboarding process: 1. Hook Screen: This screen will present a relatable pain point ("Your dog is a hot-head. That's ok.") to engage the user emotionally. 2. Reframe Screen: This screen will introduce the app's value proposition by highlighting the core benefits: Set Goals, Track Progress, and Discover Patterns. 3. Goal Setting Screen: This will be an interactive step where the user creates their first training goal, choosing from presets or creating a custom one. 4. How to Log Screen: This screen will teach the user how to log a training session, prompting them to try the voice-logging feature. 5. Dog Profile Screen: This will be a form for the user to create their dog's profile, including name, photo, and behavioral flags. 6. Community Screen: This screen will encourage the user to make their first community post with a pre-filled template. 7. Final Screen: This screen will confirm the setup is complete and navigate the user to the main app. 3. Core Architecture & UI Components A. Modal System The app will use a sophisticated, stack-based modal system. - contexts/modal-context.tsx: This will be a React context that manages a stack of active modals, allowing them to be layered. - components/shared/modal-renderer.tsx: This central component will render the modals from the stack. - components/shared/full-screen-modal.tsx: This will be the primary component for presenting modal content, sliding in from the right with a standard header and swipe-to-dismiss gestures. 4. Key Features & Functionality (Main App) The app will allow users to: - Manage their profile, create profiles for multiple dogs, and invite co-owners. - Define, edit, and track progress on specific training goals. - Log daily training sessions on a calendar with structured notes captured via voice or text. - Maintain

Jun 12, 2025 - 06:00

Follow as we build the HotDog App with bolt.new: Your Dog's Progress Journal

Hello everyone :)

My husband and I have a 4-year old Cockapoo who is quite reactive to say the least! We are both coders but have never built an app before. When we came across the bolt.new hackathon and realized we can hopefully build an app (we know react, so expo could be perfect) to help anyone with a reactive pup track goals, training, and more (with the help of AI to make things easy)

I'll be documenting our prompts and progress here if you'd like to follow along!

Ana & Chris

(We hired Emily Nancy several years ago for a never-launched NFT project, but we think the dogs she created will be perfect for HotDog!)

We decided to spend some time working on our first prompt so the app had a solid foundation to start with. We tried to design the structure around the type of simple yet helpful app we'd want to use! We also thought out what databases tables we wanted to start with (we love using supabase in nextjs apps so a postgres mindset seemes like a good way to go)

Here is our very first prompt to bolt.new to kick off HotDog!

Initial Build Scope:
The initial version should be basic and functional, built to run in Expo Go. It should use mock/test data for all dynamic content (like goals, sessions, dog profiles) to allow for rapid UI development and testing without requiring a full backend implementation at the start.

1. Core Concept & App Type

App Name: HotDog
Short Description: Your Dog's Progress Journal
Tagline: Less chaos, more progress.

Core Idea:
Life with a reactive dog is chaotic. HotDog helps make it manageable.

From leash reactivity to muzzle training—or just building better habits—HotDog gives you simple tools to stay consistent, track meaningful progress, and log each training session effortlessly.

Track what matters:
- Set goals that actually make sense for your dog
- Log triggers, wins, and other factors affecting training
- Record quick audio logs and get AI-generated summaries
- Share your dog’s journey with trainers, vets, or family
- Look back and say: “Wow, we’ve come a long way.”

No guesswork or perfect pups required.

Just structure, reflection, and support—so you can keep showing up, even on the tough days.

Platform: This will be a mobile app for both iOS and Android, built with Expo (React Native) and designed to run in Expo Go for initial development.

Philosophy: Built by reactive dog owners. Stay consistent, track progress, and feel good about training—even when it’s chaotic.

2. Welcome & Onboarding Flow

The app will have a distinct flow for new users to introduce them to the core concepts and gather initial data.

A. Welcome Screen (app/welcome.tsx)
- This will be the first screen for unauthenticated users.
- It should display the app name and logo.
- It should provide primary authentication methods with placeholder buttons for "Continue with Google" and "Continue with Apple". These should be visually present but can be non-functional for the initial build.
- It will include secondary options for traditional "Sign Up" or "Sign In" with email, which should be functional.

B. Multi-Step Onboarding (app/onboarding/)
After signing up, the user will be guided through a 7-step onboarding process:
1.  Hook Screen: This screen will present a relatable pain point ("Your dog is a hot-head. That's ok.") to engage the user emotionally.
2.  Reframe Screen: This screen will introduce the app's value proposition by highlighting the core benefits: Set Goals, Track Progress, and Discover Patterns.
3.  Goal Setting Screen: This will be an interactive step where the user creates their first training goal, choosing from presets or creating a custom one.
4.  How to Log Screen: This screen will teach the user how to log a training session, prompting them to try the voice-logging feature.
5.  Dog Profile Screen: This will be a form for the user to create their dog's profile, including name, photo, and behavioral flags.
6.  Community Screen: This screen will encourage the user to make their first community post with a pre-filled template.
7.  Final Screen: This screen will confirm the setup is complete and navigate the user to the main app.

3. Core Architecture & UI Components

A. Modal System
The app will use a sophisticated, stack-based modal system.
- contexts/modal-context.tsx: This will be a React context that manages a stack of active modals, allowing them to be layered.
- components/shared/modal-renderer.tsx: This central component will render the modals from the stack.
- components/shared/full-screen-modal.tsx: This will be the primary component for presenting modal content, sliding in from the right with a standard header and swipe-to-dismiss gestures.

4. Key Features & Functionality (Main App)

The app will allow users to:
- Manage their profile, create profiles for multiple dogs, and invite co-owners.
- Define, edit, and track progress on specific training goals.
- Log daily training sessions on a calendar with structured notes captured via voice or text.
- Maintain a detailed profile for each dog, including an "About" section and a chronological "Timeline" of life events.
- Engage with a community feed to share posts and advice.

5. Pages / Screens (Main App Tabs)

The main app will consist of the following tabbed screens:
- Today Screen (Dashboard): The main hub with a dog selector and weekly calendar to view and log daily sessions.
- Goals Screen: A list of all training goals for the active dog.
- Dog Profile Screen: The active dog's profile, with "About" and "Timeline" tabs.
- Community Screen: The social feed.

6. Design & UI/UX Guidelines

- The aesthetic should be clean, modern, and intuitive.
- The layout should use a card-based layout for list items.
- The app should support both light and dark modes.
- The color palette will be simple. The primary color for light mode will be a dark grey/black (HSL: 0 0% 20.50%), and for dark mode, it will be a near-white (HSL: 0 0% 98%).
- Typography should be a clean, legible sans-serif font.

7. Technology Stack

The project will be built with the following technology stack:
- Frontend: React Native with Expo.
- Styling: Tailwind CSS (via Nativewind).
- Backend & Database: Supabase.
- Supabase Tables: `dogs`, `events`, `goals`, `posts`, `profiles`, `user_devices`, `users-dogs`.