Luxury Rentals

Live Site: Click Here

Experience luxury living at: Luxury Rentals. Explore our exquisite collection of properties and indulge in the epitome of sophistication and elegance.

Luxury Rentals is a sophisticated and elegant platform dedicated to showcasing exquisite properties including penthouses, beachfront estates, resorts, private islands, villas, and mansions. With a focus on luxury living, our website offers an immersive experience for users to explore and indulge in the world of opulent real estate.

Features

• Responsive Design: Luxury Rentals is optimized for all devices, ensuring seamless browsing experiences on mobile, tablet, and desktop views.

• Unique Design: Our website boasts a distinctive design that sets it apart, providing users with a visually captivating experience.

• Dynamic Navbar: The navbar prominently displays the website name and includes active routes for easy navigation. It features options for Home, Estate Villa, Update Profile, User Profile, Service and Contact. When logged in, the user's profile image is showcased, and hovering over it reveals the user's name. The navbar also offers a logout button for authenticated users.

• Authentication: Secure login and registration processes are implemented with email and password-based authentication. Users can also log in using Google, GitHub.

• Banner Slider: A stunning slider, powered by Swiper.

• Estate Section: Curated categories each estate card presents captivating images, essential details such as title, description, price, area, location, facilities, and a "View Property" button for further exploration.

• Estate Details Page: Clicking on the "View Property" button redirects users to a protected route, ensuring a seamless experience while viewing detailed information about selected estates.

• Footer: The footer displays relevant information and complements the overall design aesthetic of the website.

• 404 Page: A custom 404 page is provided for users encountering invalid URLs or pages.

• Extra Route Contact: An additional protected route offers meaningful and relevant content, enhancing the overall user experience.

• Dynamic Title: Each page features a dynamically updated title.

• Persistent User Information: After logging in, user information remains visible on the navbar even after reloading the website. A loader is displayed during the loading state of user information.

• Additional Challenges Implemented:

  • Show and hide passwords functionality on the registration page and login page.
  • Integration of animation libraries such as AOS and Animate.css, Swiper.
  • Utilization of React-leaflet for enhanced map functionality.
  • Implementation of Firebase's updateProfile() method for secure user profile updates.

Packages Used

• @emotion/react, @emotion/styled: For styling components with CSS-in-JS.
• @heroicons/react, react-icons: Icon libraries for enhanced visual elements.
• @material-tailwind/react, @Daisy UI,Mumba UI, @mui/material: UI component libraries for building elegant interfaces.
• aos, animate.css: Animation libraries for creating engaging transitions.
• firebase: Backend service for authentication and database management.
• react-router-dom: For routing and navigation within the application.
• react-toastify: To display notifications and alerts to users.
• swiper: Powering the banner slider for showcasing property images.
• react-leaflet: Adding interactive maps for property locations.

Installation

To run this project locally, follow these steps:

1. Clone the repository.
2. Install dependencies using npm install.
3. Configure Firebase for authentication and database services.
4. Start the development server with npx vite.

Contributors

License

This project is licensed under the MIT License - see the LICENSE file for details.