Build Full-Stack AI-Powered Apps

Explore what language models can do in real-world apps, and apply tokens, cost model selection, and key settings that shape behavior. Develop a solid mental model for why they work.

Learn how AI engineers use pre-trained models and LLMs to build smarter AI-powered apps. See real-world examples like summarization, translation, intelligent search, automation, and personalized UX.

Learn how large language models integrate into full-stack apps as a supporting system that processes prompts and delivers responses. Use cases include summarization, content generation, translation, classification, extraction, and chatbots.

Learn how to integrate language models into full-stack apps—from prompts to useful responses—and apply the text-in, text-out pattern to tasks like summarization, content generation, classification, translation, and chatbots.

Learn how tokens shape prompt processing, cost, and context windows in language models, and choose the right model for your app by balancing token counts, limits, and needs.

Learn to count tokens in code with the tick-token library using CL100K encoding, mapping token IDs to tokens, and set package.json type to module for ES module imports.

Choose a model by applying clear criteria: balance smartness, speed, input/output modalities, cost, and context window. Compare models, assess privacy and multimodal capabilities, and consider open-source, self-hosted options.

Learn how to configure language model behavior, from selecting GPT 4.1 and text formats to tuning temperature, max tokens, and top p, using the playground and logs.

Learn to call models in code by creating an OpenAI API key, installing the library, wiring a client, and streaming responses while noting that keys should reside in environment variables.

Set up a clean, modern full-stack project from scratch with vite and express, avoiding templates and Next.js, then add tailwind styling, UI components, prettier formatting, and Husky automation.

Install bun to streamline full-stack ai-powered app development, since bun serves as a runtime, a package manager, a task runner, and a TypeScript transpiler with out-of-the-box TypeScript support.

Create a full-stack project structure using bun workspaces by setting up a packages directory with client and server, and initializing bun, git, package.json, and tsconfig.

Set up a backend server by creating a server directory, installing express and express types, and building a basic index.ts route with bun start and bun run dev scripts.

Learn to securely manage the OpenAI API key by using environment variables, dotenv, and a .env file, avoiding hard-coded keys and exposing them in Git.

Create the frontend with vite in the current directory, using two terminals for server and client, select react with TypeScript, install with bun, run bun run dev, and commit.

Create a new /api/hello endpoint returning a json message, then proxy frontend requests to the backend and fetch the message in the client, connecting frontend and backend.

Use concurrently to start both server and client from one command, configuring index.ts and package.json to run from their directories with cyan and green prefixes.

Style the app with Tailwind CSS, a utility-first framework, using in-markup classes while keeping styling minimal. Set up Tailwind via Veet, install libraries, configure the plugin, and import Tailwind CSS.

Set up shadcn ui with tailwind, configure tsconfig and vite, install components via the shadcn cli, add a customizable button, and integrate with your app to speed UI development.

Set up Prettier, configure rules in a .prettierrc file, and apply single quotes, semicolons, and trailing commas (ES5); format code in VS Code and enable format on save.

Automate pre-commit checks with Husky and lint-staged to format only staged files, ensure code quality, and streamline git commits for full-stack ai apps.

Build a chatbot from scratch, starting with a textbox, a send button, and a message list while tackling UX details, state management challenges, and edge cases.

Build a production-ready backend for a chatbot by creating an api that receives messages and returns a response from an artificial intelligence model, then add input validation and error handling.

Build a chat API endpoint that accepts user prompts via POST /api/chat using the OpenAI client, JSON middleware, and the GPT four mini model with an API key.

Test your api endpoint with the postman extension by sending a post to http://localhost:3000/api/chat with a json prompt, and receive a 200 response revealing the capital of France.

Demonstrates adding memory to a chatbot by tracking last response ids, first with a global variable, then with a conversations map keyed by conversation IDs to preserve history.

Define and validate incoming request data with Zot, enforcing a prompt string of 1 to 1000 characters and a valid GID or Uuid, then parse and return errors when needed.

Implement try-catch error handling in your API route to return a 500 internal server error with a clear JSON error message.

Refactor the chat api to separate concerns into controllers, services, and repositories, improving maintainability and scalability while preserving functionality and clarifying data handling and OpenAI calls.

Build a conversation repository within a layered architecture, exposing a public interface to get and set the last response id and keeping storage implementation private.

Implement a dedicated chat service that encapsulates LLM interactions and isolates HTTP concerns from the business logic. Expose a platform-agnostic chat response via a clean send message interface for controllers.

Extract the route logic into a chat controller that validates requests, calls the chat service, and returns responses via a clean public interface while hiding internal details.

Move route definitions from index.ts to a dedicated routes module, use a router for modular endpoints, and adopt a controller-service-repository structure to support a chat API with LLM.

