jaaydenh/reservation-app

Reservation App

This is a frontend for a reservation app that does the following:

Clients can schedule appointments with providers.
Providers can set their availability for appointments to be scheduled by clients.
Clients can list their reservations and confirm pending reservations.

Built with Next.js, Material UI, and Material UI NextJS.

Getting Started

Run the development server:

npm run dev

Styling

The app mostly uses Material UI for styling but ocassionally uses Tailwind CSS for some components.

Routes

/ - list providers
/provider/:id - list provider availability
/provider/:id/edit - edit provider availability
/client/:id - list client reservations

Data Architecture

Setting weekly availability rules follows this structure:

{
  "rules": [
    { "day": "Sun", "intervals": [{ "from": "09:00", "to": "17:00" }] },
    { "day": "Mon", "intervals": [{ "from": "09:00", "to": "17:00" }] },
    { "day": "Tue", "intervals": [{ "from": "09:00", "to": "17:00" }] },
    { "day": "Wed", "intervals": [{ "from": "09:00", "to": "17:00" }] },
    { "day": "Thu", "intervals": [{ "from": "09:00", "to": "17:00" }] },
    { "day": "Fri", "intervals": [{ "from": "09:00", "to": "17:00" }] },
    { "day": "Sat", "intervals": [{ "from": "09:00", "to": "17:00" }] }
  ]
}

In the future this will allow for type: "day" | "date" to dinstinguish between day and date based availability rules.

The server would be responsible for transforming this data into a simplified format that is used by the frontend when displaying a provider's availability.

{
  "id": 2,
  "name": "Provider 1",
  "availability_timezone": "America/New_York",
  "days": [
    {
      "date": "2024-04-30",
      "status": "available",
      "slots": [
        { "status": "available", "start_time": "2024-04-30T09:00:00-04:00" },
        { "status": "available", "start_time": "2024-04-30T10:15:00-04:00" },
        { "status": "available", "start_time": "2024-04-30T11:30:00-04:00" }
      ]
    }
  ]
}

Mock Data

The app uses mock data from src/data

Tradeoffs and Next Steps

Because of dev time constraints, providers are only able to set per day availability that would persist for all weeks into the future. Ideally, providers would also be able to set date based availability using a calendar interface.
In the future, all times sent and received by the server should be in UTC and converted by the client to the user's timezone.

jaaydenh / reservation-app