Learn React-native, Redux and Scikit-learn

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

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux


With our migration complete, you notice that there is A TON of Redux code we can simply delete. We no longer have to manually handle all the server interactions that our application requires to function. Redux can handle the client-side state that it was meant to handle and RTK Query can take care of fetching and caching our network data.

Not only is our code base cleaner and easier to understand but it also provides a significant boost in the user experience of our application by making features like prefetching, optimistic updates, loading and error states easier to include.

If you're running a redux application in production I suggest taking a serious look at RTK Query. After this course you should have all the tools you need to make that happen.


Delete Unused Redux Code After Migrating to RTK Query

RTK Query is built on top of Redux which has the huge benefit of utlizing the [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en). Every RTK Query operation is represented with the actions and state modifications that happen in the DevTools. 

There's also RTK Query tab in Redux DevTools so that you can take a detailed look at the various queries and mutations you have going at any given time.

In this lesson you'll get a basic overview of the Redux DevTools and how it works with RTK Query.

Debug RTK Query Applications with the Redux DevTools Chrome Extension

The previous prefetching that we did with the `initiate` method is most useful for data that will existing on your initial page load. For other data throughout your application pre-loading can still come in handy, but you need to be thoughtful about what gets loaded, and when.

RTK Query gives you a `usePrefetch` hook that you can sprinkle throughout your application depending on what your user is doing. In this lesson, we prefetch dog data when the user hovers over the dog and services links, indicating their intent to load those page. With this approach to pre-fetching it's unlikely your users will ever see a loading spinner.

The documentation for RTK Query's `usePrefetch` hook can be found here:
https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-with-react-hooks


Prefetch Data in Response to User Interactivity with RTK Query's usePrefetch hook


RTK Query can start fetching data in your application before React is even available. This can be handy when your application relies heavily on data that you need to fetch. This data is cached so your users won't be refetching this data when they navigate through out the application.

Prefetching relies on the powerful `api.endpoints.<queryName>.initiate()` method that underlies much RTK Query's internals. For RTK Query to process and store initiate() calls properly they have to be sent into the redux store with `store.dispatch()`.

An advanced variation of this splits your main app file into the data pre-fetching (done first) and then your react application (lazy-loaded with `import()`). The idea being that you want to start your data calls before JS has to even start process what's likely to be a large bundle file.

For more information about prefetching with RTK Qyery see: https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-without-hooks.


Prefetch Data in RTK Query using an Endpoint's initiate() Method

In this lesson we look at the options for modifying headers on your queries. We start with adding a `headers` object to an individual query. That requires moving our query from returning a url string, to returning an object with the URL and the new `headers` property. We also add `headers` to our `baseQuery`, but replace that with the more flexible [prepareHeaders](https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#prepareheaders).

`prepareHeaders` relies on the [Headers object](https://developer.mozilla.org/en-US/docs/Web/API/Headers) that is part of the Fetch API. As a second argument you also can access the current redux state. Accessing the redux state is helpful if you want to access saved data such as an authentication token.

Here's an example of using `prepareHeaders` for setting an `authorization` header:
https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests


Customize Query and Mutation Headers in RTK Query with prepareHeaders

TypeScript's satisfies operator finally clicked for me when I realized it's almost always used for specific implementations of configuration objects. So this lesson walks you through the naive approaches I've taken before and how to solve them using the satisfies operator. After this, satisfies will be another tool in your belt in TypeScript. To clean up all the TypeScript code you have around configuration.

TypeScript's "satisfies" for Configuration

Windsurf and Cursor are both able to take an image and then use an agent to build out what it sees in that image. This lesson is going to compare Windsurf and Cursor by uploading the same image to both and giving them the same prompt. Comparing not only the results, but also the steps that they take to get there. We'll also try uploading additional images throughout the process to see what they do as far as revising along the way and improving the site as they go along. 

Windsurf Cascade vs. Cursor Composer Agent: Build a Site from an Image

In this lesson, you'll discover how to style View Transitions using CSS pseudo-selectors to create custom animation effects. We'll transform the default cross-fade into a smooth slide transition by targeting the ::view-transition-old and ::view-transition-new pseudo-elements. You'll learn how these powerful selectors give you precise control over your transition animations, allowing you to create more engaging and personalized user experiences with just a few lines of CSS.

Customize View Transitions with CSS Using view-transition-old and view-transition-new

In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We'll create a simple example that demonstrates how to animate between different text states with just a few lines of code - no external libraries required. This powerful native API makes it easy to add professional-looking transitions to your user interface, enhancing the user experience with minimal effort.

Create Smooth UI Transitions with the Native View Transitions API

I've been using Cursor for a very long time and their "Agent" feature in Composer is fairly new, so I'm still getting used to it. But since Windsurf recently got onto the stage with their Cascade agent, they've slowly been gaining the mind share on the UX for coding agents. I decided to put them to the test by putting Windsurf and Cursor on the exact same screen side by side trying to accomplish the same task and to see which workflow I would prefer. I've been a diehard Cursor user for over a year now, so it's going to take a lot for me to switch to a different IDE. But I just have to say, even from this simple demo, Windsurf is looking pretty nice.

This lesson is just going to walk through creating a CLI using both tools to print out inspirational quotes and to explore how they approach the step-by-step of installing packages and running commands and setting up all the files we need to get this running.

Windsurf Cascade vs. Cursor Composer Agent Side-by-Side Comparison

This TypeScript tutorial explains how to use generics, allowing for different types to be passed as arguments. It discusses the use of shorthand syntax in generics and illustrates with examples. This method is useful for library creation, providing type safety and control to the user.

```typescript
interface PhotoMetadata<T> {
  title: string;
  takenAt: Date;
  customData: T;
}

// Function that processes a photo with custom metadata
function processPhoto<T>(photo: PhotoMetadata<T>): {
  processedTitle: string;
  daysSinceCapture: number;
  customDataSummary: T;
} {
  const today = new Date();
  const daysSinceCapture = Math.floor(
    (today.getTime() - photo.takenAt.getTime()) / (1000 * 60 * 60 * 24)
  );

  return {
    processedTitle: photo.title.toUpperCase(),
    daysSinceCapture,
    customDataSummary: photo.customData
  };
}

// Example usage with different custom data shapes
type CameraSettings = {
  iso: number;
  aperture: string;
  shutterSpeed: string;
}

type LocationData = {
  latitude: number;
  longitude: number;
  locationName: string;
}

// Using with camera settings
const photoWithCamera: PhotoMetadata<CameraSettings> = {
  title: "Sunset at beach",
  takenAt: new Date('2024-01-15'),
  customData: {
    iso: 100,
    aperture: "f/2.8",
    shutterSpeed: "1/1000"
  }
};

// Using with location data
const photoWithLocation: PhotoMetadata<LocationData> = {
  title: "Mountain vista",
  takenAt: new Date('2024-02-01'),
  customData: {
    latitude: 45.5231,
    longitude: -122.6765,
    locationName: "Mount Hood"
  }
};

const processedCameraPhoto = processPhoto(photoWithCamera);
const processedLocationPhoto = processPhoto(photoWithLocation);

processedCameraPhoto.customDataSummary.iso
processedLocationPhoto.customDataSummary.longitude

```

Basic Explanation of Typescript Generics

A very basic explanation of generic function arguments

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Search

Search Results