Home

Full Stack Airbnb clone!

This is a project in Next.js with create-next-app, creating an Airbnb clone.

---

Demo 📦

📌 (bulding...)

---

Features 📢

✔️ TailwindCSS and shadcnUI design. Tailwind animations and effects.

✔️ Full responsiveness

✔️ "Sign in page" with Kindle

✔️ "Landing page" with the list of the houses for rent

✔️ "Favorite page" where you can see your favorites Homes.

✔️ "Listing page" with all the Home you had added.

✔️ "Reservation page" with all the Home you had reserved.

✔️ "Detail page", a detail of the Home by the id with a calendar to make a reservation (with the date already reserved disabled).

✔️ Functionality:

-Add your Home for rent

-Add / Delete favorite Home for rent

-Make a reservation

---

Technologies 🛠️

• React, React-DOM and React icons

• Next.js 14

• Tailwindcss, shadcn UI -for UI components- and Lucide -for icons-.

• React Date Range for the calendars to make a reservation.

• ESLint

• Kinde - auth for modern applications

• Supabase: is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

• Prisma, Next-generation Node.js and TypeScript ORM. Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.

• world-countries, to have a list of countries

• React leaflet & Leaflet, React components for Leaflet maps

• VSC extension recommended to use: Tailwind CSS IntelliSense

---

---

Prerequisites

• Node version 18.x. I used 20.4.1

---

---

Getting Started

1. Cloning the repository:

git clone https://github.com/eugenia1984/airbnb-clone.git

And put inside the root folder

2. After cloning the GitHub repository and install all the dependencies with:

npm install
#or
npm i

3. Setup .env file:

KINDE_CLIENT_ID=<your_kinde_client_id>
KINDE_CLIENT_SECRET=<your_kinde_client_secret>
KINDE_ISSUER_URL=https://<your_kinde_subdomain>.kinde.com

KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/api/auth/creation

DATABASE_URL="postgresql://johndoe:randompassword@localhost:6543/mydb?schema=public?pgbouncer=true&connection_limit=1"
DIRECT_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

# SUPERBASE
SUPABASE_URL=your-superbase-project-url-here
SUPABASE_ANON_KEY=your-superbase-project-api-key-here

4. Setup Prisma. Add MySQL Database :

• To generate the Prisma client, always after npx prisma db pushcommand:

npx prisma generate

• To start Prisma and create an schema:

npx prisma init

• To update the database schema (when we make an update in the schema.prisma file):

npx prisma db push

5. Start the app, running developer server:

npm run dev

• Available commands: Running commands with: npm run [command]

command	description
dev	starts a development instance of the app

• Available commands: Running commands with: npx prisma [command]

command	description
init	initialize prisma
studio	to see the data base
db push	to update the schemas in the data base

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

---