https://github.com/fhenri/booking-room

NextJS Application to book room
https://github.com/fhenri/booking-room

authjs google-calendar-api nextjs14 shadcn-ui tailwindcss tanstack-table webdevelopment

Last synced: 11 days ago
JSON representation

NextJS Application to book room

• Host: GitHub
• URL: https://github.com/fhenri/booking-room
• Owner: fhenri
• License: unlicense
• Created: 2024-11-05T07:06:36.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-12T17:25:43.000Z (about 2 months ago)
• Last Synced: 2024-11-12T18:29:22.936Z (about 2 months ago)
• Topics: authjs, google-calendar-api, nextjs14, shadcn-ui, tailwindcss, tanstack-table, webdevelopment
• Language: TypeScript
• Homepage: https://booking-room-lemon.vercel.app
• Size: 321 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Booking Meeting Room web application

  

  Screenshot from Admin screen

# Features

As a user I can:

- select date, time and capactity required to book a meeting room

- select the free meeting room from the list

- schedule a meeting and book the room

As an admin I can:

- list all rooms (filter, sort)

- see the detailed planning of a given room

- create a new room

- delete an existing room

# Technical Corner

The development of the page is explained in a series of medium article:

- [part I](https://medium.com/@frederic.henri/building-a-fullstack-booking-meeting-room-app-with-nextjs-part-i-2393a80a70d0) discuss the API and admin page component, setting up Redis

- [part II](https://medium.com/@frederic.henri/building-a-fullstack-booking-meeting-room-app-with-nextjs-part-ii-4b536845cd2f) discuss the integration with Google Calendar, the end user form and improvement of admin page.

- [part II]() discuss how to setup authentication using [Auth.js](https://authjs.dev) and a [Google OAuth provider](https://authjs.dev/getting-started/providers/google).

## Stack

- NextJS 

- App router and API routes, since we plan to have multiple clients, we will create API to interact with our backend

- Google Calendar, we will use to store all meeting detail (date, time, participant …)

- Redis, we will store the list of available rooms in redis along with their capacity and the google calendar ID

- Tailwind css and Shadcn/ui for UI components, as my web design talent still pretty low

## Deployment

As usual, the easiest way to deploy Next.js app is to use the the [Vercel Platform](https://vercel.com/new). Make sure to add the required environment variables to connect with your Google Calendar once deployed.

- vercel app: https://booking-room-lemon.vercel.app

- CNAME record from the main site (hosted at cloudflare): https://booking-room.cloud06.io