🚼Vibe Coding: BabyMilestoneMe

Parents will use a simple digital tool to track their baby’s current developmental leap status and access age-appropriate activities if the tool provides immediate, actionable information in under 30 seconds. I didn’t think what you get for the paid Wonder Weeks app was worth it and cancelled.

All I want to know is:

  1. What leap he is in
  2. What activities to do
  3. What toys should I get
  4. What books should I read

Going to use Bolt as part of their 1 Million Dollar Hackathon | Bolt.new which gives you unlimited credits for a month to complete the challenge.

A big learning from Whisper AI Answering Service using Replit was the need for a clear PRD upfront with some technical guidance in terms of database structure and not presume everything is production ready. There was a number of instances where the tool put workarounds in place for a working prototype. For example not storing data in database and utilizing it consistently or setting up auth correctly.

Data Model

I was happy to take a lot of what I learned Data Modelling Fundamentals course and use it on this project. The database was a lot more complex than the AI.3: Whisper AI Answering Service using Replit but this time I was able to analyze what they were doing and how the tables were being used which helped create a lot more detailed prompts.

One trick I took from the course too was creating data samples in the tables to see if they would work. Data integrity was a major part of this project. You can see all the csv files I created and was uploading,

User Interface

Pick a Color. Make it yours. – shadcn/ui

Initial PRD

Target Users

Primary: First-time parents with babies 0-18 months old

Secondary: Experienced parents, caregivers, daycare providers

Dashboard Page

Skills

Activities

User Personas

  • Sarah, 28: New mom, works part-time, uses phone primarily for apps, wants quick answers during baby’s fussy periods
  • Mike, 32: First-time dad, tech-savvy, likes data-driven insights, checks app during commute

Core Value Proposition

“Know your baby’s developmental stage and get instant activities – all in under 30 seconds”

Feature Requirements 

1. Simple Onboarding

User Story: As a new parent, I want to quickly set up my baby’s profile so I can start tracking their development immediately.

Requirements:

  • Landing page to get started or login
  • Baby name input field
  • Date of birth selection (calendar picker)
  • Account creation (email + password)
  • Privacy policy acceptance checkbox
  • Welcome message with next steps

Acceptance Criteria:

  • Complete registration process in under 2 minutes
  • Mobile-responsive form with real-time validation
  • Email verification sent automatically
  • Immediate redirect to leap tracking dashboard
  • Error handling for invalid inputs

2. Current Milestone Tracking

User Story: As a parent, I want to see exactly which developmental stage my baby is in so I understand their current behavior and needs.

Requirements:

  • Auto-calculate current developmental stage based on baby’s age
  • Display milestone period name (e.g., “Month 4: Reaching and Grasping”)
  • Visual progress bar showing milestone progression
  • Days remaining in current developmental period
  • Brief milestone description (2-3 sentences max)
  • “What to expect” summary with sensory, motor, and learning highlights

Acceptance Criteria:

  • Dashboard loads in under 3 seconds
  • Accurate milestone calculations based on CDC/AAP developmental guidelines
  • Progress bar updates daily
  • Clear visual hierarchy and readability on mobile
  • Graceful handling of edge cases (premature babies)

3. Activity Recommendations

User Story: As a parent, I want specific activities I can do with my baby right now that match their developmental stage.

Requirements:

  • 5-10 curated activities per developmental period
  • Simple activity descriptions (1-2 paragraphs each)
  • Materials needed clearly listed
  • Estimated time duration
  • Age-appropriate safety warnings
  • Mark activities as “completed” or “favorite”
  • Share activity with partner/caregiver

Acceptance Criteria:

  • Activities are relevant to current developmental stage
  • Clear, actionable instructions with no jargon
  • Safety notes prominently displayed
  • Offline access to previously viewed activities
  • One-tap marking of completion status

4. Basic Timeline View

User Story: As a parent, I want to see all upcoming developmental milestones so I can prepare for what’s coming next.

Requirements:

  • List view of all 24 monthly developmental periods (0-24 months)
  • Calculated dates for each milestone period based on baby’s DOB
  • Status indicators: “completed,” “current,” “upcoming”
  • Tap to view detailed milestone information
  • Brief description for each developmental period

Acceptance Criteria:

  • Timeline calculations accurate to baby’s corrected age
  • Intuitive navigation between milestone details
  • Clear visual distinction between statuses
  • Smooth transitions and loading states
  • Accessible design for screen readers

5. ToyCheck – AI Toy Analysis

User Story: As a parent, I want to know if my baby’s toys are appropriate for their current developmental stage.

Requirements:

  • Camera interface for toy photo capture
  • Image recognition to identify toy type and complexity
  • Instant developmental stage recommendations
  • Simple explanation of why toy matches specific milestone periods
  • “My Toys” library to save analyzed toys
  • Toy safety alerts if inappropriate for age

