Learn Next, Recompose and Webstorm

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

- Speaker Diarization
- Sentiment Analysis
- Contextual Insights
- Conversational Analytics
- Topics of Discussion
- Entity and Intent Recognition
- Pre-built UI and Symbl JS Elements

In this course we will use [Symbl.ai](https://symbl.ai/) to get transcripts for the video we will upload as well as more meaningful insights. 

Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account [here](https://platform.symbl.ai/) and start building.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create Contextual Video Analysis App with NextJS and Symbl.ai

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

Create an eCommerce Store with Next.js and Stripe Checkout

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.

prisma

Build a full-stack app with Prisma

[Next.js](https://nextjs.org/) is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

In this series, we will learn how to utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG), to build full-stack React apps. We will use [Auth0](https://auth0.com) to handle user authentication and authorization, and we'll also learn how to integrate the excellent [Chakra UI](https://chakra-ui.com/) component library into our Next.js project to make it a breeze to build beautiful and modularized user interfaces. Finally, we will import and deploy our project from GitHub to [Vercel](https://vercel.com), the deployment platform built by the creators of Next.js.

This collection will still be continuously updated with new and more advanced content. Subscribe to the RSS feed to get notified of the latest lessons!

Introduction to Next.js 9

With the release of `Next.js` v9+, we've been handed the tools to create full-stack react apps with ease. 

This collection will dive into the fundamentals of API & Dynamic routing, handling data from local json and a DB, plus deployment options. 

This collection will be an ongoing collection, where I continue adding more videos over time 😃

Next.js is a minimalistic framework for server-rendered React applications.

NextJS Fundamentals

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

Build React Components from Streams with RxJS and Recompose

In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples. Using recompose looks very different from “vanilla” React; so you will also get comfortable with the look and feel of a “recomposed” component. The best part is no more need for class components! You’ll learn how to use Recompose to both modify components and also create your own higher-order components.

Higher Order Components with Functional Patterns Using Recompose

Learn how to use the [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/latest/guide/getting_started.html#getting_started_install) to create and deploy a [DynamoDB table](https://aws.amazon.com/dynamodb/) with [Next.js](https://nextjs.org).

- 🛠 API Route to handle CRUD actions
- 📦 AWS CDK for Infrastructure as Code
- 🔓 IAM role to restrict permissions
- 🚀 Deploy instantly to [Vercel](https://vercel.com)

You can view the completed code [here](https://github.com/leerob/nextjs-aws-dynamodb). 

Using DynamoDB with Next.js

Next.js is a React framework that provides a solutions to problems such as:

- 🌟 bundling & transpiling your React code
- 🌟 code splitting
- 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
- 🔥 Create a new Next.js project
- 🔥 Add TypeScript support
- 🔥 Create styled components with Emotion
- 🔥 Use both static and dynamic routes
- 🔥 Generate fully typed static pages
- 🔥 Set up Netlify deployments
- 🔥 Add a Netlify Form to our site
- 🔥 and more!

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

When you declare your Component and Props in JSX, you can pass those props along to your [RxJS](/q/rxjs) stream. This is typically done using `switchMap` or `combineLatest` where you can grab from the props from your `props$` stream and push them into another stream.

Pass a React Prop to a Stream in RxJS

Next.js supports the ability to create APIs based on routes inside of an `pages/api` folder. This opens up a fantastic workflow for incorporating node services into your projects without any configuration. This lesson walks you through the basics of creating your first API route in Next.js

Create an API Route in Next.js

Next.JS works with any CSS-in-JS solution, including Styled Components. But to get it working with Next.JS's server-side rendering, you'll need to do some configuration.

In this lesson I go through the steps required to get it working properly, including adding `babel-plugin-styled-components` to your project and overriding the `Document` page to inject your styles into the `<Head>` of the page.

For reference, please see Styled Components' [guide to SSR](https://www.styled-components.com/docs/advanced#server-side-rendering), and the Next.JS [sample repository for Styled Components](https://github.com/zeit/next.js/tree/master/examples/with-styled-components).

Add Styled Components to a Next.JS Project

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

We begin diving into the Web3 API a little bit deeper during this lesson by taking a test-drive of `eth.sendTransaction` as well as `utils.toWei` method. Before we can dive into using these methods though, we'll first get an understanding of the values that are being used to populate our transaction data prior to send it off to execute on the Ethereum Blockchain.

### External Resources
* [Web3 JS Docs](https://egghead.io/lessons/web3js.readthedocs.io/)
* [Formatic Docs](https://docs.fortmatic.com/)
* [Formatic Developer Dashboard](https://dashboard.fortmatic.com/)

Use the Values from a React Form to Send Ether Transactions to Others with Fortmatic

In this lesson, we will learn how to initialize a Next.js 9 project with TypeScript support from scratch.

Initialize a Next.js 9 project with TypeScript

Next.js treats single-file components in the `/pages/` directory as pages, so we need to work around this abstraction to access and modify the `<head>` element of the page. In this lesson, we will learn how to render the `<head>` element dynamically with a constantly updated title in Next.js 9, and see how this feature can be helpful for loading custom fonts.

Render the <head /> element dynamically in Next.js

Next.js uses a file-system based router, meaning that it treats single-file components in the `/pages/` directory as pages. In this lesson, we will set up multiple pages and use `next/link` to navigate across different routes, and see how to create dynamic routes, and parse URL query strings.

We will be using TypeScript, but for this specific lesson, no changes need to be made if you are using JavaScript.

Understand static and dynamic Page Routing in Next.js

The "API routes" in Next.js are Node.js serverless functions that we can easily incorporate into our app.

In this lesson, we will learn how to write API request handlers, and how to set up dynamic API routes. After this lesson, you'll be able to create simple API endpoints with Next.js ready to be used both in our frontend code within Next.js itself or for other general purposes.

Build straightforward API with Next.js API routes

One of the more powerful features of `Nextjs` is how it handles regular and dynamic routing. In this video we will go through how to setup a single basic and dynamic route within the `pages` directory using `Nextjs`'s file routing and render some content. 

Setup Nextjs Routes

In this lesson, we will learn how to set up and use Chakra UI with Next.js.

We'll use Chakra UI to customize the way Next.js styles every page in our application by defining a `_app.tsx` file. We'll wrap our app in the `ThemeProvider` that Chakra gives us as well as use `CSSReset` to reset the default browser styling.

After this initial set up, you'll see how easy it is to start styling pages with Chakra by using components like `Heading`, `Link`, and `Flex` exposed from the core package.

Set up Chakra UI to work with Next.js

`Nextjs` not only allows us to setup basic and dynamic routes, it also allows us to use a similar pattern for defining API routes. In this video we will setup two API routes, consume the data in our `React` components with `react-query`'s `useQuery` hook.

Utilize API Routes in Nextjs

The Static Site Generation (SSG) feature introduced in Next.js 9.3 is powerful, but sometimes we still need Server-Side Rendering (SSR) for dynamic contents on the fly. For this purpose, the new life-cycle method `getServerSideProps` allows us to pre-render a page whose data must be fetched at request time. This is, in many cases, much more preferable over the classic hybrid approach of `getInitialProps`, because we can separate code intended for servers or clients more clearly.

In this lesson, we will learn how to use `getServerSideProps` to dynamically fetch data and server-side render pages by consuming a "user profile" API route in our project. We will also learn how to return a 404 error page when the user profile doesn't exist.

After this lesson, you will be able to combine prior knowledge of writing API routes with what we've just learned to build a fully dynamic full-stack app with Next.js.

Topics

Instructors

Content Type