Hotel Booking

A hotel booking app has been developed to enable users to browse and make reservations at various hotels

View Demo · See Live

Table of Contents

1. About The Project
   • Built With
   • Features
     • Authentication
     • Server
     • Client
     • Dashboard
2. Getting Started
   • Prerequisites
   • Installation
3. Contact

About The Project

• This Project is a hotel booking app has been developed to enable users to browse and make reservations at various hotels.
• Data is pulled from popular Hotels Websites.
• Project is built with new nextjs server action technology,and combined mix of ssg, streaming ssr, and csr.
• Project is come with fully featured dashboard.
• Project is fully responsive and support light and dark mode.

(back to top)

Built With

(back to top)

Features

Authentication

The app's authentication system, powered by NextAuth, features multi-role authorization, with distinct roles assigned to users. Specifically, there are two roles: "user" and "admin". The "admin" role grants access to the dashboard, providing privileged functionality within the application.

• Email and Password
• Google
• Github

Example: Login

Server

App is built with server action, so there is no need for an API only utilize Prisma as database ORM.

Client

Modern UI and experience.

1. Home Page
2. Countries Page
3. Cities of a Country Page
4. Hotels Page
5. Single Hotel Page

Responsive design.

(back to top)

Dashboard

Fully featured dashboard let you able to manage your hotels and reservations. the dashboard consist of different pages which you can access from navigation bar. Dashboard Tables support pagination, sorting and complex filters. Utilize nuqs for URL state management to save state in URL. You can do CRUD operations on everything with modern UI like steps, Drag and Drop and many more.

(back to top)

Getting Started

Prerequisites

• Node.js
• npm or pnpm
• postgres database

Installation

1. Clone the repo

   git clone https://github.com/Elalfy74/hotel-booking

2. Install NPM packages

   pnpm i

3. Rename 'env.example' to 'env.local'
4. Configure .env Variables replace default values with your own
5. Setup Prisma

   npx prisma db push && npx prisma generate

6. Start the project

   pnpm dev

(back to top)

Contact

Mahmoud Elalfy - @Mahmoudelalfy74 - @Portfolio - @LinkedIn

Project Link: Hotel Booking

(back to top)