Vibe Coding - Baby Sleep Tracker

To monitor our baby from other rooms, we purchased a Nanit Baby Monitor. Using image recognition, Nanit provides insights into our baby’s nighttime sleep patterns through its app. Each state transition point includes a video for review.

However, the display isn’t very intuitive — the chart doesn’t show the exact timestamps for each transition. For example, the start and end times of the two longer sleep sessions are not clearly marked.

To more intuitively view this information and more flexibly display the baby’s sleep duration and time periods throughout the night, I used Cursor and video-coding to build a Web App:

• Fetch data from Nanit API for any given date
• Render sleep sessions throughout the day
• Plot sleeping trend of most recent dates

Lessons learnt:

• Think through the main features and their designs you want before code generation with Cursor.
  • Although LLM can generate code for you. You would still need to think through what are the features you have in mind, and what things would look like (the design).
  • This reminds me how Firebase Studio is trying to help build a PRD (Product Requirements Document) before beginning to generate code.
  • Remind me apps like https://stitch.withgoogle.com/
• Think about testing if...