Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenia1984/airbnb-clone
A Next14 App, to create an Airbnb clone
https://github.com/eugenia1984/airbnb-clone
kinde nextjs react tailwindcss typescript
Last synced: about 2 months ago
JSON representation
A Next14 App, to create an Airbnb clone
- Host: GitHub
- URL: https://github.com/eugenia1984/airbnb-clone
- Owner: eugenia1984
- Created: 2023-08-21T23:17:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-29T15:03:18.000Z (6 months ago)
- Last Synced: 2024-06-29T18:27:34.674Z (6 months ago)
- Topics: kinde, nextjs, react, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 783 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Full Stack Airbnb clone!
This is a project in [Next.js](https://nextjs.org/) with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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**](https://react.dev/), [**React-DOM**](https://www.npmjs.com/package/react-dom) and [**React icons**](https://react-icons.github.io/react-icons/)
- [
**Next.js 14**](https://nextjs.org/)
- [
**Tailwindcss**](https://tailwindcss.com/), [**shadcn UI**](https://ui.shadcn.com/) -for UI components- and [**Lucide**](https://lucide.dev/) -for icons-.
- [**React Date Range**](https://hypeserver.github.io/react-date-range/) for the calendars to make a reservation.
- [
**ESLint**](https://eslint.org/)
- [**Kinde**](https://kinde.com/) - auth for modern applications
- [**Supabase**](https://supabase.com/): 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**](https://www.prisma.io/), 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**](https://mledoze.github.io/countries/), to have a list of countries
- [**React leaflet & Leaflet**](https://react-leaflet.js.org/), 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:
```BASH
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:
```BASH
npm install
#or
npm i
```
3. Setup ``.env`` file:
```
KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=https://.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 push`command:
```BASH
npx prisma generate
```
- To start Prisma and create an schema:
```BASH
npx prisma init
```
- To update the database schema (when we make an update in the `schema.prisma` file):
```BASH
npx prisma db push
```
5. Start the app, running developer server:
```BASH
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](http://localhost:3000) with your browser to see the result.
---
---
## 
Notes
I appreciate your interest in this Project ⌨️ with ❤️ by [María Eugenia Costa](https://github.com/eugenia1984) 😊 and follow me at [LinkedIn - maria-eugenia-costa](https://www.linkedin.com/in/maria-eugenia-costa/)
---