StayBnB - A Hotel Booking Website

Introduction

Welcome to our GitHub repository for StayBnB, an innovative web application designed to revolutionize the way people book accommodations. Inspired by the success of platforms like Airbnb, StayBnB offers a comprehensive solution for travelers and hosts alike. Whether you're looking for a cozy apartment for a weekend getaway or managing your property listings, StayBnB has you covered.

Project Type

Frontend

Deplolyed App

Frontend: https://air-bnb-clone-livid-gamma.vercel.app/ Database: https://b33-group1-airbnb.onrender.com

Directory Structure

B33-Group1/ 
├─ backend/ 
├─ index.html 
├─ src/
‎    ├─ aboutUs.html
‎    ├─ style.css
├─ Admin Dashboard/
‎    ├─ dashboard.html
‎    ├─ merchants.html
‎    ├─ dashboard.css
‎    ├─merchants.css
├─ LoginPage/
‎    ├─ index.html
‎    ├─ crud.js
‎    ├─ script.js   
├─ payment/
‎    ├─ address.html 
‎    ├─ address.css  
‎    ├─ address.js  
‎    ├─ payment.html   
‎    ├─ payment.css   
‎    ├─ payment.js   
├─ContactUsPage/
‎    ├─contact_us.html  
‎    ├─contact_us.css

Video Walkthrough of the project

Here is a video walkthrough of our website: Project Presentation Video - JS204 Group 1

Features

The key features of our website include:

• Login/Signup
• Booking and payment functionality
• Admin dashboard that allows adding, deleting, updating and editing hotel information.

Installation & Getting started

• Clone the repository: git clone https://github.com/tashwini-p/B33-Group1.git
• Navigate to the project directory on gitbash: cd B33-Group1
• Open the index.html file in your preferred web browser from the root directory.

Usage

Home Page

• Visit the StayBnB Website.
• Explore the homepage for hotel listings in the most exciting destinations
• Navigate to specific sections like Stays, About Us, Support sections
• Book your hotels by clicking on the "Book Now" button on any of the hotel listings.

Login/SignUp Page

• Users can log in using a standard email and password combination after registering on the sign up form.
• Account Creation: New users can create an account by providing their email and password.
• Admin Page Integration: With the right credentials for accessing admin rights, users can access the admin dashboard for additional functionalities

Booking and Payments Page

• Navigate to the "Stays" Page through the navigation bar.
• Choose a hotel of your liking and click on the "Book Now" button
• The button will redirect you to the payment page.
• Add in all the necessary information and click "confirm" to move on to the payment gateway.
• At the Payment Page, choose a payment method, verify and then click on "Securely Pay"

Admin Dashboard

• Navigate to the sign in page and type in the admin credentials
• Explore the dashboard and the statistics visible
• Click on "Our Hotels" in the sidebar to access the editing page where an admin can add more hotel listings, edit or delete existing ones and even filter and sort through the content
• To go back to the landing page, simply click on the home icon on the dashboard navbar.

Admin DashBoard Credentials

To be able to access the admin dashboard on our website, navigate to the Login Page by clicking on the user icon in the landing page and type the following credentials:

username: admin
password: admin

API Endpoints for Backend Mock JSON server

Welcome to our Mock JSON server, where you can access and modify resources using a variety of HTTP methods:

GET: Retrieve resources from the server.
POST: Create new resources on the server.
PUT: Update existing resources on the server.
PATCH: Partially update existing resources on the server.
DELETE: Remove resources from the server.

Technology Stack