Baby Sleep Tracker

A personal baby sleep tracker

| |

Why?

We practice sleep training for our baby which involves tracking his wake and sleep patterns. Previously, we used a Google Sheet shared between several caregivers. Entering data into the Sheet is unwieldy especially for the less tech savvy, so I created a simple front end.

Features

• Responsive layout depending on mobile or large screens
• Input form validation before submitting
• Google OAuth2 for sign in and Sheets API for data updating and reading

Stack

• Svelte for front end
• Tailwind for styling
• Chart.js for charts
• Hosted on Now

Try

As this use case is specific to my needs, the app is not immediately useful to others. If you would like a starter template for Svelte, with built in PWA, Rollup, Tailwind and Now config, head over to svelte-pwa-now.

Otherwise, you can play around with this repo by cloning it (make sure you have NodeJS installed first).

Some work is required to set up a project on the Google Developers Console for authentication and API access.

1. Follow the instructions here.
2. In your cloned repo, replace the client ID and API key from Step 1 in credentials.js like so:

export const credentials = {
  CLIENT_ID: YOUR_NEW_CLIENT_ID,
  API_KEY: YOUR_NEW_API_KEY,
  SCOPES: "https://www.googleapis.com/auth/spreadsheets",
  DISCOVERY_DOCS: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  ...
};

You will then need to create your own Google Sheet to act as the backend.

1. Simply create a Sheet, and ensure you have Edit rights (which should be automatically assigned if you are the creator).
2. The Spreadsheet ID and Sheet ID can be found from the URL of your Google Sheet, eg. https://docs.google.com/spreadsheets/d/THIS_IS_THE_SPREADSHEET_ID/edit#gid=THIS_IS_THE_SHEET_ID. The Sheet Name is simply the name of the sheet found in the bottom tab.
3. In your cloned repo, update credentials.js like so:

export const credentials = {
  ...
  SPREADSHEET_ID: YOUR_SPREADSHEET_ID,
  SHEET_NAME: YOUR_SHEET_NAME,
  SHEET_ID: YOUR_SHEET_ID
};

You're all set! Now,

npm install

and then

npm run dev

will start the app at https://localhost:5000.

Build for production using

npm run build

and serve the dist folder.

Further details

The main data entry logic is located at /components/Entry.svelte. This will be your starting point if you would like to customize how data is recorded to the Google Sheet.

The function validateAndSend() writes to the linked Sheet, including several additional cells of custom formulas related to sleep tracking. You can view the results by opening the Google Sheet after form submission.

The Summary page displays past trends and charts. The component is at /components/Summary.svelte, including functions to plot charts at plotTWTVsFirstSleep(data) and plotNapSleepTime(data). For references on how to use Chart.js, start here.

Licence

MIT