DEV Community

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

Collapse
 
anamaharjan profile image
Ana • Edited

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)

[ IN THIS SECTION WE INCLUDED THE EXACT DETAILS WE NEEDED ON WELCOME SCREEN ]

B. Multi-Step Onboarding (app/onboarding/)
After signing up, the user will be guided through a [X] -step onboarding process:
[ IN THIS SECTION WE INCLUDED THE STEPS WE WANTED FOR ONBOARDING ]

3. Core Architecture & UI Components

A. Modal System
The app will use a sophisticated, stack-based modal system.
[ IN THIS SECTION WE INCLUDED THE STEPS FOR THE MODAL SYSTEM ]

4. Key Features & Functionality (Main App)

The app will allow users to:
- Manage their profile, create profiles for multiple dogs, and invite co-owners.
[ IN THIS SECTION WE CONTINUED TO INCLUDE THE STEPS FOR WHAT USERS CAN DO ]


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.
[ IN THIS SECTION WE CONTINUED TO INCLUDE THE TABS ]

6. Design & UI/UX Guidelines

- The aesthetic should be clean, modern, and intuitive.
[ IN THIS SECTION WE CONTINUED TO INCLUDE THE UI/UX GUIDELINES ]

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`.


Enter fullscreen mode Exit fullscreen mode

AND THE RESULTS ARE IN!

After just one prompt (And a quick install and run with pnpm since npm failed) we've got an interactive mobile app! It has all 4 main pages after a mock sign in and is fully responsive.

Image description
Image description
Image description
Image description
Image description
Image description

Collapse
 
chrislally profile image
Chris

Very exciting to see our app go from the whiteboard to the app store so quickly!

Image description

Collapse
 
anamaharjan profile image
Ana

Making great progress on our onboarding design!

After the whiteboard our flow has been to let bolt try variations of the screens, brainstorm in Canva to choose the best options then go back to the codebase to get them working.

Image description