The complete Course to Build on-Device AI Applications

Build a complete e-commerce web portal using ai-driven development with separate components, api routes, cart functionality, and product details pages.

Develop a reusable card component to list news and help items, with tag and articles props, conditional see all link, and dynamic article indicators.

Clone the repository and implement a dynamic crypto search with coin selection, context state management, real-time data fetching, currency switching, and sorting in a responsive UI.

Design a responsive header with a search box, post button, message and notification icons, and a profile picture, plus a toggleable drop-down menu using css and media queries.

Build an interactive crypto data table with a custom filter and a market-cap based sort, plus a comprehensive pagination system in React, including CoinGecko attribution.

Explore building on-device AI apps by crafting a crypto market data dashboard with the Intel API, featuring market cap, fully diluted valuation, 24-hour high/low, supply metrics, sentiment, and social links.

Build a filter bar with a full-width input, currency and sort controls, wired to a crypto data context; implement a debounced search to query a crypto API and display results.

Explore a basic pagination flow with page state, total pages, and per-page controls, updating crypto data via context. Implement reset functionality to restore the first page.

Build a dynamic crypto chart component by fetching market data via API, converting Unix timestamps to readable dates, and rendering prices, market caps, and volumes responsively.

Build a data-driven crypto details and trending page user interface, using context providers to render coins, apply active styles, and integrate svg icons for social links.

Create a dynamic crypto details view by using useParams to read the coin id, fetch coin data, and navigate with useNavigate and stop propagation.

Build a responsive portfolio by using framer motion with stagger children, container variance, and viewport animations, then add a looping audio sound component for on-page music control.

Build a colorized, responsive price widget that shows current price and 24-hour change with green or red indicators and compact notation using the Intel API.

Develop dynamic user interfaces by building animated icons with rotation and hover pause, create a fireflies background with randomly positioned elements, and render a data-driven projects page with reusable components.

Build an AI-powered Twitter bio generator with a Next.js, TypeScript, and Tailwind CSS setup. Integrate the Vercel SDK and Grok models via shared UI components for a polished, data-driven interface.

Implement persistent local data storage for a crypto tracker by saving and removing coin IDs in local storage, building storage context, and wiring saved and detail views.

Build a dynamic form user interface using react-hook-form and sword for schema validation, with modular components for user input and output, grid layout, and a model selector.

Master transforming GLB models for web projects, render them in a react-three-fiber scene, and animate with use-frame, lights and environment presets, plus a circular, data-driven navigation UI.

Demonstrates building a responsive user interface by tracking window width with a screen size hook, handling resize events, and adjusting navigation layout across breakpoints, including a 480px breakpoint.

Build a to-do app with AI, customize colors, add and edit tasks, integrate a fake API with Next.js API handlers, and explore inline editing and code handoffs to GitHub.

Learn to build a responsive header and navigation with a hamburger menu, adjust padding, margins, and typography across breakpoints, and tailor dark mode colors using Tailwind config.

Create a responsive web design by resizing icons, adjusting height and padding across desktop, tablet, and mobile, applying SEO basics and anchor links to about us and contact us pages.

Explore differences in icon guidelines through hands-on Next.js UI construction, including a home and about page, hover effects, a light bulb icon, and animated numbers with Framer Motion.

Build a debounced, state-driven crypto search input to gather training data. Connect an input to a search api via context and render results with styling.

Learn to craft responsive, accessible web user interfaces by adjusting layouts, typography, colors, and components—from footers and inputs to blog pages—using breakpoints, padding, and dark mode considerations.

Learn to troubleshoot installation by configuring Tailwind typography with prose, customize blog elements, enable remark and rehype plugins, pretty code theming, and generate dynamic table of contents.

Prototyping with keynotes trains you to design responsive UI prototypes across breakpoints using tailwind-like classes, implement transition effects with framer motion, and optimize project pages for mobile and desktop.

Explain how to use a color context to sync material color and background with useContext and useEffect, and implement a loading screen and responsive scene with fov adjustments.

Tune the scene’s field of view and ambient light, enable orbit controls with zoom disabled, and implement color panels that update the background using RGB colors.

Create and style an about us page and team section with hover effects, color schemes, and global sections, then design a contact page with pattern overlays and gradients.

Refactor the crypto dashboard by introducing a trending context and a seven-coin trending page. Add a saved page using local storage and a saved button to manage favorite coins.

Explore the React context API to avoid prop drilling by wrapping components with a context provider and consuming data in nested components. Build and use multiple contexts such as user context and theme context to manage global state, fetch user data, and optimize renders with memoization.

Explore building an on-device 3d interface using react-three-fiber, gsap animations, and styled components, with custom fonts, svg assets, and global styles to render an interactive loading screen.

Design and update a Next.js app using the app directory, layout and page components, fonts, tailwind styles, and shared header across routes for a cohesive UI.

Learn to build and style interactive forms with a use form hook, add validation and submit handling, and set up dynamic blog routing and MDX content in a Next.js app.

