My son's nursery has a 4-weekly rotating menu, and I always forget where it is up to. So: a web app! This is build using sveltekit, with a supabase database and prisma ORM, and is deployed to https://nursery-menu.vercel.app/.

A few notes on things I found worked well / hadn't done before:

This was a fun one. I wanted the first column (meal names and times) fixed, and the remainder (day and menu items) I wanted to scroll horizontally so that you could see 1 day at a time clearly on mobile. I set up a svelte REPL, 'css carousel' while building this out, based largely on Well-controlled scrolling with CSS Scroll Snap from web.dev.

One of the problems I wanted to solve was remembering which of the 4 weeks the nursery is on. So, I created a function getCurrentWeekNumber which calculates current week based on how many days have passed since a source of truth (in this case, that 2023-09-22 was week 1), and storing the current week in a derived store currentWeekNumber. The load function in top level +page.server.ts+ then uses this load the current week using sveltekit's redirect helper.

Supabase have a page called supabase works with prisma and it really does work very easily. Setup was easy, apart from a well-discussed type error from the browser on deploymnet, which I resolved using this fix suggested in the comments. Note I only set up read from supabase and all data entry was via prisma studio, for my own ease.

I set up transitions for the nav dropdown using svelte/transition, and for the menu icon using CSS transitions. Initially I tried using svelte transitions for both but this resulted in jerky behaviour, I think because of how svelte processes two simultaneous transitions.

The favicon is a cheeseburger from flaticons, free to use with attribution.