maydon / airbmb

End to end next app (Airbnb clone)

Airbmb - 'Airbnb' clone

Check it out here: https://airbmb-yosikari.vercel.app/

Table of Contents

• Project Features
• Technologies Used
• Libraries Used
• Demo
• Installation
• Contact Me
• Gallery

Project Features

• Login: Responsive login page for any device, supporting login via email, Google, or Github.
• Reservations: Comprehensive view of available guest houses and hotels, displayed conveniently on the homepage for easy browsing and selection.
• Details: In-depth information about each reservation, including description, location on a map, and host name. Users can mark reservations as favorites, select specific dates (if available), and make informed decisions about their bookings.
• Listings: Dynamic modal for easy posting of guest houses and hotels, with five simple steps for creating a listing: category selection, location, number of guests/rooms/bathrooms, image upload, and title/description/price.
• Filters: Two options for filtering search results: selecting categories via icons or using a dynamic modal with location, date, and property details filters.
• Navbar: Convenient navigation bar for easy access to favorites, reservations, properties, and login/logout functions.

Technologies Used

This project is built using the following technologies:

The app started with create-next-app, using tailwind css [npm install -D tailwindcss postcss autoprefixer] [npx tailwindcss init -p] https://tailwindcss.com/docs/guides/nextjs .

• TypeScript
• TailwindCSS
• Next.js
• React Hooks (useRef, useState, useEffect)
• React Custom Hooks (useCountries, useFavorite, useLoginModal, useRegisterModal, useRentModal, useSearchModal)

Libraries Used

This project is using the following libraries:

Styles:

• TailwindCSS
• Leaflet (Maps)
• react-date-range (Calender)

Icons:

• react-icons

Data Base:

• Prisma (MongoDB)
• Cloudinary

Flash notifications:

• React hot toast

Demo

To see a live demo of the project, please visit https://airbmb-yosikari.vercel.app/

Installation

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/yosikari/Airbmb.git

2. Install dependencies:

   npm install

3. Start the server:

   npm run dev

The website should be available at http://localhost:3000/.

Contact Me

If you have any questions or feedback about the project, please feel free to reach me out at [email protected].

Gallery

Login / Sign up

Post your own

Full view

Filter modal

Filter category

Filter results

Favorites page

Properties page

Reservation page

Trips page

Mobile view