Mastering NextJS 14 & OpenAI

Build a full stack AI-powered application with Next.js, featuring Google or email authentication, a dashboard with theme toggle, and an OpenAI API driven city tour generator.

Create a new next app with npx create next-app --latest, name it GPT genius, enable TypeScript and tailwind with the app router, then run npm run dev at localhost 3000.

Create a dashboard route group in NextJS 14, building chat, profile, and tours pages with a shared layout and a children prop, delivering clean URLs like /chat.

Configure a Next.js 14 home page by setting metadata and a title and description, and implement a Daisy UI hero layout with a get started link to the chat page.

Learn to set up Clerk authentication in a Next.js project by configuring env keys, wrapping the app in the Clerk provider, and enabling sign-in with Google or email.

Create custom sign in and sign up pages in your Next.js app using Clark components. Configure env local to route after sign in/up to chat, then restart the server.

install and use the react icons library, importing icons as components. apply tailwind css classes and study the docs to choose icons for the dashboard.

Learn to build a responsive dashboard layout with a persistent sidebar using Daisy UI's drawer, integrating header, theme toggle, navigation links, and content areas for a Next.js app.

Create a multi-component sidebar in Next.js 14, including header, nav links, and member profile; style with tailwind, set a three-row grid, and enable theme, email display, and logout.

Create a sidebar header with a logo named GPT genius, an icon, and a theme toggle button, all arranged in a centered flex layout with padding and spacing.

Create a nav links component by defining a links array with page routes and labels, then iterate to render each item using Next.js link and Daisy's menu.

Utilize Clark's user button and the current user and auth functions to display the logged-in user's email address and ID, with a configurable after sign-out URL.

Enable a theme toggle in a Next.js app with Daisy UI, switching between Winter and Dracula themes by updating data-theme on the HTML element.

Mastering NextJS 14 & OpenAI offers a boilerplate overview that showcases a functional sidebar, a user info component, and a theme toggle for a reusable dashboard setup.

navigate to the profile page and implement Clark's user profile component to display current user info and manage account options within a Next.js 14 app.

Install the React Hot Toast library and set up providers in your layout. Wrap children with the providers component to enable toasts and prepare for React Query.

Build a ChatGPT-like chat page in Next.js using React Query and server actions to call the OpenAI API, managing text and messages with React state and a form.

Install react query and dev tools, set up a query client with a one-minute stale time, and implement use query and use mutation with axios in a Next.js app.

Set up React Query in a Next.js app with a boilerplate and dev tools. Learn to use server components and server actions for a mutation with hydration boundary and dehydrate.

Explore how OpenAI pricing works with token counts, roughly four characters per token, covering input and output costs for GPT-3.5 turbo, plus real spending and usage limits.

Explore the OpenAI playground to test API calls, learn how system prompts shape responses, adjust model, temperature, max tokens, and understand the context window and token concept.

Explore how to call OpenAI APIs using chat completion, constructing messages with system, user, and assistant roles, and configuring model, max tokens, and temperature in a NodeJS setup.

Install the OpenAI package, set the api key in .env.local, restart the server, then use an OpenAI instance with the chat completions api (GPT-3.5 turbo) to generate responses.

Connect the frontend to the generate chat response, manage conversation context by storing questions and answers as chat messages, and handle success or error using the OpenAI API.

display messages in the browser by showing a loading spinner and disabling the submit button during pending requests. Render a chat list with user and AI roles and emoji avatars.

Create a new tour page by duplicating the chat setup, save responses to the database to preserve tokens, and implement tour and tour info components with react query boilerplate.

Set up a tour page with a form, toast, and tour info component. Learn to prevent default on submit and build a form data object to capture city and country.

Configure react query with useMutation and useQueryClient to manage tours by destination city and country, handle loading states, and create new tours with toasts on errors.

Design a robust tour prompt that uses city and country inputs to generate a structured JSON tour with title, description, and stops, while validating cities for consistency.

Set up a generate tour response function with try-catch flow, a tour-guide system prompt, and GPT-3.5 turbo query, parsing JSON tour data and handling city not found errors with toast.

