Next.js 14 Real Estate App with Prisma , MongoDB , Clerk

Learn to integrate Clerk authentication in a Next.js app by enabling Google and GitHub social logins, setting up Clerk, wrapping the app in ClerkProvider, and configuring middleware for protected routes.

Build custom sign in and sign up pages with Clerk in a Next.js app, set up the folder structure and environment variables for the /sign in and /sign up routes.

Fetch the logged-in user from Clerk in a Next.js app using the current user method, retrieving the id, username, and email, with null handling and Google vs GitHub login differences.

Style sign in and sign up pages with tailwind, center content, apply the primary background and Montserrat fonts, and prepare Prisma, Clerk authentication with MongoDB.

Configure the MongoDB Atlas connection and Prisma setup, initialize Prisma and models (user, property, transaction), and manage the database URL via dot env for a Next.js app.

Create a user model in Prisma for the MongoDB users collection, including id, username, email, profile pic, isAdmin, isActive, clerk user id, createdAt, and updatedAt, mapping id to _id.

Develop a clerk-integrated server action to store user data in MongoDB using Prisma, check with find unique, create a new user if absent, and return errors instead of throwing.

Build a reusable layout and header for private routes in a Next.js real estate app, using a layout provider to wrap home, properties, and account pages with consistent user info.

Explore conditional rendering of layouts in a Next.js 14 app, differentiating private and public pages by path name, fetching the current user, and showing a loader during API calls.

Create separate menus for user and admin roles, map menu items like home, properties, and subscriptions to routes, and render the correct menu based on the current user's role.

Learn to implement the properties module with a multi-step create property form, a properties table, and dynamic routes for creating and editing properties.

Create reusable UI components in the root-level components folder for the properties module, including a page title and a link button, with client components and router navigation.

Create a five-step property form in a Next.js 14 real estate app, with basic, location, amenities, media, and contact steps and step navigation.

Build and validate a basic property form step in a Next.js real estate app, including name, description, type, status, and price, with constants-driven selects and responsive layout.

Implement the location step by building a form for city, pin code, landmark, and full address with predefined cities and on finish updating final values.

Build the amenities step of a Next.js 14 real estate app, defining select fields for parking, furnishing, and facing, using option constants within a multi-step form.

Integrate Firebase by enabling image uploads in the property form, uploading images to Firebase to obtain urls, and storing them in MongoDB, with a complete Firebase setup and env configuration.

Use the entity upload component to select multiple images, configure the list type picture card, and manage newly uploaded files in the media state before uploading to Firebase for URLs.

Create and validate the contact step form for Next.js real estate app, capturing owner name, email, phone, and show owner contact, using a grid layout and final values for saving.

Write the final logic to upload images to Firebase, obtain download URLs, and attach them to the temp final values media object.

Build the property model in Prisma for a Next.js real estate app with MongoDB, defining fields, user relation, location, media, and owner details, and implement the create property action.

Fix property form bugs, enforce correct id and data types, implement loading and save property workflow with next/navigation, revalidate path, and preview created properties.

Show added properties with a filterable properties table built in Next.js 14 using Prisma and MongoDB, featuring edit, delete, and clone actions powered by client components and routing.

Learn to pre-populate the edit property form in a Next.js 14 real estate app using Prisma, with initial values, an edit flag, and server actions to update and revalidate.

Learn to edit property media by displaying existing images, uploading new ones, and deleting unwanted photos, then save changes so updates reflect and sort by updated time.

Delete a property using prisma dot property dot delete with a where condition on the ID. Manage loading state, handle errors, and refresh the table to reflect the deletion.

Learn to clone properties to rapidly create new listings by prepopulating a create form with existing attributes, then save as separate properties in the Next.js 14 app with Prisma.

Designs the real estate homepage and user properties page using Prisma queries, with a responsive grid, logged-in user filters, and a view details navigation to a property page.

Build a property information page in a Next.js 14 app with a root loading.tsx loader, suspense, and a responsive grid featuring an image carousel and property details.

Build the right-side property information card featuring amenities, address, and owner details. Reuse a get-attribute function to render label-value pairs, conditionally show owner contact, and ensure responsive, clean UI.

Create a queries module by adding a contact modal on the property information page, letting buyers submit phone, message, and quote amount, while honoring the seller's hidden contact option.

Build and save a property inquiry by defining a Prisma query model, wiring a server action to attach user and property data, and managing loading and success states.

Explore showing buyer and owner queries in a Next.js 14 app with Prisma and MongoDB, including a queries page, data fetching, and a live table with loading states.

surface property queries on the seller dashboard with a show queries button and a property queries modal, fetching by property id with Prisma, displaying user name and mobile.

Create a user account page in a Next.js 14 real estate app using Prisma, Clerk, and MongoDB to show basic details, properties posted, and forthcoming subscription.

Create static subscription plans data for a Next.js real estate app, detailing basic, standard, and premium tiers with price, property limits, images per property, and features.

Create a responsive subscriptions grid that displays plan name, price, and features, with a buy now button as a client component and selection logic for free versus paid plans.

Integrate Stripe payment gateway for standard and premium subscriptions in a Next.js app, generating a client secret via server actions, showing a card form, and activating the subscription after payment.

Learn to implement stripe client secret in a Next.js real estate app by integrating Stripe React, loading Stripe, configuring elements provider, and handling client secret retrieval for a subscription checkout.

Implement a Stripe checkout form in the Next.js 14 real estate app, using the client secret with the payment element and address element to process and confirm payments.

Save the subscription record after a successful payment, linking it to the user and storing the plan details as json, with the payment id captured for a one-time subscription.

Show the active subscription for the logged-in user using the latest record, and display plan name, price, purchased on, and payment id; show no-subscription when none exists.

Enforce subscription-based limits for property creation and image uploads by checking the user plan and current counts (three for free, ten for purchased), then show the form or an error.