
Override the entity default styling across a Next.js app using a theme provider and config provider, setting a global color primary and token-driven component customization.
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.
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.
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.
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.
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.
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.
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 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.
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.
Hello, Welcome to the course Next.js 14 Real-Estate App
Certainly, I'd be happy to elaborate on the features included in the Next.js 14 Real-Estate App course.
Tech Stack
Learn Next JS 14 Latest Features like App Router , Server Actions , Middlewares etc.
Implement Clerk Authentication (Google and Github Login).
Working with Prisma ORM to perform all database operations.
Understanding the proper usecases of Nextjs server components
Working with combination of both client and server components
Build UI components with Ant Design Library
Using Tailwind CSS in-order to override Ant Design default styling and building custom components
Project
Working with two different user roles (Admin , User)
Sellers will be able to create , edit & delete properties
Once the properties are created they will be listed in the homepage.
Normal users can contact the sellers in property info page
Sellers can see all the queries received for every property they have published.
Sellers will be able to create 3 properties in the free plan.
If anyone want to create more than 3 properties they have to buy subscription.
Integrating stripe payment gateway in-order to take subscription payments.
Admins will be able see all the users , properties.
Admins can remove any property from the listings if they found any voilations.
Admins can also block users/sellers.
Next.js is an open-source, objective-coded framework for web developers created by Kotlin JS developers. It is used to create server-rendered React applications and can be used with modern JavaScript languages like TypeScript, GraphQL, and React components.
Next.js allows developers to create web applications to a high standard with pre-built features such as routing, file-based routing, webpack dev server, hot module replacement, static exports, and code splitting.
Next.js works well for building static sites and progressive web apps that are SEO-friendly, accessible, and fast.