Learn Browserify, Remix and Scikit-learn

[Supabase](http://supabase.com?utm_source=egghead&utm_campaign=remix) is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

- loaders and actions in Remix
- querying and mutating data with Supabase
- authentication with GitHub
- authorization with RLS
- merging client and server state with realtime events
- deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build a Realtime Chat App with Remix and Supabase

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

Learn Remix by Building a Social Media Platform with TypeScript and Prisma

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

The first thing you do is install Remix! In this course, you start with a barebones Remix set up. In many situations you will start with a [Remix stack](https://remix.run/docs/en/v1/pages/stacks) but this course starts from the beginning.

Installing Remix is easy though, so you will finish this lesson by being introduced to a core Remix feature: data loaders.

Remix loaders are functions that only run on the server so you are safe to connect to databases, make API calls, and anything else you’d expect to do on a server. The data you return from these functions will be received into your components through `useLoaderData` hooks. 

We’ll see how to return static data from a loader and display it in a component. Along the way, TypeScript will complain about data that is coming into your component so we will fix that as well.


Load and Display Static Data with Remix loaders

Most applications need data persisted to a database. A really great way to manage data is through an (Object-relational mapping) ORM so you aren’t stuck writing SQL queries when you want to be building websites. 

Prisma is a modern ORM that lets you get started with a database in just a couple steps. It supports TypeScript to which you will take advantage of.

In this lesson you will initialize Prisma in your application and model out what a `Post` will look like. You’ll set a few properties that Prisma will manage (e.g. id, createdAt) and a few that you will manage. Prisma also comes with a studio that you can run to create and manage data super easily when you don’t have other means to CRUD that data (we don’t yet!).

Install and Model Data with Prisma

Now that you have a database running, you need a way to connect to it in your application. This is where Prisma client joins the fray and really shines. 

With Remix, there is a little bit of set up that we have to do to ensure that we won’t be opening extra connections to the database through Prisma. Through this set up you’ll learn about another important pattern in Remix which are services. 
You’ll create a db.server.ts service that will manage setting up the Prisma client. The folks at Remix have us covered with this code snippet that safely sets the client up for you. 

After creating the client, we will create another service `post.server.ts` that will expose all of the functions that you can use throughout your application to retrieve data from the db. One great benefit of this pattern is that when consuming these services you don’t need to know about the implementation that is powering them. Just the api that is exposed, in this case a `Post` type and `getPosts` function.

FINALLY you’ll consume that function in the data loader at the root of your application to display posts from the database.

This sounds like a lot but you get this all done in under 5 minutes.

Retrieve and Display Data from the Database through Prisma and Remix Loaders

There are many ways to style an application. While styling isn’t a focus for this course, we don’t want the application to be unbearable to look at. 


TailwindCSS is how you will style this application. With it’s utility classes, Tailwind stays out of the way once you get it set up. The [Tailwind docs have a great tutorial](https://tailwindcss.com/docs/guides/remix) which you can follow to get to styling your application. You can also follow along in this tutorial.

Set up Tailwind and Create a Presentational Component in Remix

This is where things start to get fun, you’re adding data to your database!

 To do this, you’ll learn about Remix actions. A Remix action utilizes HTML elements to accept input from the user. When creating data, you’ll set the form to a method of `post`. The form needs a route to post to so you will need to set the `action` to the route that will handle the request. In our case it is the index route the form is in.

The Remix action itself accepts a request that you can pull the form field data you need off of it. From here you can update your database directly, because you’re on the server! In this case, you’ll create a function createPost that will utilize Prisma to create a record. Once this happens, we will redirect users back to the index page that they were on.

Add Data to your Database through Remix Actions and Prisma create

At this point, your form will accept any type of input that users desire. This isn't good, you need to add form validation. 

Form validation is another area that there are many ways to accomplish what you need. One great way to get easy form validation is through a library called Zod. Zod allows you to create a schema to parse your form input against. It will return form and field errors when input doesn’t match the rules that you supply.

With Zod in place, you’ll check form input in the action previously defined. If an error is found, you’ll return an object passing in the errors you find as well as the input that users submitted. This will be used to render error messages in the form and reset form state to what was submitted. This is easy to accomplish with Remix json helper that will also set the error message for you.

Along the way you will also see how easy it is to type this data.

Validate Form Data Through a Remix Action using Zod

You are at a place where you have an app that will persist data through a sqlite database. Sqlite is great for getting started but as you build out your application, you’ll want a database that can scale with your project. 

PlanetScale is the database that you are looking for. PlanetScale is a database as a service that powers a mysql database called Vitess. Vitess is what YouTube is ran on so safe to say it will scale to all your needs. 

Because you used Prisma to set up your database, switching to PlanetScale will be easy. You will create a PlanetScale project, sign in to the CLI, follow the Prisma Quickstart guide and learn about Database workflows with PlanetScale. Who would have thought it would be so easy to migrate your database service.

Connect a Remix Application to PlanetScale Through Prisma

Our application has achieved MVP status — Minimum Viable Product that is. This means it’s time to deploy.

For this application, you will use Vercel to deploy to as it’s just a few clicks away. Vercel integrates with GitHub so once you give it access you can connect your GitHub Project. Similarly, Vercel has a PlanetScale integration that will pull in all the necessary environment variables you will need to connect your production database to your deployed application. After setting your env variables you’ll have deployed a full fledged, working application with a production database.

From there, we will test out a feature to deployment workflow for you to get a feel for how deployments on Vercel work.

Deploy a Remix Application with Production Database to the Internet Through Vercel

In lesson 08, [Deploy a Remix Application](https://egghead.io/lessons/egghead-deploy-a-remix-application-with-production-database-to-the-internet-through-vercel), we said that the app was MVP status. This isn’t quite true for many applications. You will inevitably need users on your site to make it useful for your customers (or even for yourself).

To get started adding users, you will update Prisma with a user model and associate it to Posts. From there you’ll update your posts to display user information. You’ll see how to migrate a Prisma schema in PlanetScale as you deploy these changes.

One nice tid bit you will pick up along the way is a TypeScript 4.5 feature, Awaited. Awaited will unwrap a promise type for you so that you don’t have to do it yourself which is a big relief.

Create and Utilize a User Model with Prisma in Remix

To further prep for implementing user sign up and log in, you will create a sign up and log in page. To do this, there are a few development workflows that you’ll be introduced to. You will create a reusable button component from the previous button that was created to use inside the Nav header. 

To actually reuse the buttons, you’ll need to create a nav. One thing that you shouldn’t do is apply a nav to every page you create. This is why Remix has layout routes and in this case because it’s an application layout, you will want a pathless — pathless meaning it won’t show up in the url — layout route. This is denoted with two underscores in the layout file, for an app that is `__app`.

Along the way you will be introduced to an awesome component pattern that implements an `as` prop. What this will do is let you define your button AS a link so that you can use actual HTML links instead of buttons for accessibility reasons.

Create and Use a Layout with Remix Pathless Layout Routes

You need to accept input from a user to sign them up to your application. Creating a user in the database is a straightforward Prisma.create function call. 

The tricky part here is that we want to ensure bad data is not inputed into the form. We’ve done form validation before but this lesson will show you a more complex version of it.   Among the validation that is applied, you will hash the password that’s given to us before saving it to the database as well as check the database for existing users when a sign up is attempted.

Validate User Sign Up Data in Remix and Hash a Password

Here comes the bulk of complexity when dealing with authentication. You need to handle verifying that a user account exists in the database and when it passes somehow referencing it throughout your application.

A great way to do this is through Session Storage. You can implement session storage with HTTP cookies (which is what you will do here) or with a database. You’ll implement functions `commitSession`, `destroySession`, and `getSession` but luckily the Remix docs will give you a head start here.

Along with session storage, you will need to implement an authentication strategy. Again there are a few ways you can do this whether that’s magic email, 3rd party auth like GitHub or Twitter, or email / password. Because you are already accepting email / password, that is what you will do!

Implement User Login in Remix with a Form Strategy and Session Storage

Finally, you want to associate users to the posts that they make. To do this you will grab the user data from authenticator.isAuthenticated API to pass to the post creation. This data does not need to be validated because it’s coming from the session storage which has already been validated.

Add User Data to a Post Creation in Remix

Currently the only way to know if you are logged in is if you check the cookie that is set in the browser. This isn’t super user friendly. You want to add a visual cue as well as a log out button to the nav.   To accomplish this, you can check if a user exists with the isAuthenticated function that was created in the auth service. If there is a user you will display their email, loaded up from the isAuthenticated check, as well as a log out button.

The log out button will post to a resource route. This route will log out the user and redirect them to the log in page. 

Finally, you will lock up the index page so only logged in users can see and add posts.

Implement Log out Functionality and Only Allow Logged in Users to See Posts

In your pnpm monorepo, you can easily create new applications under your apps folder. 

Here, you'll create a new Remix app by running the command `pnpx create-remix@latest`. The app you generate functions just like any other full featured Remix app!

Add a Remix App to a pnpm Workspace Monorepo

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

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

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

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

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results