holidaze home screen

Holidaze Website

This Hotel website was my project exam at school. This is a CRUD site that lets the user send information to an API and display it on the site. On this project I Next.js and Tailwind CSS. The API was created with Strapi.

Below you will see some information about the different pages and a link to the live website and GitHub repository.

Hotels List

This page displays all the available hotels. The hotels are fetched from the API. New hotels added by admin will also be displayed here.

hotels page
Hotel Details

The details page for each hotel gives the user information and a picture of the hotel. This page also allows the user to book a room.

hotel details
Booking

After pressing the book now button the user is presented with a booking modal. This allows the user to fill in their name, email and duration of their stay. The information is then sent to the API and will be displayed on the admin page for the admin to see.

booking modal
Contact

The contact page gives the user information about where they can visit the company and how to contact them. There is also a contact form that can be filled out and sent to the admin of the page. This will also be displayed on the admin page.

contact page
Login Page

The login page lets admins log into the admin page. The login uses authentication through strapi to make sure that only authenticated user can see the admin page.

login page
Admin Page

The admin page displays all bookings of hotels and messages sent from the contact form. The admin page also allows the admin to add more hotels to the page. These will then be displayed on the hotels page.

admin page