Move from backend to frontend and build a fully functioning chatbot step by step, then refactor and organize the code to keep it clean and modular.

Use a flex layout to stack a bordered, rounded container housing a borderless text area and a round button, with a placeholder 'ask anything' and max length 1000.

Learn to handle form submission with react hook form, register inputs, validate data, manage form state, and submit via onSubmit and enter key handling while preventing default behavior.

Learn to post data to a server with Axios, including a one-time conversation ID stored in a ref and sending prompt and conversation ID in a post request.

Render messages by declaring a state string array, initialize as empty, and append prompts and server replies using functional updates; map messages to paragraphs and render with unique keys.

Style a chat interface by rendering user prompts on the right with blue background and bot responses on the left with gray, using a message array with content and role.

Render markdown in bot messages using the react-markdown library, enabling bold text, lists, and more, and adjust max output tokens to ensure complete responses.

Add a typing indicator by toggling the bot typing state while awaiting a response, rendering three animated dots. Apply staggered delays to create a cascading effect and improve chat interactivity.

Learn to auto-scroll the chat to the latest message by using a form reference, the use effect hook, and smooth scrolling so new content stays in view.

Fix the chatbot copy behavior by copying only trimmed text to the clipboard via oncopy and getSelection, then use clipboardData.setData('text/plain', trimmedText) and refactor into a separate function.

Improve the chatbot look and feel by pushing the input form to the bottom and making the chat container flexible with a growing message area.

Add robust error handling to your chat app by wrapping server calls in a try-catch, logging errors, rendering user-friendly messages, and resetting the error state for retries.

Refactor the chat app into modular components to improve separation of concerns and single responsibility, creating chat input, chat messages, and typing indicator components.

Extract the typing indicator component and create a reusable dot to reduce duplication, while modularizing the chat UI with a dedicated directory and animation-delay props.

Learn to extract a chat messages component in a full-stack AI app, defining message types, wiring props, and implementing message copying and auto-scroll with modular, single-responsibility design.

Extract the input form into a separate chat input component, refactor to move the reset logic and notify the parent via an Onsubmit prop, and discuss where API calls belong.

Modularize the chatbot with single-responsibility modules and a private internal logic, use abstraction to keep a clean public interface, and prepare for prompt engineering to answer real-world questions.

Explore prompt engineering as the essential skill for guiding language models with clear, structured prompts to produce useful results in ai-powered apps.

Explore the anatomy of a good prompt by combining an instruction, context, and a defined output format to guide tone, roles, and even return formats like JSON.

Provide context by assigning roles, supplying background information, and guiding the audience to tailor the chatbot's responses, turning a generic assistant into a fast, accurate, voice aligned information source.

Learn to control the model's output format for full-stack AI-powered apps, choosing plain text, markdown, or JSON, and manage length and cost for reliable, integrated responses.

Explore zero shot, one shot, and few shot prompting strategies for structured outputs like JSON, emphasizing clear instructions, high quality examples, and addressing edge cases.

Handle errors and edge cases in prompts by returning error objects for missing or invalid input, asking clarifying questions for vagueness, and testing with empty strings and gibberish.

Reduce hallucinations in language models by grounding prompts with facts and setting boundaries. Learn to say 'I don't know' when unsure and validate outputs with human review.

Iteratively build and refine a Wonder World theme park prompt in OpenAI's playground, then bring it into the application to enhance the chatbot.

Integrate a structured prompt into your app to improve the chatbot, loading Wonder World content from markdown via a template, and constrain responses to Wonder World in a cheerful tone.

Add subtle sound effects to your AI chat app by importing pop and notification mp3s, creating audio objects, and playing them on message send and bot response with controlled volume.

Build a full-stack ai-powered app by creating a product review summarizer that generates and caches a summary from reviews, retrieves it from the database, and covers database basics.

Set up a full-stack application database from scratch and populate it with realistic data. Enable meaningful progress as you build the rest of your app.

Set up a MySQL database to store products, reviews, and summaries for a full-stack AI-powered app, install MySQL, create the root password, verify installation, then configure Prisma.

Connect your app to a local MySQL database with prisma, the object-relational mapping tool, and initialize prisma via the command-line interface to configure a localhost:3306/review_summarizer as the database url.

Define the prisma schema for products, reviews, and summaries, including id and generated at. Establish product-review and product-summary relations with references, unique constraints, and expires at.

Create the initial database with Prisma Migrate dev from the defined model, producing an init migration for product, review, and summary tables in MySQL. Inspect generated migrations and table schemas.

Refine Prisma schema by renaming tables with map attribute, adjusting column types with db attribute to varchar sizes and text, using tinyint for rating, applying migrations, and preparing sample data.

