Ready to kickstart your freelance career or just getting started on your journey? You’re in the right spot. Learn from the world’s largest fully distributed workforce in the world.

The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.

This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.

At the end of the workshop there will be a Q&A session with a Toptal Talent (Developer) who can answer your questions and provide insights and tips into their own success.

Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.

In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.

But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.

We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.

In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!

With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.

In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.

In this workshop we’ll build a GraphQL Yoga server from scratch, as well as cover how you can use Yoga inside of frontend applications like Next.js. We’ll also look through the plugin ecosystem of Envelop, and what can be added to Yoga to fully customize it to your needs.

In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.

We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.

• How to implement authentication in your React apps with NextAuth.js
• How to use Sourcegraph to quickly understand specific parts of the library
• Finishing the session with a scavenger hunt

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.

We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.

Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.

In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.

One of the most powerful aspects of Next.js is that it offers tools that let you render content at multiple points - whether that be at the build time, on the server, even or on the client. Beyond this, it offers an option for deferred rendering that builds pages only when they are requested.

While these options add a lot of power, they can also create some confusion if you want to integrate Next.js and LaunchDarkly. Which library do you need? Where do you import and configure it? How do you use it once it is set up?

In this workshop, we'll answer these questions for the different types of integrations Next.js offers.

In this crash course, we'll create a new project in the headless CMS, fill it with data, and use the content to build a multilingual Next.js app. We'll spend a lot of time in code to:

• Generate strongly typed models and structure for the content
• Set up the site for multiple languages
• Use respective language codes in content fetching and incorporate language fallbacks
• Resolve multilingual content from rich text fields

You will learn:

• How to work with content from headless CMS (Kontent.ai)
• How content model can be leveraged to generate TS types and what benefits it brings to your project
• How to add multilingual capabilities to Next.js website
• How to use language fallbacks
• What are the typical gotchas when working with multilingual content

Anybody can write code that “works.” But what makes the best engineers stand out is their ability to create solutions that are clear, concise, testable and easy to understand and maintain. Join us as we explore two of React’s most powerful tools for well-architected solutions by starting with a suboptimal game codebase and refactoring it using industry best practices such as custom hooks, higher-order components (HOCs) and contexts.

Learn how to build web apps from design in Figma to deploying to AWS while moving very fast.

In this workshop, you will integrate a decoupled Gatsby Shopify website into Storyblok real-time visual editor.

1. Connect Gatsby with Shopify and build the catalog
2. Build the shopping Card functionality using shopify-buy
3. Connect Gatsby with Storyblok
4. Build editable components for the Storyblok visual editor, including Shopify products and Collections