Destructure tour data to extract title, description, and stops, then render a styled tour info section. Map over stops to display each location as a padded, rounded item.

learn to save responses in a Planetscale database by setting up Prisma, Dotenv, and dev and production branches in a Next.js 14 project.

Define a tour model in Prisma with id, createdAt, updatedAt, city, country, title, description as db text, and stops as json. Ensure a unique city-country pair and push the schema.

Learn to implement Prisma-based tour creation and retrieval: find existing tours by city and country, create new tours when needed, and invalidate the tours query for fresh data.

Learn why splitting server actions into separate frontend-called functions avoids 10-second Vercel timeouts when checking for existing tours and creating new ones, even with Prisma and AI.

Create a get all tours function to fetch tours, returning all when no search term and filtering by city or country with contains, ordered by city via Prisma.

Set up the front end by creating a doors page, tours list, and tour card, then enable server-side prefetching of tours using react query.

Set up a client component to fetch tours with two use query instances, render a responsive tours list with linked tour cards, and invalidate after creating a new tour.

Implement a dynamic search form that filters tours by city or country with a controlled input and state. React query caches results and refetches as the search value changes.

Create a dynamic single tour page in Next.js 14, fetch the tour by id with find unique, redirect if not found, and render it using the tour info component.

Generate images with OpenAI in a Next.js app, handling two-hour URLs and optional Cloudinary storage; display with the Next.js image component and compare costs with chat.

Switch to the Unsplash API to fetch a city tour image via Axios, using the Readme API key and dotenv, and build the URL with the city query.

Debug a bug in custom sign in and sign up pages on NextJS 14 and OpenAI; learn Clark-hosted workarounds and env.local cleanup to fix email sign-in redirect to home.

Set a per-user token limit for chat, create a token model, enforce before-request checks, deduct after each call, and disable account deletion for deployment-ready security.

Set a max tokens limit of 100 for generated chat responses, adjust Clark dashboard settings for authentication and disposable email restrictions, then test faster but incomplete results.

Define a Prisma token model with clerk id and tokens defaulting to 1000, then fetch, generate, or subtract tokens using find unique, create, and update operations, and revalidate profile path.

Learn how to fetch or generate user tokens in NextJS 14, using clerk auth, and display token counts on the dashboard and profile with a revalidate path.

Set up client-side tour logic to check and deduct tokens before OpenAI requests, refactor data to include tokens, and show toasts for low balance.

Refactor the chat logic to return an object with message and tokens, using response.usage.total_tokens; implement an async mutation that fetches user tokens by ID and updates tokens after a response.

Deploy a Next.js 14 app with OpenAI by shortening the prompt data to prevent timeouts, then push the Planetscale schema, create a GitHub repo, and deploy to Vercel.

Build a Shopify job tracking app with Next.js 14 and TypeScript, featuring authentication, a dashboard with monthly application stats, a searchable, paginated job list, and CRUD operations for jobs.

Bootstrapping a new Next.js 14 project with TypeScript, ESLint, Tailwind CSS, and the app router; download assets, install library versions, then run npm run dev on localhost 3000.

Learn chassis ui, a reusable component library that reduces CSS and speeds up builds, with install steps, button components, docs guidance, and Next.js integration using TypeScript and CSS variables.

Explore how to install, import, and use shadcn-ui components like button and dropdown, read the api reference, and apply props, variants, and TypeScript types for layouts.

Implement a Next.js 14 home page with TypeScript typings, header and grid layout, configure title, description, favicon, and logo, and wire up next/image and theming assets.

Create a dashboard under the app folder in a Next.js 14 project with job, jobs, and stats pages. Implement a shared layout to render children with TypeScript and React Query.

Enable Clerk authentication in the app by wrapping it with the Clerk provider, configuring env variables and middleware to restrict public routes, so only signed-in users access dashboards.

Build a reusable nav links array for sidebar and mobile dropdown in a utils/links.tsx file, using a TypeScript nav link type with href, label, and icon components.

Create a dashboard layout by building sidebar, navbar, links dropdown, and theme toggle components, then implement a responsive grid that hides the sidebar on small screens.

