🏡 Airbnb-Frontend

A fully responsive Airbnb clone built with React, Vite and Tailwind CSS. This repository contains the frontend of the project and is intended as a clean, modern UI implementation of common Airbnb features like search, listings, filters, responsive layout, and light interactions.

Stack

• React (Vite)
• Tailwind CSS
• JavaScript
• HTML

🚀 Live preview

You can preview the website at : https://mohdkamran-khan.github.io/Airbnb-Frontend/

⭐ Features

• Responsive layout for mobile, tablet and desktop
• Search UI with date and guest controls
• Listing cards with images, ratings and basic info
• Reusable UI components for cards, nav, footer and controls
• Tailwind based utility-first styling for fast iteration

📸 Screenshots

🛠️Getting started

Prerequisites

• Node.js 16 or newer
• npm

Install

# clone the repo
git clone https://github.com/mohdkamran-khan/Airbnb-Frontend.git
cd Airbnb-Frontend

# install dependencies
npm install

Run in development

npm run dev
# open http://localhost:5173 or the port Vite prints

Build for production

npm run build
# preview production build locally
npm run preview

📂 Project structure

Airbnb-Frontend/
├─ src/                # source files
│  ├─ components/      # reusable React components
│  ├─ pages/           # route level pages
│  ├─ assets/          # images and static assets
│  └─ main.jsx         # app entry
├─ index.html
├─ package.json
├─ vite.config.js
└─ tailwind.config.js

Available scripts

• npm run dev - start dev server
• npm run build - build for production
• npm run preview - preview the production build locally

✨ Styling

This project uses Tailwind CSS. Customize theme and plugins in tailwind.config.js.

📝 Project Overview

This project is a clone of Airbnb: it replicates listing display, rental-style browsing and property management functionality. The entire application is built in React using Tailwind styling and reuseable components decipting the DRY principle of React.js.

This is a demonstration of building a full clone of a website — using a minimal tech stack.

📧 Contributing

Contributions are welcome. If you want to contribute:

1. Fork the repo
2. Create a feature branch git checkout -b feature/your-feature
3. Commit your changes git commit -m "feat: add ..."
4. Push and open a pull request

📄 License

MIT License
Copyright (c) 2025 Mohd Kamran Khan

👨🏻‍💻 Author

Mohd Kamran Khan | You can reach me at: [mohdkamrankhan.dev@gmail.com]

🌐 Portfolio: mohdkamran-khan.github.io/KAMRAN-portfolio

---

💡 If you like my work, please ⭐ my repos. Your support inspires me to build more projects! 🚀