This section provides an overview of the front-end of the AirBnB application, which is built with React and Vite.
The front-end of AirBnB is organized as follows:
src/
: Contains the main source code for the React front-end.components/
: React components used throughout the application.assets/
: Images, stylesheets, and other static assets.utils/
: Utility functions or helper scripts.App.jsx
: The main application component.main.jsx
: Entry point for the React application.
public/
: Static assets that will be copied as-is to the build directory.package.json
: Contains project dependencies and scripts.
New Features:
- Mobile-App Behavior: Built and configured as a Progressive Web Application(PWA) so users can install the application for quick navigation and accessiblity.
- Real-time Messaging: Integrated a realtime messaging app where users can explicitly lodge their complains and get real-time assistance and response.
- Gamification and Royalties: Introduced new features to enhance users engagement and involvment with the business.
- Weather Application: Implemented real-time weather details into the various accommodation and places available.
Key Features:
- User-friendly Booking: Intuitive and user-friendly interface for quick and easy bookings.
- Multi-service Support: Supports booking for a wide range of services, making it versatile for businesses.
- Real-time Availability: Provides real-time availability checks for a smooth booking experience.
- Customizable Notifications: Automated email and SMS notifications for users and businesses.
- Secure Payment Integration: Secure payment processing for reservations, ensuring user data safety.
- Admin Dashboard: A comprehensive admin dashboard for businesses to manage bookings and services.
- Responsive Design: Fully responsive design to ensure a seamless experience on all devices.
Before proceeding, ensure that you have completed the general installation steps.
To install and run only the front-end of AirBnB:
- Navigate to the client directory:
cd client
- Install the client dependencies :
npm install
- Start the development server :
npm run dev
This will launch the development server, and you can access the front-end at http://localhost:5173 in your web browser.
The front-end of AirBnB is primarily built with the following technologies:
- React.js with Vite: A modern, fast build tool for React applications.
- Framer Motion.
- React-Router.
- react-typewriter.
- TailwindCSS e.t.c.