Build a sidebar with a top logo, render link buttons with icons, and highlight the active route using usePathname and dynamic variants in Next.js 14.

Learn to install and configure a drop down menu with root, trigger, and content, map links, adjust alignment and offset, and test responsive behavior across screen sizes.

Learn to change themes and toggle dark mode in Schatzi using CSS variables or utility classes, and customize blue or green palettes via global CSS.

Toggle between light and dark themes in a Next.js 14 app by setting up providers, integrating the Next Themes provider, and implementing a theme toggle button and system theme support.

Build a dynamic job form with the Shadcn-ui forms component, leveraging Zod validation and react-hook-form, plus front-end and server checks for reliable, interactive inputs.

Refactor the form by moving the schema to a dedicated types file, define create and edit job schema with Zod validations, and export a reusable inferred TypeScript type.

Extract and reuse form field and custom form select components, wire them with react-hook-form control, and integrate Qazi UI select for streamlined, importable form inputs in the project.

Refactor the create job form by wiring types, schema, and custom field and select components with a Zod resolver. Set default values, validate enums, and log submitted values.

Learn how to integrate Prisma with a render-hosted Postgres database, set up environment variables, initialize Prisma, define a job model, and push schema changes to your render instance.

Learn to implement a server action that creates a job with Prisma, safeguard the clerk id via auth, validate with Zod, and redirect on missing user while handling errors.

Configure the chassis toast component in the route layout, import the toaster, and use the toast hook to show a description in the create job form, enabling react query readiness.

Set up React Query and toaster in the app provider, create a query client with a five-minute stale time, and wrap pages with the query client provider and hydration boundary.

Build the create job form with react query mutation, toasts, and next router navigation to the jobs page. Invalidate queries to keep data fresh and reveal toasts on submission.

Set up the all jobs action to fetch database jobs filtered by clerk id, with optional search and status, on an admin route with permissions, prefetched on the server.

Build a get all jobs action with dynamic where clauses, pagination defaults, and prisma queries using search, status, and user id.

Set up jobs page structure by building search form, jobs list, job card, job info, and delete button components, add loading, wrap with react query, and prefetch jobs for hydration.

Set up the search form with a text input and a job status select, use form data to collect values, and prepare a submit handler without controlled inputs yet.

Submit the search form to navigate back to the jobs page with url query params, using url search params to set default inputs and feed the jobs list query.

pull jobs using react query, drive the query with use search params and a get all jobs action, then render a grid of job cards with pagination and loading states.

Explore how to install and import three shadcn-ui components: badge, separator, and cart, and assemble a job card with card, title, description, content, and footer for NextJS 14 projects.

Build a job card component that displays job details and provides edit and delete actions. Edit navigates to a single job page where the form updates the job.

Create a reusable job info component in Next.js app by passing icon and text props, format dates with a local date string, and render four instances in a responsive grid.

Implement delete job using Prisma to delete a job by id and user id, returning deleted job or null, and wire a delete button with mutation, toast, and query invalidation.

Learn to implement the EditJobForm component with a server-prefetched update job action, form validation via Zod, and react-query mutations that invalidate caches and navigate back to the jobs list.

Seed the database with 100 mock jobs using a JSON dataset, configuring fields like position, company, location, status, mode, and createdAt, then run a Prisma seed script.

Develop and explain get stats actions that fetch stats and chart data, formatting results for cards (pending, interview, decline) and charts using Prisma group by, underscore count, and default zeros.

Set up a get charts data action to fetch and format last six months of application data for charts, producing date and count pairs for per month visualization.

Build a stats page in Next.js by creating a stats container and charts container, prefetching stats with react query, and rendering stat cards for pending, interview, and client values.

Learn to build a charts component in NextJS 14 using the charts library, with a responsive bar chart showing date on the x-axis, count on the y-axis, and tooltip.

Implement pagination for the jobs list by showing ten items per page, using skip and take, counting pages, and rendering page buttons with query params while preserving search and status.

Create a complex button container for pagination in Next.js, rendering first, last, current, and one before and one after surrounding pages with dots, prev/next controls, and dynamic render logic.