Acceptance Criteria:

  • Photo capture works reliably on iOS and Android browsers
  • Analysis results display within 5 seconds
  • Accurate classification for 20+ common toy categories
  • Clear developmental reasoning provided
  • Offline access to toy library
  • Integration with current milestone tracking

## Technical Architecture 

### Frontend Stack

  • Framework: React 18 with Create React App
  • UI Library: Material-UI v5 for consistent design system
  • Styling: CSS-in-JS with Material-UI theming
  • State Management: React Context API + useState/useReducer
  • Routing: React Router v6
  • PWA: Service worker for offline functionality
  • Camera: WebRTC Camera API for toy photo capture

### Backend Stack

  • Runtime: Node.js 18 LTS
  • Framework: Express.js 4.x
  • Database: SQLite (development) → PostgreSQL (production)
  • Authentication: JWT with refresh tokens
  • File Storage: Google Cloud Storage for toy images
  • AI Integration: Google Vision AI for image recognition
  • API Design: RESTful with OpenAPI documentation

### Infrastructure

  • Hosting: Google App Engine (Standard Environment)
  • CDN: Google Cloud CDN for static assets
  • SSL: Automatic SSL certificate management
  • Monitoring: Google Cloud Monitoring + Error Reporting
  • CI/CD: GitHub Actions with automated testing
  • Environment: Single production environment initially

### Security & Privacy

  • HTTPS enforced across all endpoints
  • JWT tokens with 1-hour expiration + refresh mechanism
  • Password hashing with bcrypt (12 rounds)
  • Input validation and sanitization
  • GDPR-compliant data handling
  • No third-party analytics initially

— ## Data Model ### Core Tables

Users

- id (Primary Key)
- email (Unique, Not Null)
- password_hash (Not Null)
- created_at (Timestamp)
- last_login (Timestamp)
- email_verified (Boolean)

Babies

- id (Primary Key)
- user_id (Foreign Key)
- name (Not Null)
- date_of_birth (Date, Not Null)
- weeks_premature (Integer)
- created_at (Timestamp)

Activities

- id (Primary Key)
- month_number (Integer, 1-24)
- title (Not Null)
- description (Text)
- materials_needed (Text)
- duration_minutes (Integer)
- safety_notes (Text)
- developmental_focus (Enum: 'sensory', 'motor', 'cognitive', 'social')
- created_at (Timestamp)

User_Activities

- id (Primary Key)
- user_id (Foreign Key)
- baby_id (Foreign Key)
- activity_id (Foreign Key)
- status (Enum: 'viewed', 'completed', 'favorited')
- completed_at (Timestamp)
- notes (Text)

Toys

- id (Primary Key)
- name (Not Null)
- category (Not Null)
- min_month (Integer)
- max_month (Integer)
- description (Text)
- safety_considerations (Text)
- developmental_benefits (Text)
- sensory_features (Text)
- motor_skills_supported (Text)

User_Toys

- id (Primary Key)
- user_id (Foreign Key)
- baby_id (Foreign Key)
- toy_id (Foreign Key)
- photo_url (Text)
- analyzed_at (Timestamp)
- user_notes (Text)
- ai_confidence_score (Float)

— ## API Specifications ### Authentication Endpoints

  • POST /api/auth/register – User registration
  • POST /api/auth/login – User login
  • POST /api/auth/refresh – Refresh JWT token
  • POST /api/auth/logout – User logout

### Baby Management

  • GET /api/babies – Get user’s babies
  • POST /api/babies – Create baby profile
  • PUT /api/babies/:id – Update baby information
  • GET /api/babies/:id/current-milestone – Get current milestone status

### Activities

  • GET /api/activities/month/:number – Get activities for specific month
  • POST /api/user-activities – Mark activity status
  • GET /api/user-activities/:babyId – Get user’s activity history

### Toy Analysis

  • POST /api/toys/analyze – Upload and analyze toy photo
  • GET /api/user-toys/:babyId – Get user’s toy library
  • DELETE /api/user-toys/:id – Remove toy from library

— ## User Experience Flow ### First-Time User Journey

  1. Landing → Simple hero explaining value proposition
  2. Registration → Email, password, baby details (2 minutes max)
  3. Dashboard → Immediate milestone status display
  4. Activities → Curated list for current developmental stage
  5. ToyCheck → Discover AI toy analysis feature

### Returning User Journey

  1. Login → Auto-redirect to dashboard
  2. Dashboard → Updated milestone progress
  3. Activities → New recommendations or continue previous
  4. Timeline → Check upcoming developmental periods

— ## Appendix ### Content Requirements

  • 240+ activities across all developmental stages (10 per month)
  • Safety guidelines for each age group
  • Toy database with 100+ common items
  • Developmental explanations based on CDC/AAP guidelines
  • Sensory, motor, and cognitive development focus areas