Learn Next, Realm and Svelte

### 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.

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 an eCommerce Store with Next.js and Stripe Checkout

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.

Create Contextual Video Analysis App with NextJS and Symbl.ai

(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

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

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

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

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

Svelte is a new approach to building user interfaces. 

Instead of doing the vast majority of work at the runtime as other frameworks do, Svelte shifts that work into the _compile_ step which happens when you build your app. As such, you're shipping heavily optimized code to your users.

In this quick lesson we are going to learn how to create a brand new project with Svelte 3 from scratch.

Create a new project with Svelte 3

In most Web applications we want to be able to render different HTML markup depending on values passed in from JavaScript code.

In this lesson we are going to learn how to render JavaScript variable in HTML markup when using Svelte 3.

Add data to HTML markup using Svelte 3

In Svelte 3, the same as in regular HTML we can add CSS styles to a component and this is what we're going to learn in this lesson.

Important note - styles are _scoped to the component_ which means that if we style a `h1` tag in component A, it won't automatically affect `h1` tags in component B.

Add styles to Svelte 3 component

It's highly unlikely that we'd like to have an entire app in a single file. Instead, what we'd like to do is to spread our code across multiple components and render them in one another.

In this lesson we are going to learn how to create a `<Surname />` Svelte 3 component which we're going to use in our main `App.svelte` file to display a user's surname.

Create a new Svelte 3 component to render it inside of another component

One of the key advantages of having a component system is the ability to render the component differently based on what kind of properties (shortened to 'props' in Svelte) were passed in to the component.

In this lesson we are going to learn how to declare properties inside of a Svelte component and how to pass in data to be rendered inside of a `<UserInfo />` component. We're also going to learn how to use default props which are used if a value for a property was not passed in.

Declare and pass in properties to a Svelte 3 component

Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from other parts. This is where _reactive declarations_ come in.

In this lesson we are going to learn how to use reactive declarations to re-compute (and render) square of a counter value in a simple counter example whenever user clicks on a button.

Use reactive declarations to compute component state in Svelte 3

Quite often we need to be able to loop over and render a list of data that (for example) is returned from the backend. 

In this lesson we are going to learn how to use `each` block from Svelte to iterate over a list of data and render a list of European cities. We're also going to learn how to get the current `index` while iterating over a list, as well as how to destructure a currently iterated over element of the array.

Loop over and render a list of data using an `each` block in Svelte 3

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event _modifiers_ to alter DOM event behaviour (such as `once` and `preventDefault`)

Use DOM events and event modifiers in Svelte 3

Every Svelte component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.

The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. 

In this lesson we're going to learn how to use `onMount` to fetch and render data from Star Wars API.

Use an onMount lifecycle method to fetch and render data in Svelte 3

Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

In Svelte, we do this with _stores_. In this lesson we're going to learn how to create a `writable` store and how to use it to allow `Incrementer` and `Decrementer` components modify the value of the store

Use Svelte 3 stores to share data between multiple unrelated components

Sometimes we don't want to have a complicated `update` function to change a value of our store. We know exactly what we want to change the value to - we can just use the `store.set` function to do that.

In this lesson we're going to learn how to set a value to a Svelte 3 store by using the `store.set` function to set the value of a counter without having to increment/decrement it one by one.

Set a value to a Svelte 3 store

It's important to avoid memory leaks, and Svelte 3 is no exception. When we're using the `subscribe` method from Svelte store in a component, it's important to clean ofter ourselves (especially if we're going to instantiate and destroy this component many times over).

In this lesson we're going to learn how to use `unsubscribe` to stop subscribing to the store change in a component's `onDestroy` call, as well how to use auto-subscriptions to refer to the store value and let Svelte take care of cleaning after us to avoid memory leaks.

Topics

Instructors

Content Type

Free or Pro