Learn Astro, Flutter and React-native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Use Expo Orbit to install past builds from EAS as well as from your local machine.

You can also use Orbit to easily view and launch all your connected simulators, emulators and physical devices.

🔗 [Expo Orbit](https://docs.expo.dev/build/orbit/)

Use Expo Orbit to Install Past Builds

Reconfigure your eas.json and app.json so you can install the development, preview and production builds all on the same device.

An app on your phone is uniquely identified by the bundle identifier on iOS and the package on Android, so to make the builds unique we have to make these IDs different based on the build profile.

📖 [Docs](https://docs.expo.dev/build-reference/variants/)

Install Multiple Variants of Your iOS and Android Apps on the Same Device

Set up credentials to upload your Android build to Google Play automatically.

For automatic uploads, you'll need to set up all the app metadata on your Google Play account, including setting up app assets. You'll also need to configure and set up a Google Service Account.

📝 [Create a Google Service Account](https://github.com/expo/fyi/blob/main/creating-google-service-account.md) 
📝 [Store Assets](https://docs.expo.dev/guides/store-assets/)
📝 [EAS Submit Docs](https://docs.expo.dev/submit/introduction/)

Upload an Android App to the Google Play Store Automatically using Expo Publish

Set the build number to increment automatically and learn when to increment version numbers.

While you’re developing your app, when you submit an app with a specific version + version code to the App or Play Store, you cannot submit another app with the same values.

The best practice is to set the build number to increment automatically.

The version number can be incremented manually after each store release.

📖 [Docs](https://docs.expo.dev/build-reference/app-versions/)

Increment Version and Build Numbers for iOS and Android apps using EAS

Create the app on the Google Play Store, create the first production build on EAS, upload it to Google Play, and publish it to an internal testing group.

For sharing apps via Google Play, you will need a paid Google Play developer account. It is preferable to have an organisation account if you're looking to monetise your app (you'll need to verify your organisation before you can create apps). But if you you are building apps as an individual developer, you can use the individual developer account. 

When creating an individual developer account, you have some additional restrictions:
1. You must submit proof of ID and home address to create the account
2. If you want to monetise your apps, your home address will be shown on the Google Play developer page
3. You will need 20 testers to test your app for 14 days before you can apply for production access

🎮 [Google Play Console](https://play.google.com/console)

🔗  [Register for a Google Play Developer account](https://support.google.com/googleplay/android-developer/answer/6112435)

🔗 [Required information to create a Play Console developer account](https://support.google.com/googleplay/android-developer/answer/13628312?hl=en-GB)

🔗 [QR Code Generator](https://www.qr-code-generator.com/)


Create an Android Release Build with EAS and Upload to Google Play Store

Create an Internal Distribution (Preview) build for sharing your app in internally in production mode.

This can be used to share your build with your team or testers without submitting it to Google Play.

📝 [Docs](https://docs.expo.dev/build/internal-distribution/)

Create an Internal Distribution Build for Android with EAS

Create a Development Build that runs on Android Emulator or Device.

This build can be used for local development on Android. You can use the same apk (the build artifact) on both an Emulator (that you can install via Android Studio) or on a real android device.

🔗 [Expo Website](https://expo.dev/)

📝 [Docs](https://docs.expo.dev/build/introduction/)

🔗 [Android Studio](https://developer.android.com/studio)

Create a Development Build for Android with EAS

Submit your Production Build to the Apple App Store and install it via TestFlight.

When submitting a build to Apple with EAS Submit (or otherwise), it will first get added to TestFlight which is essentially a pre-prod environment for Apple. This will allow you to install and share the actual production build to testers before releasing it to users.

App names on the Apple App Store must be globally unique. So if you've chosen a name for your app that is already taken - like Plants - you will have to choose a different name for the App Store Listing page. Note that this is only the case for the app name on the App Store listing page, and you can still use your preferred name elsewhere.

**TestFlight Internal Testing** - as soon as you upload your build to App Store Connect and it finished processing, it is available for internal testing. You can add users to the internal testing group by email, and the users must be registered on your Apple Developer account.

**TestFlight External Testing** - this is a separate testing group that allows you to share the build with anyone either by sending them an email invite or using an invite URL. Before you can share the build, you must first submit a build for external testing and wait for it to be approved by Apple, which usually takes a couple of hours.

**Release** - in order for the build to actually show up on the Apple App Store, you will need to create a Release on App Store connect and submit it for review. This review usually takes about a day.

🔗 [TestFlight](https://developer.apple.com/testflight/)

📝 [EAS Submit Docs](https://docs.expo.dev/submit/introduction/)

📝 [App Store Assets Docs](https://docs.expo.dev/guides/store-assets/)

Submit an iOS App to the Apple App Store and TestFlight using EAS

Create an iOS Release build for distribution.

This build gets submitted to the Apple and can only be installed via TestFlight or the App Store.

Create an iOS Release Build for the Apple App Store with EAS

Create an Internal Distribution (Preview) build for sharing your app in internally in production mode.

This is the only way to share your iPhone app without submitting it to TestFlight and is often used for QA testing or internal demos.

📝 [Docs](https://docs.expo.dev/build/internal-distribution/)

Create an Internal Distribution Build for iPhone with EAS

Create a build to run on your physical iPhone device that can also be used for local development.

📝 [Enabling Developer Mode](https://docs.expo.dev/guides/ios-developer-mode/)

📖 Further reading: [Push Notifications Docs](https://docs.expo.dev/push-notifications/overview/)

Create a Development Build for iPhone With EAS

Set up a Distribution certificate and an Ad Hoc provisioning profile for iOS internal distribution builds.

Here we learn how to sign Apple app builds to make them installable on Apple devices.

In order to install your own app on any Apple device, you need an Apple Developer account and a subscription to the Apple Developer Program.

🔗 [Apple Developer Program](https://developer.apple.com/programs/)

⚙️ [Code Signing Illustration](https://www.linkedin.com/posts/kadi-kraman_an-illustration-of-what-code-signing-with-activity-7132420058076581888-s6TM)

Use the EAS CLI to Configure App Store Credentials for Internal Distribution Builds

Create an iOS build for developing locally on a Simulator.

This is the only native iOS build you can do on EAS without having an Apple Developer account and being enrolled in the Apple Developer Program.

It can be used for local development on an iOS simulator, so you can only do this on a Mac, because you must be able to install Xcode to get access to the iOS simulators.

⚙️ [Xcode](https://apps.apple.com/us/app/xcode/id497799835)

🔗 [Expo Website](https://expo.dev/)

📝 [Docs](https://docs.expo.dev/build/introduction/)

Create a Development Build for iOS Simulator with EAS

Set up an existing Expo Go project to use Development Builds.

Expo Go is a Sandbox Environment designed for learning prototyping and getting started with mobile development quickly. The major limitation of Expo Go is that you are completely unable to add or edit any native code in your app. This might be a trivial limitation at the start of your project when you're prototyping and experimenting, but most production quality apps will eventually need to have more control over their native app bundles.

This is where development builds come in. A development build is basically your own customised version of Expo Go: you build the native side of your app yourself and get to have all the control over what libraries and configurations are included.

Thanks to CNG (with prebuild) the native projects are generated automatically based off of your app config and package.json.

📝 [Expo Go](https://docs.expo.dev/get-started/expo-go/)

📝 [Development Builds](https://docs.expo.dev/develop/development-builds/introduction/)

📝 [Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/)

Set Up Your Expo Go Project to Use Development Builds

Create a new React Native project using the Expo CLI.

You can use any of the supported package managers: **npm**, **yarn**, **pnpm** or **bun**. In the video (and throughout the course) we use **yarn**.

You can also choose a template to use for your project. In this video we choose the blank TypeScript template, but you can choose a different template if you prefer.

📝 [Docs](https://docs.expo.dev/get-started/installation/)

Create a React Native App With Expo CLI

Expo Application Services ([EAS](https://expo.dev/eas)) is a cloud build service used to build and publish React Native apps.

This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

Additionally, you'll learn about:
- app versioning
- automatic store uploads
- setting up store listing pages
- installing multiple app variants on the same device
- installing past builds with [Expo Orbit](https://docs.expo.dev/build/orbit/)

## iOS

An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

How to create:
- an iOS simulator build
- a build to use on your device for local development
- a build to share with your team without uploading it to App Store Connect
- a release build to use on the App Store

You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

## Android

How to create:
- a build to use for development on an emulator or a device
- a build to share with your team without uploading it to Google Play
- a release build to use ob Google Play

We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

You will also learn how to set up auto-submit on Google Play.

Build and Deploy React Native Apps with Expo EAS

Astro is a flexible web framework that allows you to build fast websites to suit your needs.

By default, Astro will build your site using Static Site Generation (SSG). This means the data in your site is loaded at build time so that the end-user gets served static pages that load quickly.

While Astro defaults this way, it also has Server-Side Rendering (SSR) that you can enable if you have more serverful needs in your application.

Along similar lines, Astro utilizes HTML and the browser as a default but when you need more flexibility you can opt into an Astro Island. Islands use React, Vue, Angular, or any frontend JavaScript framework you are used to enhance the user experience in your site.

astro

Og images are important for any blog or website. They are the share image that is shown when you include a url to your site on social media.

Astro makes it easy to include og images within its SEO package but making these images dynamic takes a little more set up.

In this lesson we'll set up an Astro API route returns a link to a dynamic image utilizing `satori` and `@resvg/resvg-js` to do so.

The was we set it up, we'll create different templates that the API endpoint will accept and each template can render different end points so you could have a default template, one for your blog posts, and possibly another for your about page.

During this process, you'll learn how to pass data from the client to the server through URL Search Params which will power the dynamic portion of the image generation

Implement Dynamic OG Image Generation with Astro API Routes and Satori

Now that we have our database set up, we need to use it!

On our blog post page, we have a likes button waiting for us to implement the likes feature. On page load, we'll make a fetch call to a `/api/likes/[slug].ts` GET end point to return the number of likes for the page. 

Similarly, when someone clicks the like button we want to send a POST request to that same endpoint.

On the server side we will set up `GET` and `POST` handlers to implement this functionality. In those functions we'll use Drizzle to return the likes for that blog post and in the case of a `POST` we'll create a record if it doesn't exist or increment a like if it does and return.

Astro API endpoints utilize browser `Response` API so you'll get a chance to handle returning different status's based on the data present.

Create Astro API Endpoints to Get and Update Database Records using Drizzle ORM

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

By default Astro is building our site as statically generated (SSG). Because we want to add some runtime features to our blog and interface with a database in the future we need to convert it to be server-side rendered (SSR). 

Astro has integrations for this, because we know we want to deploy to Fly.io via docker we'll use the Node.js integration and set the output to 'hybrid'. Hybrid, as opposed to 'server', will still statically generate the pages of our blog that are static but give us the option of SSR when we need it.

In this lesson we'll refactor our build to using docker and deploy to Fly.io

Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.io

One of the beauties of Astro is that you don't need to use a JavaScript UI library. Astro lets you us plain JavaScript when you want to. 

It's a good idea to get into the habit of starting with vanilla JS when you have a simple use-case like adding a like button. This will mean less JavaScript on the page for your user than if you were to implement this in React. 

We'll refactor our React like button and turn it into vanilla JS with the result for the user. Another added benefit of this approach is you'll get more familiar with the native browser API which will pay dividends for you in the future.

Refactor a React Astro Island to Vanilla JS to Ship Less JavaScript

Everything up to this point Astro builds statically which means there is no JavaScript loaded on any of our pages. It's all loaded during build time and served as static files on the web

When we do want to add some interactivity into our site we can use Astro Islands to leverage JavaScript on our pages.

Astro islands are interactive components that Astro treats differently than the rest. Instead of just executing them during build time and saving the output, Astro will also hydrate the components at a specific point and ship the JavaScript needed for the component to be interactive. 

To use a UI framework, we need to add its integration, so we did `npx astro add react` to add the react integration.

Then we will create an ordinary react component, just as we would in a react page, and import it and place it in a page. To mark that component as an island, we use a `client` directive. The client load directive hydrates the component during the initial page load.

The `client` directive has several different loading strategies you can use based on your usecase:

- `client:load`
- `client:idle`
- `client:visible`
- `client:media`
- `client:only`



Add Interactive React Components to a Static Astro Page with Astro Islands

You will learn how to create and manage complex, nested schemas using a real world example (room bookings with guest details) used throughout all lessons. All created schemas are tested against potential bugs and we verify error messages.

The course covers topics such as:

- Utilizing Zod's shape and unwrap features to perform partial validations without losing the overall schema structure.
- Managing optional, nullable and nullish properties.
- Implementing unions and intersections to handle different types of data.
- Ensuring type safety with sets and maps, including custom validation logic for primitive values.
- Creating custom error messages for improved user feedback.

Get a solid understanding of how to leverage Zod to enhance runtime data validation in JavaScript/TypeScript applications 🔥

Tomasz Ducin

Advanced Type Checks with Zod

Get a solid understanding of how to leverage Zod to enhance runtime data validation in JavaScript or TypeScript applications

Get started with MongoDB and Docker really quick 🔥 even if you have no backend/fullstack experience.

This lesson guides you through installing Docker Desktop and setting up a MongoDB image.

We explain Docker images and containers, and their roles in providing isolated software environments.

We run a MongoDB image in 2 ways: using the terminal and Docker Desktop

We demonstrates configuring port settings for a container and accessing the MongoDB shell (`mongosh`) to interact with the database.

We learn how to manage Docker containers, configure settings, and run commands inside the container.

Grab the CLI command: 🔥 `docker run --name some-mongo -d mongo:latest` 🔥

Install Docker to run local MongoDB Container

Learn to install Docker Desktop, set up a MongoDB image, and manage containers. Configure ports and access the Mongo shell

[https://github.com/johnlindquist/mcp-cursor-tool-starter/tree/main](https://github.com/johnlindquist/mcp-cursor-tool-starter/tree/main)

Cursor's AI is powerful, but it can't do everything. What if you could give it the ability to interact with your specific workflows, tools, and data? This lesson shows you how to do exactly that by building a custom MCP tool – and we'll do it in under two minutes!

We'll leverage the Model Context Protocol (MCP), an open standard that bridges the gap between AI agents (like Cursor's Composer) and your custom code. By creating an MCP tool, you're essentially giving Cursor a new skill.

Here's the breakdown:

Understanding MCP: We'll briefly cover what the Model Context Protocol (MCP) is and why it's the key to extending Cursor's functionality. In short, it enables communication between the AI and your tools in a standardized way.

Fast Track Setup: We'll use a ready-made starter project (a single TypeScript file and package.json) to skip the boilerplate and get straight to the core concepts.

Step-by-Step Integration: We'll walk through the simple process of:

Cloning the starter project.

Installing dependencies with pnpm install.

Running the starter server.

Adding the tool to Cursor's MCP settings (under Features > MCP).

Verifying that your tool is working

Real-World Example: We'll demonstrate the tool in action, using Cursor's Composer to create a new GitHub issue using the gh CLI, all driven by our custom MCP tool.

This lesson is about more than just building one tool; it's about understanding how to extend Cursor's capabilities to fit your unique development needs. You'll learn the foundational steps to create a whole ecosystem of AI-powered tools.

Build Your First MCP Tool in Cursor in Just 2 Minutes

Displaying data in tables has been notoriously hard to implement. Naive implementations of data tables will leave your app slow and janky and many table libraries out there are restricted to a few select UI frameworks they use or aren't very customizable.

Tanstack Table is a 'headless' option meaning you have complete control of the presentation while taking advantage of the data side of the equation.

You'll be able to fetch and display remote data, handle pagination, and implement row virtualization for better performance.

Once you've implemented basic functionality you can take your tables to the next level customizing cells with your own JSX components, adding features like toggling column visibility, and ensuring your table is mobile-friendly with CSS pseudo-elements.

By the end, you'll have the skills to create efficient, user-friendly tables that elevate your applications. You can take what you learn here (using React) to any of the popular modern UI frameworks that fit your project requirements.

Ian Jones

Headless, Mobile-friendly Data Tables with Tanstack Table and React

Learn to display, paginate, and virtualize data effectively in a table with Tanstack table and React 19.

Install `ghx` with `npm i -g @johnlindquist/ghx`

https://github.com/johnlindquist/ghx

You've copied and pasted code, set up your project, and... *error*.  "Stream is not readable."  Sound familiar?  Generic Google searches and outdated Stack Overflow answers often leave you more confused than when you started.  You need more than just documentation; you need *context*.  You need to see how real developers solve this *exact* problem.

This lesson shows you a better way to debug, using real-world GitHub examples and the power of Cursor's Composer.

Here's the workflow we'll cover:

1.  **Identify the Error:** You've already done this!  You have a specific error message ("Stream is not readable") and the code that's causing it.
2.  **Find Real-World Solutions with `ghx`:** We'll use `ghx`, a tool for searching GitHub, to find *actual projects* that have encountered (and solved!) this same issue.  No more generic advice – you'll see working code.
3.  **Consolidate and Analyze:**  `ghx` brings those relevant code snippets into a single, easy-to-read file.
4.  **Leverage Cursor's Composer:** We'll use Cursor's Composer to directly interact with the examples and your problematic code.  Paste in your error, reference the `ghx`-generated file, and ask targeted questions like:
    *   "Based on these examples, how should I modify my code to fix the 'stream is not readable' error?"
    *   "What's the common cause of this error in the context of an MCP server?"
    *   "Show me the specific lines in the examples that handle stream readability correctly."
5. **Fix the Error:** Implement the solution using this workflow.

Instead of guessing, you'll learn directly from proven solutions.  You'll gain a deeper understanding of your issue and how to troubleshoot it effectively.  This approach transforms debugging from a frustrating hunt into a targeted learning experience.

Fix Real-World Coding Errors with GitHub Context through ghx and Cursor Composer

Learn how to test custom ESLint rules with Vitest and RuleTester.

In the [previous video](https://egghead.io/set-up-a-custom-es-lint-rule~kq49h), we created a custom eslint rule that gives us a warning when some of the class names don’t start with a lowercase letter.

Here, I'll show you how to test this or any other custom ESLint rule using unit tests without manually restarting the ESLint server or modifying production code to check if the rules work correctly. We'll look at the structure in which correct and incorrect code samples should be specific to RuleTester.

We'll also learn how to make our rule fixable and verify that the applied fix works as expected.

Test Custom ESLint Rules with Vitest and RuleTester

Learn to test a Custom ESLint Rule using Vitest and RuleTester.

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

How to Work with AI-Generated Code You Don't Understand with ghx and Gemini

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

Search

Search Results