Populate the database with realistic test data by generating a MySQL SQL script for the products and reviews tables using ChatGPT and the Prisma schema.

Build the backend for your full-stack ai-powered apps by creating endpoints to fetch and summarize reviews, then refactor code to improve cleanliness and maintainability.

Create an api endpoint to fetch product reviews using prisma, read id from the url, fetch reviews with findMany ordered by createdAt, validate id, and return 400 on invalid input.

Refactor the app by modularizing into controllers, services, and repositories, introducing a review controller and review service, and moving data access to a dedicated repository to enforce separation of concerns.

Create a new post endpoint to summarize product reviews, implement a review controller and service to fetch the last ten reviews, join them, and return a placeholder summary for testing.

Fetch and join the latest reviews, summarize into a short paragraph highlighting key themes, both positive and negative, using a dynamic prompt with an OpenAI client.

Refactor the codebase by extracting llm logic into a single, provider-agnostic module to enable easy provider switching. Create a clean generate text interface with model, temperature, and max tokens options.

Refactor the prompt into a dedicated file using a template with a reviews placeholder, implement and test the summarize reviews flow, then prepare to store the summary in the database.

Store the summary in the database using Prisma upsert to cache it, avoiding generation on every API call, with an expires at window and regeneration when outdated.

Learn to implement regeneration handling by checking existing review summaries with get review summary using product id, returning cached content if not expired, or regenerating when expired.

Handle edge cases by validating numeric product ids, verifying the product exists via a repository using Prisma, and returning 400 errors for invalid ids or missing reviews.

Enhance the reviews endpoint to return both reviews and a non-expired summary in a single request, using a repository-driven approach and restful 404 checks.

Build the frontend to display reviews and summaries with a clean, responsive interface, and refactor the code to improve organization and maintainability.

Fetch product reviews from the API and render them in a reviews component using the product id, Axios, and useEffect, displaying author, rating, and content.

Display star ratings with a React star rating component using Font Awesome icons, rendering full and empty stars from a 0–5 value in a flex container with yellow stars.

Display loading skeletons for reviews using the React loading skeleton library, manage loading state with useState, and render skeletons for author, rating, and content while fetching.

Simulate backend failures, wrap fetch logic in a try/catch, log errors (console or sentry), display could not fetch their reviews. Try again, and reset loading state in a finally block.

Learn how to replace manual fetch logic with TanStack Query to enable automatic retries, built-in caching, and per-product-id caching, while fetching product reviews with useQuery.

Display the summary above product reviews, or render a summarize button when no summary exists, using conditional rendering and a sparkles icon to indicate generation.

Click the summarize button to call the backend API via Axios post to /api/products/{productId}/reviews/summarize, and update the UI with the returned summary.

Declare a loading state, show a loading skeleton during the summary API call, and disable the button while loading to replace it with the final summary.

Learn to implement error handling in the review list component by adding an error state, wrapping summarize in a try-catch, logging errors, and displaying a red error message.

Refactor data mutations with the mutation hook in react query to replace local state and try/catch logic, enabling automatic retries and cleaner backend calls for summarizing reviews.

Refactor the app by removing destructuring of mutation and query hooks, use summary mutation data and mutate, and replace loading and error checks with a skeleton loader.

Refactor the reviews feature by extracting backend calls into a dedicated API module called reviews API. Implement fetch reviews and summarize reviews, promoting single responsibility and cleaner components.

Explore open source models, learn why and how to find them. Run them locally with tools like llama, then integrate them to power AI features without hosted services.

Open-source models reduce cost, protect privacy, and provide flexibility beyond hosted options like OpenAI or Anthropic, with local deployment, offline access, small language models, and transparency.

Explore Hugging Face as the go-to hub for open-source models and datasets, filter by tasks like summarization, view model cards, and run examples.

Learn to call hugging face models by creating access tokens, using the inference endpoint, and summarizing text with the facebook/bart-language-cnn model, within the free tier.

Choose the right model for the job by comparing fine-tuned product-review models with a general-purpose open-source alternative, and implement via Hugging Face and chat completion to summarize customer reviews.

Explore running models locally with llama and Olama to ensure privacy, using a terminal workflow to pull, list, run, and remove models, including Hugging Face compatibility.

Enable llama in local apps, filter by gif format, and run the terminal command to load a 2-GB model from hugging face with 3-GB RAM.

Call Llama models from your app with the official JavaScript client, run Tiny Llama locally, and use a wrapper around the local server to summarize inputs without leaving your machine.

Reflect on building real ai-powered apps: from a theme park chatbot and a feedback summarizer to running Llama locally, using clean architecture and a solid full-stack workflow.