AI React NextJS TypeScript Full Stack Business Directory App

Bootstraps a fresh Next.js project with TypeScript, Tailwind, and App Router to build a local business directory. Integrates SetC UI and Google Gemini, uses MongoDB, and deploys to Vercel.

Implement light and dark themes using satin ui by installing the next themes package. Wrap the app with a theme provider in context and enable a simple icon toggle.

Create a mode toggle component to switch between dark and light themes using the next themes hook and sun and moon icons, with a clickable button on the homepage.

Fix hydration warning by delaying client rendering until the component mounts; use useEffect to set mounted true and render only on the client to match server output.

Build a top navigation with a menu bar, trigger and content items, and a mode toggle; integrate into the layout and support placeholders, dropdowns, and simple submenus.

Learn to integrate an svg logo into a Next.js app by placing it in the public folder, rendering with next/image, and linking it in the top nav to the homepage.

Implement Clerk authentication in a Next.js app by creating env vars, setting up middleware, wrapping the layout with the provider, and protecting dashboard routes with the createRoute method.

Wrap the app layout with the clock provider from Clock Nexus to enable sign in, sign out, and the user button in the top navigation via Google or email.

Create a protected dashboard page by adding a dashboard folder with base.tsx, wire a top-nav link to it, and ensure unauthenticated users redirect to login via cloud protection.

Add a 'add business' button to the top navigation, decorate the menu with icons, and create a dedicated business/add page with routing and centered add business text.

Integrate Lucid React icons in the top navigation, adding plus and dashboard icons. Tune size and spacing with flex utilities to align icons with labels.

Render the dashboard link only for logged-in users using the current user hook in a server component for seo, with a client-side fallback via use user hook if needed.

Learn to build a responsive add-business page with a left form and real-time preview, using flex layouts and Tailwind classes for mobile and desktop layouts.

Learn to build a shared form for creating and updating businesses using a React context, with a TypeScript business interface covering id, contact details, hours, logo, and seo slug.

Set up a typed business context in React with an initial business state (id, user, email, name, category, descriptions), a provider, and a useBusiness hook for loading state and access.

Wrap the layout with the business context provider, and use the business hook to access context across the app in a client component that renders a dynamic, mapped input form.

Create a business add form by mapping an input fields array and defining an interface for name, category, address, phone, email, website, opening hours, Australian business number, and logo upload.

Display input fields by mapping an input fields array to an input component in a form, using context state and handlers for change and submit.

Use a react context to manage the business state with handle change and handle submit, wiring inputs through a provider and organizing types in utils.

Save user form data to local storage with localStorage.setItem and JSON.stringify, then restore it on mount using useEffect and localStorage.getItem with JSON.parse to populate state.

Create a live preview card that shows real-time business data as you type, using a reusable client component in a Next.js TypeScript app.

Learn to build a preview card using the CCNY card component, with a header showing the business logo, name, and category, and icons for location, phone, email, and hours.

Build a reusable preview card for a business directory app, featuring an AI-generated description limited to three lines and an info item component for address, phone, email, website, and hours.

Demonstrates enforcing sign-in before saving a business listing in a React and Next.js app using Clerk hooks to open a sign-in modal and rely on local storage.

Set up MongoDB Atlas by logging in and creating a free cluster to obtain a connection string. Implement a db.ts with mongoose to maintain a single connection via environment variable.

Define a business model by building a mongoose schema for a business, including user email, name, category, address, and other fields, with a slug generated automatically, timestamps, and published status.

Show how to save a business via a server action, generate a unique slug with slugify and nanoid, and secure the operation using the current user email.

Create new business entries by wiring a save-to-db server action, manage loading state and a spinner, disable the submit button during saving, handle login flow, and use toast notifications.

Install react-hot-toast, import Toaster and toast, place the toaster in navigation to show notifications with a party popper emoji, then clear local storage and redirect to /dashboard/business/edit using the id.

Redirect users to the business/admins page after sign in or sign up via next public redirects. Disable the submit button when required fields are missing and show a loading spinner.

Create two server actions to fetch all businesses for the current user and fetch a single business by id, enabling pre-populated edit forms and a user dashboard.

Import and use the business context to fetch and store user businesses in state, then fetch on the dashboard page via useEffect based on the path.

Display businesses in a responsive three-column card grid using a preview card, map through the data, and link each card to the edit dashboard page with a hover zoom effect.