Next BnB

A modern, feature-rich vacation rental platform built with Next.js, integrating dynamic user interfaces, authentication, and seamless deployment on Vercel.

Live Demo

Explore the app live: Next BnB

Table of Contents

• About The Project
• Features
• Technologies Used
• Getting Started
• Usage
• Contact
• Acknowledgements

---

About The Project

Next BnB is an engaging and interactive project designed to help developers build proficiency in web development using Next.js 14. This platform serves as a fully functional vacation rental application, showcasing key concepts in front-end and back-end development.

This project teaches:

• Building a responsive and dynamic user interface with TailwindCSS and Shadcn/UI.
• Developing structured and maintainable backend logic with Next.js Server Actions, Prisma ORM, and Supabase.
• Understanding the differences between server and client components, fetching data, managing states, and handling nested layouts.
• Implementing robust user authentication and account management with Clerk.
• Adding interactivity through CRUD operations and ensuring data validation with the Zod library.
• Uploading and managing images with Supabase storage.
• Deploying a production-ready application using Vercel.

This hands-on project provides practical challenges and solutions, empowering you to create sophisticated web applications confidently.

---

Features

• Dynamic Categories: Explore listings by categories like cabins, airstreams, tents, and more.
• Shadcn Components: Beautiful and reusable components powered by Shadcn/UI.
• Dark Mode: A fully integrated theme toggle for improved user experience.
• Authentication: Secure and seamless login via Clerk.
• Reviews: View and interact with user reviews for listings.
• PostgreSQL Database: Reliable and fast database integration using Prisma and Supabase.

---

Technologies Used

• 
• 
• 
• 
• 
• 
• 

---

Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

• Node.js and npm installed
• A PostgreSQL database
• Supabase, Clerk, and Stripe accounts for API keys

Installation

1. Clone the repo:

   git clone https://github.com/simoncheam/next-bnb.git
   cd next-bnb

2. Install dependencies:

   npm install

3. Set up environment variables: You need two separate environment files for proper configuration:

   .env.local

   # Clerk (Authentication)
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/profile/create
   NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/profile/create
   
   # Website URL
   NEXT_PUBLIC_WEBSITE_URL=https://next-bnb.vercel.app

   .env

   # Prisma and Database
   DATABASE_URL=
   DIRECT_URL=
   
   # Supabase
   SUPABASE_URL=
   SUPABASE_KEY=
   
   # Stripe
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
   STRIPE_SECRET_KEY=

   Note: Ensure these files are created in the root directory of your project and not committed to version control (add them to .gitignore).

4. Initialize Prisma:

   npx prisma migrate dev

5. Start the development server:

   npm run dev

6. Open your browser at http://localhost:3000.

---

Usage

• Explore Listings: Browse vacation rentals by category and location.
• Dark Mode Toggle: Switch themes effortlessly using the dark mode toggle in the navbar.
• Authentication: Log in securely with Clerk.

---

Contact

Simon Cheam - LinkedIn

---

Acknowledgements

• Special thanks to John Smilga for project inspiration and guidance.
• Shadcn/UI for providing an amazing UI component library.
• Clerk for simplifying authentication integration.
• Prisma and Supabase for excellent database solutions.

(back to top)

---