Learn Css, Faunadb and Solidity

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

Dive into the world of real-time web development with this hands-on course! You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

**What You’ll Learn:**
- **Next.js Best Practices:** Master Next.js best practices for building fast, maintainable apps.
- **Server-Side Rendering (SSR):** Learn SSR techniques and master features like server actions, server side form submission etc.
- **Database Access Patterns:** Efficiently connect and retrieve data using Fauna.
- **Real-Time Updates:** Implement real-time updates with Fauna Streams.
- **Basic Authentication:** Secure your chat app with simple authentication methods.

**Course Highlights:**
- Practical, project-based learning.
- Clear, step-by-step instructions.
- Focus on modern, real-time web development.
- Tips and tricks for optimizing performance.

By the end of this course, you’ll have a working real-time chat app and a solid grasp of the tools and techniques used to build it.


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

Build a Real-time Next.js 14 Chat App with Fauna 

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Now that we have user information available to us, we want to connect messages created to the users that are sending them. When we add `read` privileges to the `User` model, we can call `User.identity()` to get the user data we need to set for messages. 

Update Fauna Messages Collection with Authors

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

For user signin, we'll implement a proper server action by creating a `actions.js` file where our server actions can live. In our login page, we'll set the component to be a client component to hold some state. This way we can use the new `useFormState` hook from `react-dom` and pass in our login server action.

Within the action we'll call our `UserLogin` function from Fauna and set a cookie with the secret we get back that we can use throughout our application.

Implement Fauna Signin with Next.js Server Actions and useFormState React Hook

Now it's time to actually sign users up for our appliaction.

We'll implement the `doSignup` function that we created earlier. This function will run on the server with the `'use server'` directive so we can instantiate a fauna client and call `UserRegistration` within this function.

From there we'll redirect the user to the `/signin` page which will error out because it's not implemented yet.

Implement Signup Functionality through Fauna with Next.js 14 Server Actions

To have actual users in our application we need to represent those users in our database. Fauna has quite a few ways you can do user authentication but we'll be creating our own using a few built-in Fauna helpers.

We'll start by setting up the necessary Fauna logic for users. We'll add a `User` collection as well as a `functions.fsl` file that we'll expose user sign up and log in. Here we'll see how Fauna gives us a built in `Credentials` document to handle email and password for a user. It also has a login function that it exposes to make that easy for us which will generate a token for a user on login.

After setting up our functions, we'll add an `UnAuthRole` as well as an `AuthRole` and give proper actions for each role.

Add Fauna User Authentication to a Next.js App

To stream messages, we'll implement logic very similar to how we stream the creation of rooms from earlier.

First, we need to convert `MessageList` into a client component. We'll get an interesting error saying that only plain objects can be passed to client components from server components. This happens because the response we get back from Fauna is pretty complex. To fix this error we'll create a simple messages array and pass that down to the `MessageList` component.

In the `MessageList` component we'll create a `useEffect` that will initiate a Fauna stream within a ref and push new messages into state that we are holding in the component.

Stream Chat Messages in Real-time in Next.js from Fauna

Now it's time to actually create messages and display them in rooms within our application.

We'll start by creating a `MessageForm` component that will send a `Message.create` query to Fauna on form submission.

Next, we'll display these messages by updating our room query to also get all the messages for that room. You'll see that we can still just perform one query because we pass in the room id and call `Message.where(.room == room)` to the query.

One note here is if you console log your messages in your page component, you'll notice that the logs show up in the terminal and not the browser. This is because we are using a server component.

Create and Display Messages using Fauna within a Room in Next.js

We'll take a moment to explore how Fauna handles one-to-many relationships inside the fauna shell. 

First we'll create a `Message` collection.

Then we'll connect to the cloud database by running `fauna shell`, because I'm logged and configured this connects to the database I'm working with.

In the terminal we'll see how to create multiple messages that are associated with a room and query for those messages by room.

Explore Faunas one-to-many Relationships between Collections in the Terminal

With rooms being created and displayed on the index page, it's now time to create dynamic routes for each room so that when you click on a room name, you are actually navigated to that room.

We'll do this by using Next.js dynamic route syntax `/rooms/[...id]/page.js`. This will render a page on any `/rooms/:id` passing the component we define the `:id` as params.

Here we'll take that id and fetch the room data from fauna with a `Room.byId` query.

Create Dynamic Routes in Next.js for Chat Rooms

We can add rooms but our application does not update and display rooms when a room is added. This should happen in real-time.

To fix this we'll add a useEffect that will query for all our rooms and use fauna's `client.stream` API to ensure that this happens in real-time.

List Available Chat Rooms in Real-time in Next.js from Fauna

The first step to building a chat app is to have rooms to chat in. We'll need to create a Room collection (or table) in Fauna that we'll be adding to.

In our Next Application we'll create a simple form that has a submit handler that will create those rooms in Fauna. We need to hold some state in our component so we'll turn the page into a client component with `'use client'`.

