🏨 Luxuria Hotel

Full-stack hotel acommodation landing page/business website with authentication. Users can create and manage their bookings with ease.

See how the website looks like and works below 👇.

Or try the app yourself! 👀 Live Demo.

🧰 Built with

TypeScript | React | Next.js | PostgreSQL | Jest Testing Library | Postman | TailwindCSS

🧑‍🤝‍🧑 Users

POST api/users

Create a new user. Hashing the password before storing.

API Endpoint	HTTP Method	Request Body	Protected
/api/users	POST	name, email, password	❌

Success Response

HTTP/1.1 201 Created
  {
    "message": "Your account was created successfully!"
  }

📚 Bookings

GET /api/bookings

Fetch session user's bookings.

API Endpoint	HTTP Method	Request Params	Protected
/api/bookings	GET	?sort_by	✅

Success Response

HTTP/1.1 200 OK
  {
    "message": "Fetched the session user's bookings!",
    "bookings": [
      {
        booking_id: 1,
        arrival_date: "2023-12-05T22:00:00.000Z",
        departure_date: "2023-12-17T22:00:00.000Z",
        guests_number: 2,
      },
      ...bookings,
    ]
  }

POST /api/bookings

Create a new booking

API Endpoint	HTTP Method	Request Body	Protected
/api/bookings	POST	guestsNumber, arrivalDate, departureDate	✅

HTTP/1.1 201 Created
  {
    "message": "Your booking was created!"
  }

DELETE /api/bookings/:id

Delete a booking

API Endpoint	HTTP Method	Request Params	Protected
/api/bookings/:id	DELETE	id	✅

HTTP/1.1 202 Accepted
  {
    "message": "The booking was successfully canceled."
  }

Installation

git clone git@github.com:janaiscoding/luxuria-hotel.git

cd luxuria-hotel

npm install

.env.local placed at root of the directory.

Complete it as per the following instructions:

# For database setup please follow the instructions in this link:
# https://vercel.com/docs/storage/vercel-postgres/quickstart
# You will need a Vercel account in order to create the project and the SQL storage

# NextAuth.js Authentication setup will look like this
NEXTAUTH_SECRET=yoursecret (see more: https://next-auth.js.org/configuration/options#nextauth_secret)
NEXTAUTH_URL=http://localhost:3000

# Reference for OAuth provider with GitHub setup:
# https://next-auth.js.org/providers/github if you want to use the GitHub button
GITHUB_ID=yourgithubappid
GITHUB_SECRET=yourgithubappsecret

Create a new account and store it here if you want to use the demo button
NEXT_PUBLIC_DEMO_EMAIL=youremail
NEXT_PUBLIC_DEMO_PASSWORD=yourpassword

My ToDo list and notes while developing.

• add postgresql backend to nextjs
• create bookings table
• create route for placing a new booking
• validate submitted user dates arrival must be lower than departure
• validate number of persons to be between 1 and 4
• display errors and success messages when placing a new booking
• replaced auth0 with next-auth
• created user table and linked bookings with foreign keys to it
• add hashing and comparing hashing with bcryptjs for newly created users
• create user dashboard to see their own bookings
• link session user to booking post requests
• added navigation on mobile
• added bookings to current user dashboard
• added information about rooms being under construction
• fix homescreen button not having smooth-scrolling
• move github project pointing to localhost to point to normal app url
• allow users to delete their records
  • for this, i had to validate user session to be correct on the client and server in order to allow deletion
  • i get my auth session, and i only delete the same record where the booking id matches with the user id taken from session user email
• reworking endpoints to be restful
  • api/bookings get, post
  • api/bookings/:id delete
  • api/users post
  • api/bookings/:id put
• add pagination for excessive bookings sessions
• write tests
• add maybe sorting posibilities on each row column
• fix responsive screen
• pop-up for booking form on mobile maybe an ui element that opens up from bottom - for now it's just the same element but also visible on mobile
• think about rooms structure, will i allow users to push to rooms db / will i make a db / do i create pages for each room etc.
• user page with history and room and possibility to update (?) the reservation

Useful links for this project

I will be adopting Angular commit messages linting from now on because ofc they look nice https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional#type-enum

Say hi 👋

Feel free to send me feedback, ideas or just message me anything web/coding related @in/jana-istrate