ResNow

ResNow is a reservation dashboard for restaurants. Staff use it to see the evening's bookings, seat walk-ins, manage guests, and set the opening hours, tables, and rules that decide what can be booked.

It's a SvelteKit and Tailwind frontend with a Storybook component catalogue, built by a small team from a detailed design. I worked on it for about four months as one of several frontend developers. My part was mostly the shared building blocks and the bookings screen.

The bookings timeline

Next to the plain table of bookings there's a timeline view. Each table in the restaurant is a row, the evening is split into fifteen-minute columns across opening hours, and each booking is a block from its start time to its end. The layout is a CSS grid. A booking's row comes from its table, and its start and end columns are worked out from the time and duration rounded to the nearest quarter hour. A marker shows the current time slot. I refactored this view into the bookings page, and fixed gaps and overflow where bookings crossed column edges.

The pieces everything else uses

Much of my work was in the parts every page relies on. I organised the app into route groups for the logged-in dashboard and the sign-in screens, built the sidebar's hover and active states and the organisation menu, and rewrote the top navigation. I added a stepper for multi-step forms, fixed a flickering searchable dropdown, and fixed the date picker that the booking and holiday screens share. Because these are used on almost every screen, small fixes in them improved the whole app.