There will be a little bit more Fauna set up to get things working. We need to create a key for our application to interact with our database so we'll create a key by running `Key.create` in our `fauna shell`. Then we'll install the `fauna` client and make a `client.query` to create the room.

Create a Fauna Room Collection in Next.js with the fauna Client

The first step is to install and configure our database that will be backing our Next.js application. We'll be using Fauna so we head over to the Fauna website and create a database.

Back in our terminal we will install `fauna-shell` so we can interact and manage our database from within our project. After some initializing steps from the CLI we'll be set up to build the app out.

Initialize and Configure a Fauna Database inside a Next.js project with fauna-shell

Now that we have a project, we need a Pin input to work with. We'll create 4 inputs and style them so they look like a security code pin input that you would expect to see.

Style a Pin Input through Data Attributes in React

Ethereum is a decentralized, open-source blockchain with smart contract functionality. 

ethereum

Welcome to Noah's course on Introduction to Smart Contracts with Ethereum and Solidity. 

Introduction to Introduction to Smart Contracts with Ethereum and Solidity

Web3 is a paradigm shift in how applications are interacted with, ran, and built. 

It’s not just a Pump-and-Dump scheme on cryptocurrencies or Bored Ape NFT profile pictures you can put on Twitter.

A fundamental tenet of Web3 is bringing ownership back to the user. You no longer have to trust that your data is being properly handled on someone else’s server (although, currently Web3 ecosystem mainly depends on centralized infrastructure such as GitHub).  

This ownership is achieved through blockchain, cryptocurrencies, NFTs, and smart contracts.

A great example of this type of ownership is through how you exchange money in Web3. There is no intermediary like Stripe, or PayPal to process your transactions. You can even build your own smart contracts that receive crypto (e.g. Ethereum or ‘eth’ for short) and then process that eth how you’d like.

Building this type of smart contract is exactly what Matías is going to show you how to do right now.

Matías builds out a Web3 application that allows you to receive tips in the form of eth in a tip jar on your website. This means your application will be backed by a smart contract that’s accepts eth, stores data, and emits Solidity events.

The frontend application uses SvelteKit which you’ll see how easy it is to get up and be productive with in minutes. A huge benefit here is that the JavaScript you write is just that, JavaScript. You’ll be able to take what you learn and implement it into any framework of your choosing.

While you build this application you will learn how to:

- Write a smart contract using Solidity language
- Test the smart contract using just JavaScript through the waffle framework
- Communicate and interact with the smart contract using ethers.js in a SvelteKit application
- Deploy your smart contract to make it public and accessible to anyone

Solidity is an object-oriented, high-level language for implementing smart contracts.

solidity

Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

There are several Ethereum test networks like Ropsten, Rinkeby and Kovan that you can use to deploy your contract to have it publicly available without having to use the mainnet and real ETH.
In this course you'll deploy to Rinkeby netwok (but, the process is the same for the other networks).

The first step will be update your Metamask Wallet to connect to the Rinkeby network.

Next, you'll need some test/fake Ethere to use for testing the Dapp in the network, for that you'll need to use a [faucet like this one](https://www.rinkebyfaucet.com/). Just visit that faucet and add your wallet address.

You will also deploy your web application to vercel to see your project live on the internet!

Deploy your Smart Contract to Goerli Test Network and App to Vercel

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

Now that we have an application that is accepting tips to the smart contract that was defined, we need to be able to withdraw the funds that are sent to the contract. The smart contract function for this is already defined so we will just need to call the function from the front end.

To do this we will create a new route to display the contract information. We will then check if the current user is the contract owner and if so allow that user to withdraw the contract funds by clicking a button that we wire up to call the withdraw function from the smart contract.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Withdraw eth from a Smart Contract in a Svelte Application

It is time to interact with the contract, let's send some eth!

For this you'll need a form that is rendered only when the wallet is connected.
This form use the `sendTip` function and gather some required information. On submit, it will read the `sendingTip` loading state variable and disable or enable the button.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Create a Form in Svelte and Send a Tip to an Solidity Smart Contract

Now is time to setup the client to talk with the contract, for that you will need to store and access the contract ABI (this is a file generated by the contract compilation) as well as use ethers to set up a connection to the contract. 

Once set up is complete, we will listen to any tip events that come in from the contract and display tip information in the application.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Interact with a Solidity Smart Contract Using Ethers and the Contract ABI in SvetleKit

Now the UI is capable to connect to the Ethereum network by using the wallet, but we need two more things to continue.

1. Avoid re-connecting every time the browser is refreshed
2. Get more information about the user and the network.

For the first, let's run a little function every time the component is mounted.

Then, let's read and display some more information:

- The user balance
- The network that the user is currently connected

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.


Retrieve Ethereum Network and Account information on Mount and Display it in Svelte

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!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Search

Search Results