A nap-schedule planner for parents of infants — turn a baby's age, wake windows, and bedtime into a clear daily sleep plan, checked against published guidance.
Newborn sleep runs on wake windows — the amount of awake time a baby can comfortably handle between naps — not the clock. Wake Windows lets a parent enter their baby's birthday, wake time, wake-window lengths, and bedtime, then instantly see:
- a clock-time nap schedule (
Wake 7:00 AM → Nap 1 9:00–10:20 → … → Bed 7:00 PM), - a 24-hour visual breakdown of wake / nap / night sleep,
- and how the plan compares to published, cited sleep guidance for the baby's age.
▶ Try the live app — enter a birthday and a few wake windows; the schedule and the shareable URL update as you type.
| 🍼 Wake-window planner | Computes total nap, night, and wake time and renders an actual clock schedule for each nap. |
| 📊 24-hour visual breakdown | A proportional bar shows the day split across wake, night sleep, and naps at a glance. |
| 👶 Corrected-age adjustment | Accounts for gestational age, so a premature baby is mapped to the right developmental stage. |
| 📚 Cited recommendations | Compares the schedule against age brackets (0–24 months) from multiple sources, each linked back to its origin, with values color-coded in / out of range. |
| 🔗 Shareable schedules | Full state lives in the URL query string, so a plan can be bookmarked or shared with a partner or caregiver. |
| 📱 Responsive & accessible | Mobile-first layout, dark theme, semantic markup, and decorative imagery hidden from screen readers. |
This started as a stale 2022 prototype and was rebuilt into a small, production-grade app. A few things worth calling out:
- Framework-agnostic domain layer. All the real logic — sleep math, gestational-age
adjustment, nap-time computation, and recommendation matching — lives in plain TypeScript
classes (
models/) with no Vue dependency, so it's trivial to test and reason about. - Tested for correctness, not just coverage. 47 Vitest unit tests pin the domain behavior, including edge cases (over-scheduled days, premature babies, bracket boundaries). Several genuine bugs were found and fixed this way — e.g. an inverted night-sleep formula where a later wake time wrongly produced less night sleep.
- Full toolchain modernization, zero regressions. Migrated Vite 3 → 6, TypeScript 4.6 → 5.9, Vue 3.2 → 3.5, and Tailwind CSS 3 → 4 (CSS-first config via the Vite plugin), validated by the test suite and a production build at each step.
- Type-safe throughout.
vue-tscruns on every build; nullable returns are modeled in the types so callers are forced to handle them. - CI/CD. Pushes get an automated Netlify deploy preview; the build pins Node 20 for the Tailwind v4 toolchain.
Vue 3.5 (<script setup>, Composition API) · TypeScript 5.9 · Vite 6 ·
Tailwind CSS 4 · Vitest 4 · deployed on Netlify.
src/
main.ts App entry — mounts Vue
App.vue Root shell (layout, responsive padding)
style.css Tailwind v4 entry + base tokens
components/
Summary.vue Inputs, 24h bar, stats, nap schedule, URL persistence
Recommendations.vue Age-matched guidance with cited, linked sources
models/ Framework-agnostic, unit-tested domain layer
ScheduleSetting.ts Sleep math, corrected age, nap-time computation
SleepRecommendations.ts Recommendation data, brackets, validation
time.ts Clock-time formatting
*.test.ts Vitest unit tests
State is held in a single reactive ScheduleSetting in Summary.vue; the schedule is
serialized to (and restored from) the URL query string, keeping the app fully stateless.
git clone https://github.com/jfreal/wake-windows.git
cd wake-windows
npm install
npm run dev # start the dev server| Script | Description |
|---|---|
npm run dev |
Start the Vite dev server |
npm run build |
Type-check (vue-tsc) and build for production |
npm run preview |
Preview the production build locally |
npm test |
Run the Vitest suite |
This is a personal project built to help plan a real baby's naps — and to keep a clean, well-tested, modern front-end codebase. Feedback and ideas are welcome.