Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS.
Codelab tools on GitHubAngularFire web codelab
1 hour 25 minutes
Updated February 26, 2025
In this codelab, you’ll learn how to use the Firebase platform on the web by building a chat app.
Serving AVIF Images
Updated February 24, 2025
Images account for more than 60% of the bytes on average needed to load a web page. Using AVIF you can make your images smaller and make your website load faster. AVIF is an image format derived from the AV1 video bitream. AVIF was built for
Create Your First 3D Map
40 minutes
Updated February 21, 2025
This codelab is intended to help you understand how to create your first 3D Map using Photorealistic 3D Maps in Maps JavaScript. You will learn the basics about loading the right components of the Maps Javascript API, displaying your first 3D Map and
Add markers and animation to a 3D Map
1 hour 37 minutes
Updated February 20, 2025
This tutorial explores how to add and style 3D markers in your application. You'll also learn how to animate your application by flying to and around specific locations. This tutorial builds on the concepts covered in the first codelab. If you
Work with Aggregation Service on AWS
Updated January 30, 2025
To perform this Codelab, a few prerequisites are required. Each requirement is marked accordingly whether it is required for "Local Testing" or "Aggregation Service". Local Testing will require the download of the Local Testing Tool. The tool will
Work with Aggregation Service on Google Cloud Platform (GCP)
Updated January 30, 2025
Estimated time to complete: 1-2 hours There are 2 modes for performing this codelab: Local Testing or Aggregation Service. The Local Testing mode requires a local machine and Chrome browser (no Google Cloud resource creation/usage). The Aggregation
Adding in-app purchases to your Flutter app
Updated January 23, 2025
In this codelab, you’ll add in-app purchases to a Flutter app that are verified and managed using a Dart backend service.
Cloud Firestore Web Codelab
52 minutes
Updated January 23, 2025
In this codelab, you’ll learn how to build a web app that uses Cloud Firestore.
Your first Flutter app
1 hour 25 minutes
Updated January 13, 2025
In this codelab, you’ll learn how to build a Flutter app that generates random, cool-sounding names.
Add a user authentication flow to a Flutter app using FirebaseUI
8 minutes
Updated January 6, 2025
In this codelab, you’ll learn how to add Firebase Authentication to a Flutter app with only a few lines of code.
Test B&A for Web end-to-end locally
45 minutes
Updated December 13, 2024
Bidding & Auction Services (B&A) is comprised of 4 services for buyers and sellers to facilitate a Protected Audience auction: Buyer stack: Seller stack: This codelab takes you through setting up and testing the end-to-end setup in your local
Validate Places API requests with Firebase AppCheck and reCAPTCHA
41 minutes
Updated December 10, 2024
In this codelab you’ll learn how to validate a Web application with Firebase AppCheck and reCAPTCHA before making requests to Places API
Google Pay API for Web 201: Advanced
22 minutes
Updated December 5, 2024
This codelab is a continuation of Google Pay API for Web 101: Basics and relies on code written in that codelab. In order to complete this codelab, be sure to complete that one first. This is a brief overview of the ButtonOptions. Consult the
Animations in Flutter
24 minutes
Updated December 3, 2024
In this codelab, you will learn how to use animations in Flutter. You will build a widget that animates both size and color, adds a 3D card flip effect, utilizes effects from the animations package and adds Android’s predictive back gesture support.
Live Agent Transfer
4 minutes
Updated November 14, 2024
In this codelab, you’ll learn how to manage in-conversation transfers between live agent representatives and bot representatives. At the end, you’ll have a basic web interface where you can view all ongoing conversations with your agent and join or leave any conversation as a live agent.
Google Pay API for Web 101: Basics
21 minutes
Updated November 13, 2024
At the completion of this codelab, you will have a minimum viable website with a working Google Pay integration. This project retrieves a payment token which may sent to a payment service provider for processing. A Google Pay payment request requires
Add a Google map to a React app
42 minutes
Updated November 8, 2024
In this codelab, you learn everything that you need to get started with the vis.gl/react-google-map library for the Google Maps JavaScript API, which lets you add a Google map to a React app. You learn how to get set up, load the Maps JavaScript API,
Get to know Firebase for Flutter
53 minutes
Updated November 1, 2024
Learn how to build a Flutter mobile app with Firebase.
Supercharge your web app by migrating to the modular Firebase JS SDK
32 minutes
Updated November 1, 2024
In this codelab, you’ll migrate an existing Firebase web app to the new modular Firebase JS SDK to tree shake code you don’t use and make the app load quickly.
Firebase Performance Monitoring for web
32 minutes
Updated November 1, 2024
In this codelab, you’ll set up Firebase Performance Monitoring in a web app and learn how to use it to make sure your app runs well for end users.
Send notifications for a web app using Cloud Messaging and Cloud Functions
1 hour 2 minutes
Updated November 1, 2024
In this codelab, you’ll learn how to use Cloud Functions for Firebase to send notifications to users of a chat app.
Get to know Firebase for web
52 minutes
Updated November 1, 2024
Build a web app from scratch with Firebase and the StackBlitz online editor. You’ll use basic HTML and JavaScript to talk to Firebase. This is a great introduction to using the Firebase console and integrating Firebase into an app. No extensive prior knowledge or software installations are needed.
Add sound and music to your Flutter game
42 minutes
Updated October 21, 2024
Learn how to add sound effects, background music, and dynamic audio to games with Flutter.
Using textembedding-gecko@003 for Vector Embeddings
7 minutes
Updated October 7, 2024
In this codelab, you’ll learn what is the model gecko@003 and a real use case for its application.
Building a web application with Angular and Firebase
Updated September 18, 2024
In this codelab we’ll build together a real-time web application with Firebase and Angular.
Explore new and upcoming browser capabilities for your PWA: From Fugu With Love
27 minutes
Updated September 18, 2024
Progressive Web Applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant
Query and Visualize Location Data in BigQuery with Google Maps Platform (JavaScript)
1 hour 55 minutes
Updated September 18, 2024
Maps can be a very powerful tool when visualizing the patterns in a dataset that are related to location in some way. This relation could be the name of a place, a specific latitude and longitude value, or the name of an area that has a specific
Build a full stack store locator with Google Maps Platform and Google Cloud
59 minutes
Updated September 18, 2024
Imagine you have many places to put on a map and you want users to be able to see where these places are and identify which place they want to visit. Common examples of this include: In this codelab, you will create a locator that draws from a live
Create a simple website that classifies images
41 minutes
Updated September 18, 2024
Learn how to create a simple website that classifies images with TensorFlow Serving.
Get started with Perspective API
17 minutes
Updated September 18, 2024
Learn how to build Perspective API.
Build a nearby business search service with Google Maps Platform (JavaScript)
1 hour
Updated September 18, 2024
Learn to build a location-based web app using the Maps JavaScript API and PLaces Library to perform a Nearby Search.
Train a comment-spam detection model with TensorFlow Lite Model Maker
18 minutes
Updated September 18, 2024
Learn how to train a comment-spam detection model with TensorFlow Lite Model Maker.
Create a custom text-classification model with TensorFlow Lite Model Maker
16 minutes
Updated September 18, 2024
Learn how to retrain the spam-detection model to detect specific types of spam with TensorFlow Lite Model Maker.
Building an image-slider element using Angular
2 hours
Updated September 18, 2024
In this codelab, you’ll build an image-slider,, which works independently of Angular framework, can be imported in any framework, and is very easy to integrate.
Progressive Web Apps: Going Offline
15 minutes
Updated September 18, 2024
In this lab, you'll take an existing web application and make it work offline. This is the first in a series of companion codelabs for the Progressive Web App workshop. There are seven more codelabs in this series. Start by either cloning or
Build a route planner with Place Autocomplete and Routes API
Updated September 18, 2024
Whether you are embarking on a road trip, planning your daily commute, or navigating a bustling city, getting from point A to point B is more than just knowing where you want to go. A reliable route generation tool is essential. With Google Maps
Add a map to your website (JavaScript)
42 minutes
Updated September 18, 2024
In this codelab, you learn everything you need to get started using Google Maps Platform for the web. You learn all the basics, from getting set up to loading the Maps JavaScript API, displaying your first map, working with markers and marker
Enable real-time communication with WebRTC
Updated September 18, 2024
Learn how to build an app to get video and take snapshots with your webcam, and share them peer-to-peer with WebRTC.
Secure your site with two-factor authentication with a security key (WebAuthn)
1 hour
Updated September 18, 2024
In this codelab, you’ll add second-factor authentication to your site or web app with a security key.
Progressive Web Apps: Working with Workbox
15 minutes
Updated September 18, 2024
In this lab, you'll take website with an existing service worker and convert it to using Workbox. This is the second in a series of companion codelabs for the Progressive Web App workshop. The previous codelab was Going Offline. There are six more
Adding Your Progressive Web App to Google Play
1 hour 30 minutes
Updated September 18, 2024
In this lab, you'll take an existing Progressive Web App that you have deployed and wrap it in an app for distribution in Google's Play store. Bubblewrap is a tool to make wrapping your Progressive Web App into an Android App Bundle as easy as
Create a Flutter app to classify texts
51 minutes
Updated September 18, 2024
Learn how to build a Flutter app that classifies texts and displays the results in its UI.
TensorFlow.js: Build a comment spam detection system
1 hour 14 minutes
Updated September 18, 2024
In this codelab, you’ll learn how to build a simple web page that has commenting ability akin to a blog post article and integrate it with a pre trained machine learning model to detect comment spam posts, enabling you to filter these out before they even get stored in any backend database, reducing server processing time and cost.
Build 3D map experiences with WebGL Overlay View
1 hour
Updated September 18, 2024
This codelab teaches you how to use the WebGL-powered features of the Maps JavaScript API to control and render on the vector map in three dimensions. This codelab assumes you have intermediate knowledge of JavaScript and the Maps JavaScript API. To
Build a simple store locator with Google Maps Platform (JavaScript)
49 minutes
Updated September 18, 2024
One of the most common features of a website is displaying a Google map that highlights one or more locations for a business, establishment, or some other entity with a physical presence. How these maps are implemented can vary greatly depending on
Visualize data with Google Maps Platform and deck.gl
Updated September 18, 2024
This codelab teaches you how to create a high-volume geospatial data visualization using the Maps JavaScript API and deck.gl, an open-source, WebGL-accelerated, data-visualization framework. If you haven't used Google Maps Platform before, follow
Build your first WebAuthn app
49 minutes
Updated September 18, 2024
Learn how to build a website with a simple reauthentication functionality that uses a fingerprint sensor.
TensorFlow.js: Retrain a comment spam detection model to handle edge cases
44 minutes
Updated September 18, 2024
In this codelab you’ll learn how to use Model Maker to retrain a comment spam model to account for edge cases the pre-trained model could not handle, and then re-deploy the new model to the web application.
Protect yourself from online harassment
24 minutes
Updated September 18, 2024
Learn how to secure your online information, identify phishing attacks, enable Advanced Protections for Google Accounts, and stay safe on social media.
Write a Flutter desktop application
45 minutes
Updated September 11, 2024
In this codelab, you’ll build a GitHub client in Flutter for desktop.
Adding WebView to your Flutter app
1 hour 5 minutes
Updated September 11, 2024
In this codelab, you’ll learn how to add the webview_flutter plugin to a Flutter app.
Build a 2D physics game with Flutter and Flame
32 minutes
Updated August 2, 2024
Learn how to craft game mechanics in Flutter and Flame games with Forge2D, a 2D physics engine.
Local development for your Flutter apps using the Firebase Emulator Suite
8 minutes
Updated May 20, 2024
Codelab outlining how to use the Firebase Emulator Suite during development with Flutter. The codelab will use the Auth and Firestore emulators to demonstrate emulator use.
Building an animated responsive app layout with Material 3
53 minutes
Updated May 13, 2024
In this codelab, you’ll gain experience with building an application with adaptive design that animates fluidly with Material 3 on all six platforms that Flutter supports.
Adaptive Apps in Flutter
1 hour
Updated May 13, 2024
In this codelab, you’ll construct a Flutter app that adapts to all six platforms that Flutter supports - Android, iOS, the web, Windows, macOS, and Linux.
Take your Flutter app from boring to beautiful
52 minutes
Updated May 13, 2024
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In this codelab, you start with a plain music app and (using Material 3) make it more beautiful and more responsive for all platforms.
Adding Google Maps to a Flutter app
30 minutes
Updated May 13, 2024
In this codelab, you’ll build a Google Maps experience using the Flutter mobile app SDK for crafting high-quality native experiences on iOS, Android and the web.
How to test a Flutter app
55 minutes
Updated May 13, 2024
In this codelab, you’ll build and test a simple Flutter app.
Building next generation UIs in Flutter
1 hour 15 minutes
Updated May 13, 2024
Learn how to build Flutter user interfaces with animations, shaders, and particle effects that work across all of Flutter’s six platforms.
Using FFI in a Flutter plugin
Updated May 12, 2024
In this codelab, you’ll build a Flutter plugin for both mobile and desktop platforms using FFI to make use of an existing native C library.
Introduction to Flame with Flutter
55 minutes
Updated May 12, 2024
In this codelab you will learn how to use Flame, a game engine built on top of Flutter. You will be introduced to Flame’s Components and effects, along with how to integrate Flame with Flutter’s state management.
Dive into Dart's patterns and records
39 minutes
Updated May 12, 2024
Use patterns, records, and other new features of Dart 3 to re-architect your UI design style in Flutter.
Adding a Home Screen widget to your Flutter App
35 minutes
Updated May 1, 2024
In this codelab, you’ll create a Home Screen widget for your iOS or Android Flutter app. You’ll start with a basic Flutter news app. You’ll then use native frameworks to create the UI for the widgets themselves. Finally, you’ll learn how to share resources and establish communication between your widgets and main app.
Build a word puzzle with Flutter
53 minutes
Updated April 29, 2024
Learn how to build a compute-intensive Flutter app and still maintain Flutter’s fluid interactivity.
Create an accessible and personalized theme and brand with Material Design 3
Updated April 16, 2024
Learn how to create a theme and brand that’s accessible and personalized with Material 3.
Design an Adaptive Layout with Material Design
4 minutes
Updated April 4, 2024
Learn how to use adaptive design principles in Material Design to achieve consistency across screen sizes. In this codelab, you take a mobile design to tablet format, and learn about the responsive grid, adaptive composition patterns, and the correct components.
MDC-101 Flutter: Material Components Basics
22 minutes
Updated March 6, 2024
Learn the basics of using Material Components by creating a login page for a simple Flutter app.
From Web Component to Lit Element
43 minutes
Updated January 11, 2024
In this codelab, you’ll learn about & build a Web Component from scratch and then progressively enhance it to a Lit Element.
Lit for React Developers
1 hour 32 minutes
Updated January 11, 2024
In this codelab, you’ll learn how to translate React concepts to Lit
Protect your Firestore data with Firebase Security Rules
58 minutes
Updated January 10, 2024
Learn how to protect your Firestore data with Security Rules
Local Development with the Firebase Emulator Suite
47 minutes
Updated January 10, 2024
Learn how to develop a web app with the Firebase Emulator Suite.
CEL-Go Codelab: Fast, safe, embedded expressions
1 hour 1 minute
Updated November 16, 2023
In this codelab, you’ll write expressions in the Common Expression Language, implemented in Go. You’ll create variables, use logical and/or operators, build json, build protos, and tune your expressions.
MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type
39 minutes
Updated November 14, 2023
Discover how the Material Flutter library makes it easy to differentiate your product and express your brand through design.
MDC-102 Flutter: Material Structure and Layout
22 minutes
Updated June 7, 2023
Learn how to use Material to create structure and layout a Flutter app.
MDC-104 Flutter: Material Advanced Components
28 minutes
Updated June 6, 2023
Improve your Flutter app’s design and implement an advanced backdrop menu component in Flutter.
Build more accessible Angular apps
47 minutes
Updated May 8, 2023
Learn how to follow accessibility best practices in your Angular apps with the toolset built into the framework.
Getting started with Angular Signals
19 minutes
Updated May 8, 2023
Introducing signals, a new reactivity model in Angular. Signals equip you with more high quality tools for fine-grained reactivity
Advanced Authentication features
29 minutes
Updated April 24, 2023
Learn how to implement multi-factor authentication and create custom auth requirements with blocking functions
Building Beautiful Transitions with Material Motion for Flutter
56 minutes
Updated April 20, 2023
Build Material’s motion system into the Reply app using transitions from the animations package.
TensorFlow.js: Retrain a comment spam detection model to handle edge cases
44 minutes
Updated February 21, 2023
In this codelab you’ll learn how to use Model Maker to retrain a comment spam model to account for edge cases the pre-trained model could not handle, and then re-deploy the new model to the web application.
Dataproc Serverless
37 minutes
Updated December 12, 2022
In this codelab, you’ll learn all about Dataproc Serverless, including how to get started and how to access its rich featureset.
Getting started with Standalone Components
Updated November 3, 2022
In this beginner-friendly codelab, you will learn how to build a sample application using Angular v14 Standalone Components
Create Spark ML models with Google Dataproc
31 minutes
Updated October 12, 2022
In this codelab, you’ll submit Spark ML jobs to Google’s Dataproc service.
Dataproc on Google Compute Engine
16 minutes
Updated October 7, 2022
In this codelab, you will learn about using Dataproc on Google Compute Engine (GCE).
Getting started with the Web Serial API
16 minutes
Updated September 20, 2022
In this codelab, you’ll build a web page that interacts with a BBC micro:bit board to show images on its 5x5 LED display. You’ll learn about the Web Serial API and how to use readable, writeable, and transform streams to communicate with serial devices through the browser.
Adding AdMob ads to a Flutter app
40 minutes
Updated August 27, 2022
In this codelab, you learn how to add a banner, interstitial and rewarded ads to a Flutter app.
Adding an AdMob banner and native inline ads to a Flutter app
39 minutes
Updated July 15, 2022
In this codelab, you’ll learn how to add AdMob inline ads (Banner and Native) to a flutter app.
Migrating to Variable fonts
29 minutes
Updated May 11, 2022
In this codelab, you’ll learn about variable fonts, their benefits, how to design with them, and how to implement them using the Google Fonts API and in CSS.
Designing with accessible colors
12 minutes
Updated May 11, 2022
In this codelab, you’ll learn how colors relate to accessibility, color contrast guidelines, and how the Material Theme Builder creates an accessible theme and can be used to easily check contrast.
Introduction to Angular
Updated May 9, 2022
In this beginner-friendly codelab, you’ll learn how to build web apps with Angular
Customizing Material color
30 minutes
Updated May 6, 2022
In this codelab, you’ll learn how to set up a color scheme using your brand colors for Material You.
Add instant navigation and seamless page transitions to a web app
44 minutes
Updated April 21, 2022
Learn how to add instant navigation and seamless page transitions to a web app with the latest APIs available in Google Chrome.
Use Procurement Document AI to Parse your Invoices using AI Platform Notebooks
7 minutes
Updated January 24, 2022
You will learn how to use Procurement DocAI to intelligently parse an invoice.
User authentication with Identity-Aware Proxy
35 minutes
Updated November 20, 2021
In this codelab you will create a web application, restrict access to only specified groups of users, use the authenticated user’s identity in the program
Visualizing dynamic color in your app
19 minutes
Updated October 27, 2021
In this codelab, you’ll learn more about dynamic color introduced with Material You.
Send Web events to GA4 using Measurement Protocol
11 minutes
Updated October 6, 2021
In this codelab You will learn how to send external events to GA4 using(WEB) Measurement Protocol.
Build Voice Bots for Android with Dialogflow Essentials & Flutter
1 hour 5 minutes
Updated October 5, 2021
Out of the box Dialogflow comes with lots of integrations, for web, Google Assistant, social media and phone gateways. However, when you want to bring your chatbots to mobile devices, you will have to create a custom integration. This lab will teach you how to integrate Dialogflow Essentials into a Flutter app.
Your first Keras model, with transfer learning
33 minutes
Updated October 4, 2021
In this lab, you will learn how to build a Keras classifier. Instead of trying to figure out the perfect combination of neural network layers to recognize flowers, we will first use a technique called transfer learning to adapt a powerful pre-trained model to our dataset. This lab includes the necessary theoretical explanations about neural networks and is a good starting point for developers learning about deep learning.
Make a smart webcam in JavaScript with a TensorFlow.js pre-trained Machine Learning model
52 minutes
Updated September 13, 2021
In this codelab, you’ll learn how to load and use one of the TensorFlow.js pre-trained models (COCO-SSD) and use it to recognize common objects it has been trained on.
Build an augmented reality (AR) app using the WebXR Device API
21 minutes
Updated August 16, 2021
Learn how to use augmented reality features with the WebXR Device API, and use scene understanding to place a 3D object positioned in the real world.
TensorFlow.js: Use Firebase Hosting to deploy and host a machine learning model at scale
55 minutes
Updated June 25, 2021
In this codelab, you’ll learn how to use the Firebase infrastructure to deploy an ML model so it can be used and consumed on your website using TensorFlow.js
TensorFlow.js: Convert a Python SavedModel to TensorFlow.js format
58 minutes
Updated June 25, 2021
In this codelab, you’ll learn how to take an existing Python ML model that is in the SavedModel format and convert it to the TensorFlow.js format so it can run in a web browser whilst also learning how to address common issues that may occur in conversions.