Airbnb Clone Project - RV2024

Authentication

Implement user authentication using a library like Firebase Authentication or Auth0.

• Create a registration and login page for users to access the booking area.

Application Layout

• Design a Navbar Component that spans the entire viewport width on small screens, hides navItems and avatar, and shows a hamburger icon.
• Insert the Airbnb logo in the left side of the Navbar.
• Show avatar on large screens.
• Show navItems on medium screens.
• Design a SearchBar component and place it under the Navbar.
• On medium screens, add 3 centered interactive elements (location, calendar, guests), and hide them on small screens.
• Insert map and grid icons on the left side.
• Insert a filter icon on the right side.
• Design an Iconbar component that spans the entire viewport width on small screens and spans the entire viewport height on the left.
• Create an array of categories with a corresponding icon in each array item.
• Design an Overview component where the main user can see an overview of the available bnb-cards.
• Implement a Card view that displays all cards in the card Object using CSS grid for the Card and subgrid for the content.

bnb-cards View

[No specific details provided]

Search Creation/Editing

Enable the main user and family members to add, edit, and delete events.

• Include fields for event title, date, time, location, and category.

Notifications

Implement email or in-app notifications for upcoming events or reminders.

• Allow users to customize notification preferences.

User Permissions

Set different permission levels for !isHost and isHost.

• Define who can create, edit, or delete Objects.

Responsive Design

Ensure your application is responsive, so it works well on various devices.

Data Storage

Use a database (Firebase, MongoDB, etc.) to store user information and calendar events securely.

Technologies and Tools

• Sveltekit: Front-end framework for building the user interface.
• Firebase Authentication: For user authentication.
• Shadscn-svelte: Svelte components!!
• Sveltekit Router: For handling navigation within the app.
• CSS Grid / Subgrid for Cards layout
• CSS flex for horizontal layout issues
• Material-UI / Ant Design: UI component libraries for a consistent and polished look.

Set Up the Project

• Initialize a new Sveltekit project.
• Add shadcn-svelte.
• Add tailwindcss.
• Set up authentication.

Build Authentication System

• Create signup and login pages.
• Set up authentication state management.

Members

Create pages to add and manage members.

Event Categories and Creation

Implement the ability to add events with different categories.

Notifications

Set up notifications for events.

User Permissions

Define user roles and permissions.

Responsive Design

Ensure your app looks good on various screen sizes.

Testing and Deployment

Test your application thoroughly. Deploy your app to a hosting service like Vercel, Netlify, or Firebase Hosting.

README.md