Design responsive user interfaces using media queries, font size adjustments, and width changes across breakpoints, while debugging layout with outlines for small screens and optimizing rendering with three.js documentation.

Master building a blog layout with seo metadata, og images, and author data, including category, contact, and about pages, plus a responsive dark mode theme switcher using tailwind.

Build a crypto data dashboard that fetches coin information via a dynamic get crypto data function, updating on coin search and currency changes, including USD, INR, and CAD.

Develop a coffee-brand website by customizing fonts like lobster, using custom css and javascript, and adding video, animations, and a typing effect to create a unique online presence.

Develop a responsive user interface by adjusting typography, spacing, and borders across pages like about, contact, and categories. Configure next-sitemap and optimize images with Next.js for faster loading.

Learn advanced css and gsap techniques to center a processor image with a glow, and create scroll-triggered, color-changing sections and a fillable battery indicator.

Build a blog view counter with Supabase, implementing increment and fetch logic and integrating dynamic SEO metadata using Next.js app router.

Build an on-device image recognition UI by creating a responsive output component with loading states and a border beam, while integrating Vercel AI SDK and server actions.

learn how to create a wireframe by building interactive skill cards with framer motion hover effects, responsive positioning, and scroll-driven animations using use scroll and while in view.

Explore building a Next.js app with scalable icon components, and render markdown and mdx content using content layer, including configuring next.config.js, defining blog schemas, and frontmatter-driven content.

Deliver practical https data calls to CoinGecko and share crypto data across components with React context API, building a responsive crypto table with trending and saved pages.

Learn to adapt 3d scenes across devices by using gsap match media to conditionally set the camera FOV and animation, update projection matrix, and optimize mobile and desktop views.

The lecture demonstrates adding on-scroll animations to a 3D phone model in a React Three Fiber scene using GSAP timelines and scroll triggers.

Create responsive mockups with a two-column grid, featured article cards, and hover-activated previews using Framer Motion, links, images, dates, and read times.

Develop usable navigation by implementing dynamic routing, responsive layout, and animated social icons with scalable SVG components built in React and framer motion.

Learn to add tracking images and build scroll-driven, interactive UI for on-device AI apps, combining sticky layouts, SVG reveals, parallax images, video, and custom CSS animations.

Learn to extract headings with a regular expression, capture flag and content with named groups, and generate slugs using GitHub slugger to build a table of contents and category navigation.

Build a landing page website with multiple blog layouts, header and footer, responsive grid, and interactive overlays using React, Next.js, and Tailwind CSS.

Learn to implement a reusable use theme switcher hook for dark and light modes with a prefer-color-scheme media query, local storage, Tailwind dark mode, and Next.js script to prevent flash.

learn to implement a storage context that uses local storage to persist and manage a coins list, with save, remove, and UI synchronization across components.

Learn to build immersive on-device AI interfaces with scroll-driven animations using layout effect, triggers, and scrubbable transitions, delivering synchronized text and design sections like immersive display and fastest processor.

Master parsing json results from the CoinGecko API by fetching crypto data, storing in state, and rendering a formatted crypto table with dynamic prices and market data.

Build a functional contact form in a Next.js app using React Hook Form, capturing name, email, phone, and project details, with a send request button.

Set up a full-screen 3d hero with react-three-fiber and three.js, render a gltf model with ambient and directional lighting and an environment, and pin the code section with gsap scrolltrigger.

Master tools for designing app submission visuals, including responsive layouts, image adjustments, alt text for SEO, repeaters, and hover and parallax animations.

Learn to load and customize a 3d model by importing texture and scene files, selecting the body material, and changing its color using gltf.

Learn how to deploy designed apps into production by statically generating Next.js routes, building category and blog pages with clean slugs, and crafting responsive layouts for fast, scalable web experiences.

Learn to implement smooth scrolling and parallax effects in a Next.js project using React Lens, GSAP ScrollTrigger, and a lightweight smooth scroll component, including image lists and anchor navigation.

Source and integrate assets via the media manager, browse free images from Unsplash and Shutterstock, replace icons with a home symbol, and customize typography, colors, and layout.

Discover how to build a Wix site from blank canvas, configure color palettes, logos, typography, and media, and create service and project sections with grids, padding, and hover interactions.

Build an interactive pagination system for on-device AI apps, with next/previous controls, multi-step paging, per-page options, and a reset to fetch crypto data from an API.

Configure a dynamic CMS-driven page layout by adding anchors, menus, and a dynamic project page, connect CMS data, import items from CSV, and customize footers and styling with CSS.

Master scroll-triggered animations with gsap by updating text and background colors using onstart params, RGBa opacity, and multiple color steps across elements for dynamic visual effects.

Update the user interface by formatting currency values and refining tooltips, and switch the chart between price, market cap, and total volume for 7, 14, and 30 days.

Implement pagination of update records by using saved data from the storage context, wiring get saved data calls, and adding loading indicators and routing for coin details.

Explore ai powered components by building a model selection interface with a select element, configuring grok models like llama 70 billion, llama 8 billion, and gamma, and outputting json.