This is a project in Next.js with create-next-app
, creating an Airbnb clone.
📌 (bulding...)
✔️ 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
-
React, React-DOM and React icons
-
Tailwindcss, shadcn UI -for UI components- and Lucide -for icons-.
-
React Date Range for the calendars to make a reservation.
-
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
- Node version 18.x. I used 20.4.1
- Cloning the repository:
git clone https://github.com/eugenia1984/airbnb-clone.git
And put inside the root folder
- After cloning the GitHub repository and install all the dependencies with:
npm install
#or
npm i
- 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
- Setup Prisma. Add MySQL Database :
- To generate the Prisma client, always after
npx prisma db push
command:
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
- Start the app, running developer server:
npm run dev
command | description |
---|---|
dev |
starts a development instance of the app |
command | description |
---|---|
init |
initialize prisma |
studio |
to see the data base |
db push |
to update the schemas in the data base |
- Open http://localhost:3000 with your browser to see the result.
I appreciate your interest in this Project ⌨️ with ❤️ by María Eugenia Costa 😊 and follow me at LinkedIn - maria-eugenia-costa