🏘🏙 Full Stack Airbnb 🏙🏘

📗 Table of Contents

• 📗 Table of Contents
• 🏘🏙 Full Stack Airbnb
• ✅ Deployment
  • 🛠 Built With
    • Tech Stack
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • 💾 Database
    • Usage
    • Run tests
  • 📊 Kanban Board
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

🏘🏙 Full Stack Airbnb

In this new project I have made a site to reserve or rent houses or apartments identical to Airbnb, taking advantage of key technologies such as JavaScript, TypeScript, React, Node Next.js, NextAuth, Tailwind.css, MongoDB and Express.

💻✅ Deployment

Click here to see the deployment

🛠 Built With

Tech Stack

Client side

• React.js
• JavaScript
• TypeScript
• Eslint
• Tailwind CSS
• NodeJS

Server side

• Next.js

Database

• MongoDB
• Express

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Check out our Next.js deployment documentation for more details.

Kanban board

• Kanban board Project link

Complete State of Kanban board

👥 Authors

👤 Maximo Ortelli

• 💻GitHub: @Maximo Ortelli
• 💻LinkedIn: Maximo Ortelli

🔭 Future Features

• Tailwind design
• Tailwind animations and effects
• Full responsiveness
• Credential authentication
• Google authentication
• Github authentication
• Image upload using Cloudinary CDN
• Client form validation and handling using react-hook-form
• Server error handling using react-toast
• Calendars with react-date-range
• Page loading state
• Page empty state
• Booking / Reservation system
• Guest reservation cancellation
• Owner reservation cancellation
• Creation and deletion of properties
• Pricing calculation
• Advanced search algorithm by category, date range, map location, number of guests, rooms and bathrooms
  • For example we will filter out properties that have a reservation in your desired date range to travel
• Favorites system
• Shareable URL filters
  • Lets say you select a category, location and date range, you will be able to share URL with a logged out friend in another browser and they will see the same results
• How to write POST and DELETE routes in route handlers (app/api)
• How to fetch data in server react components by directly accessing database (WITHOUT API! like Magic!)
• How to handle files like error.tsx and loading.tsx which are new Next 13 templating files to unify loading and error handling
• How to handle relations between Server and Child components!

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please give it a star 😁🌟✨

(back to top)

🙏 Acknowledgments

We thank to Airbnb for the design.

(back to top)

📝 License

This project is MIT licensed.

(back to top)