{"id":16790345,"url":"https://github.com/cerivitos/babysleep","last_synced_at":"2025-04-05T09:12:51.183Z","repository":{"id":36690057,"uuid":"196744549","full_name":"cerivitos/BabySleep","owner":"cerivitos","description":"A baby sleep training tracker","archived":false,"fork":false,"pushed_at":"2023-01-05T21:18:59.000Z","size":10201,"stargazers_count":0,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-10T18:11:39.324Z","etag":null,"topics":["baby-sleep-tracker","chart-js","google-api-client","google-sheet","pwa","svelte","tailwind"],"latest_commit_sha":null,"homepage":"https://babysleep.cerivitos.now.sh","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cerivitos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-13T16:44:31.000Z","updated_at":"2023-03-23T07:37:01.000Z","dependencies_parsed_at":"2023-01-17T04:15:31.932Z","dependency_job_id":null,"html_url":"https://github.com/cerivitos/BabySleep","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2FBabySleep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2FBabySleep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2FBabySleep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cerivitos%2FBabySleep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cerivitos","download_url":"https://codeload.github.com/cerivitos/BabySleep/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312093,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["baby-sleep-tracker","chart-js","google-api-client","google-sheet","pwa","svelte","tailwind"],"created_at":"2024-10-13T08:29:33.057Z","updated_at":"2025-04-05T09:12:51.147Z","avatar_url":"https://github.com/cerivitos.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![icon](https://github.com/cerivitos/BabySleep/blob/master/src/assets/favicon-32x32.png)\nBaby Sleep Tracker\n=============\nA personal baby sleep tracker\n\n\u003cimg width=\"240\" src=\"https://github.com/cerivitos/BabySleep/blob/master/babysleep.cerivitos.now.sh_(iPhone%206_7_8%20Plus).png\"\u003e| \n\u003cimg width=\"240\" src=\"https://github.com/cerivitos/BabySleep/blob/master/babysleep.cerivitos.now.sh_(iPhone%206_7_8).png\"\u003e| \n\u003cimg width=\"240\" src=\"https://github.com/cerivitos/BabySleep/blob/master/babysleep.cerivitos.now.sh_(iPhone%206_7_8%20Plus)%20(1).png\"\u003e\n\n![laptop_screen](https://github.com/cerivitos/BabySleep/blob/master/babysleep.cerivitos.now.sh_(Laptop%20with%20MDPI%20screen).png)\n\n## Why?\nWe 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.\n\n## Features\n- Responsive layout depending on mobile or large screens\n- Input form validation before submitting\n- Google OAuth2 for sign in and Sheets API for data updating and reading\n\n## Stack\n- [Svelte](https://svelte.dev) for front end\n- [Tailwind](https://tailwindcss.com) for styling\n- [Chart.js](https://chartjs.org) for charts\n- Hosted on [Now](https://zeit.co/now)\n\n## Try\nAs 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](https://github.com/cerivitos/svelte-pwa-now).\n\nOtherwise, you can play around with this repo by cloning it (make sure you have [NodeJS](https://nodejs.org) installed first). \n\nSome work is required to set up a project on the [Google Developers Console](https://console.developers.google.com) for authentication and API access. \n1. Follow the instructions [here](https://developers.google.com/sheets/api/quickstart/js).\n2. In your cloned repo, replace the *client ID* and *API key* from Step 1 in ```credentials.js``` like so:\n```bash\nexport const credentials = {\n  CLIENT_ID: YOUR_NEW_CLIENT_ID,\n  API_KEY: YOUR_NEW_API_KEY,\n  SCOPES: \"https://www.googleapis.com/auth/spreadsheets\",\n  DISCOVERY_DOCS: [\"https://sheets.googleapis.com/$discovery/rest?version=v4\"],\n  ...\n};\n```\n\nYou will then need to create your own [Google Sheet](https://sheets.google.com) to act as the backend. \n1. Simply create a Sheet, and ensure you have Edit rights (which should be automatically assigned if you are the creator).\n2. 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.\n3. In your cloned repo,  update ```credentials.js``` like so:\n```bash\nexport const credentials = {\n  ...\n  SPREADSHEET_ID: YOUR_SPREADSHEET_ID,\n  SHEET_NAME: YOUR_SHEET_NAME,\n  SHEET_ID: YOUR_SHEET_ID\n};\n```\n\nYou're all set! Now,\n```bash\nnpm install\n```\nand then\n```bash\nnpm run dev\n```\nwill start the app at https://localhost:5000.\n\nBuild for production using \n```bash\nnpm run build\n```\nand serve the ```dist``` folder.\n\n## Further details\nThe 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.\n\nThe function [```validateAndSend()```](https://github.com/cerivitos/BabySleep/blob/18e7ee2af4f62ff736239f573ea560997b5575e8/src/components/Entry.svelte#L117) 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.\n\nThe Summary page displays past trends and charts. The component is at ```/components/Summary.svelte```, including functions to plot charts at [```plotTWTVsFirstSleep(data)```](https://github.com/cerivitos/BabySleep/blob/18e7ee2af4f62ff736239f573ea560997b5575e8/src/components/Summary.svelte#L96) and [```plotNapSleepTime(data)```](https://github.com/cerivitos/BabySleep/blob/18e7ee2af4f62ff736239f573ea560997b5575e8/src/components/Summary.svelte#L197). For references on how to use Chart.js, start [here](https://www.chartjs.org/docs/latest/).\n\n## Licence\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerivitos%2Fbabysleep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcerivitos%2Fbabysleep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerivitos%2Fbabysleep/lists"}