Lil-Adonis / Airb-b

Full Stack Airbnb Clone with Next.js 13 Tailwind-css, Prisma, MongoDB, NextAuth, Framer-motionSocial, Login (Google and Facebook), Image upload, Cloudinary CDN, Location selection, Map component, Country autocomplete, Fetching listings with server components

Airbnb Clone with Next.JS!

Airbnb REACT.JS (Mapbox Integration - Next.js, Tailwind CSS, Mappox)

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • Deployment
• Contact

🌟 About the Project

📷 Screenshots

LIVE DEMO 💥

👾 Tech Stack

Client

• Typescript
• Next.js
• React.js
• TailwindCSS

🧰 Getting Started

‼️ Prerequisites

• Sign up for a Firebase account HERE
• Install Node JS in your computer HERE

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

MAPBOX_KEY

This project was bootstrapped with Create React App.

⚙️ Installation

Install my-project with npm

npx create-next-app@latest --ts my-project

cd my-project

Install dependencies

🧪 Install Tailwind CSS with Next.js

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Install dependencies

🏃 Run Locally

Clone the project

  git clone https://github.com/Lil-Adonis/Airb-b.git

change directory

  cd airbnb

Install dependencies

  npm install

Start the server

  npm run dev

---

This is a Next.js project bootstrapped with create-next-app.

---

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

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

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

🚩 Deployment

To deploy this project run

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

🤝 Contact

Lil Adonis - @twitter_handle - [e-mail]