Nader Dabit
Deploying a Next app with the AWS Amplify CLI
updated
If you're interested in having more ownership and control over your code, this is the video for you. You'll learn everything you need to know in this short video - Installing the CLI, authenticating, pushing updates, cloning projects, running your own node, and more.
🔗 User Guide: https://radicle.xyz/guides/user
🔗 Web App: https://app.radicle.xyz/
🔗 Homepage: https://radicle.xyz/
🔗 Seeder Guide: https://radicle.xyz/guides/seeder
🔗 Protocol Guide: https://radicle.xyz/guides/protocol
🔗 VSCode Plugin: marketplace.visualstudio.com/items?itemName=radicle-ide-plugins-team.radicle
🔗 JetBrains Plugin: plugins.jetbrains.com/plugin/19664-radicle
🔗 GitHub Migration Tooling: https://app.radicle.xyz/nodes/seed.radicle.at/rad:z2UyZq9x68YFvZ4xrKf1JbQD3pmRU
🔗 Unofficial Tips/Tricks: https://app.radicle.xyz/nodes/seed.rhizoma.dev/rad:z3yQUb9HDAC7TQrUDGkQsXDsYFj9G/tree/README.md
0:00 - Introduction
2:54 - Installing the CLI
3:52 - Configuring auth
4:08 - Running a node
4:39 - Initializing a new app
5:09 - Viewing the repo in the Radicle UI
5:50 - Pushing a new update
7:19 - Cloning another project
8:26 - Other useful links
9:08 - Wrapping up
🔗 Code - github.com/dabit3/lcm-turbo-app
🔗 Fal.ai - fal.ai
🔗 Twitter Thread - twitter.com/gorkemyurt/status/1731564439717957764
0:00 - Introduction
2:30 - Creating app and configuring dependencies
3:45 - Creating API route and configuring environment variable
6:10 - Writing the UI and app logic
14:40 - Testing it out
🔗 React Native AI - github.com/dabit3/react-native-ai
🔗 Blog Post - nader.substack.com/p/introducing-react-native-ai
0:00 - Introduction
2:45 - Creating a new app and configuring API keys
6:45 - Running the app and server
9:08 - Testing it out
9:46 - Code walkthrough
14:02 - OpenAI Assistants
17:00 - Image models
20:17 - Theming
23:03 - Conclusion
✨ Resources ✨
🔗 Codebase - github.com/dabit3/openai-functions-god-app
🔗 Release Blog Post - openai.com/blog/function-calling-and-other-api-updates
🔗 Replicate - replicate.com
🔗 Function Calling Guide - platform.openai.com/docs/guides/gpt/function-calling
✨ Contents ✨
0:00 - Introduction
3:21 - Replicate overview
4:35 - Project setup
5:50 - Configuring API Keys
6:55 - Creating API Route
9:55 - Configuring the OpenAI Functions
19:15 - Interacing with Replicate
21:08 - Building the UI
25:07 - Testing it out
✨ Resources ✨
🔗 Codebase - github.com/dabit3/semantic-search-nextjs-pinecone-langchain-chatgpt
🔗 Tweet - twitter.com/dabit3/status/1664979090074468354
🔗 Langchain JavaScript Docs - js.langchain.com/docs
🔗 Pinecone - app.pinecone.io
🔗 OpenAI - platform.openai.com
🔗 Developer's Digest - youtube.com/@DevelopersDigest
✨ Contents ✨
00:00 - Introduction
03:35 - Project setup
05:20 - Setting up API Keys and other configuration
08:15 - Creating a Pinecone Index
12:12 - Transforming documents into vectors and storing to Pinecone
18:07 - Transforming question into a vector and querying Pinecone
22:12 - Creating route handlers for API - querying Pinecone
24:53 - Creating the route handler for updating Pinecone
28:10 - Building the user interface (UI)
32:35 - Configuring the documents to be searchable
34:12 - Running and using the app
37:28 - Conclusion
🔗 Codebase - github.com/dabit3/nextjs-route-handlers-permanent-file-storage
🔗 Bundlr Docs - https://bundlr.network/developers
🔗 Next.js Route Handler docs - nextjs.org/docs/app/building-your-application/routing/router-handlers
We start by creating a new Next.js application and installing the dependencies.
We then create a basic user interface for uploading some text, and a corresponding route handler to submit requests on the server.
We then do the same, but for uploading images.
By the end of this video you should have a good understanding of how to use Next.js route handlers to easily upload files and images to permanant storage with Bundlr Network.
00:00 - Introduction
00:46 - Creating the app and installing dependencies
01:39 - Creating the UI and functionality for uploading text
04:13 - Creating the route handler for uploading text
09:51 - Testing it out
10:39 - Docs and resources
11:39 - Creating the UI and functionality for uploading images
13:55 - Creating route handler for uploading images
We'll start with an introduction to Fuel, the Fuel Toolchain, and what sets Fuel apart from other L2s and blockchains.
We'll then dive into building an end to end application by creating, testing, and deploying a smart contract to the Fuel Testnet.
Next, we'll download the Fuel wallet, build a front end, and connect our app to the deployed smart contract to test it all out.
By the end of this video you should have a great understanding of what Fuel is, how it works, and how to start building full stack applications with the Fuel tools and SDKs.
0:00 - Introduction to Fuel
5:16 - Fuel developer resources
6:30 - Installing dependencies and initializing the app
11:39 - Writing our first smart contract
15:45 - Writing tests
19:05 - Deploying the contract to Fuel testnet
24:10 - Downloading the Fuel Wallet
26:12 - Building the front end
🔗 Docs - https://docs.lens.xyz/docs/module-interfaces
In this video, you'll learn how to build and deploy a custom module that only allows someone to follow another user if they know their secret code.
By the end of the video you should have a basic grasp of how custom modules work and how to start building and testing with them.
🔗 Codebase - github.com/dabit3/nextjs-chatgpt-plugin-starter
🔗 Docs - platform.openai.com/docs/plugins/introduction
We'll start by giving an rundown of what technologies you might use to build a plugin with TypeScript or JavaScript and an overview of the app we'll be building.
Next we'll scaffold out a new Next.js app and configure the files we need for our plugin to work.
After the configuration is set up, we'll create the API routes that our plugin will be using and set up a basic, local store to hold the state updates.
Finally we'll test it out by running it in the ChatGPT console.
By the end of this video you should have a good understanding of how to build a ChatGPT plugin from scratch using Next.js and TypeScript.
0:00 - Introduction
2:35 - Scaffolding the Next.js app
5:45 - Configuring headers in Next.js config
6:25 - Creating the OpenAI manifest
8:52 - Creating the OpenAPI configuration
13:09 - Creating the routes
22:20 - Testing it out
🔗 Code - gist.github.com/dabit3/10f93a001d75a1b44e5ec2001b33e4f6
🔗 QuickStart Guide - docs.passport.gitcoin.co/building-with-passport/quick-start-guide
🔗 Scorer Dashboard - scorer.gitcoin.co
Follow along as I walk you through the entire process, from initializing a new web application, to installing the required dependencies, to writing all of the code from scratch, to testing it out.
By the end of this video, you'll have the knowledge to create your own secure web applications using Gitcoin Passport and Next.js.
🔗 Docs - https://docs.lens.xyz/docs/public-big-query
🔗 Codebase - github.com/dabit3
By the end of this tutorial you should have a good understanding of how to use the API to query all of the available data sets.
🔗 Codebase - github.com/dabit3/gpt-fine-tuning-with-nodejs
🔗 Blog Post - nader.substack.com/p/supercharge-your-gpt-model-custom
🔗 GPT Repository Loader - github.com/mpoon/gpt-repository-loader
We'll start by creating a new project and installing the dependencies.
We'll then walk through creating each interaction from modeling the data, to uploading it to OpenAI, and testing it out.
By the end of the video you should be able to build out your own custom models.
0:00 - Introduction
1:16 - Project setup
6:10 - Creating training data
7:22 - Creating local API interface
8:25 - Uploading training data
9:30 - Creating the fine tune with the training data
10:55 - Fetching and listing the fine tunes
11:40 - Testing it out
🔗 Tutorial - dev.to/dabit3/introduction-to-execution-machine-exm-permanent-serverless-functions-3fhb
🔗 Codebase - github.com/dabit3/execution-machine
I'll start with a brief overview of both Arweave and EXM, the we'll jump into writing code by creating a Node.js application and writing all of the code from scratch.
We'll install the dependencies, configure EXM, create an initial state for the applications, and set up actions for creating, updating, and deleting items from the state.
By the end of this tutorial you should have a good understanding of what EXM is and how it works.
0:00 - Introduction
1:00 - Creating the API Key
1:15 - Initializing and configuring the Node.js project
3:08 - Configuring EXM connection
4:23 - Setting up initial state and handler function
8:51 - Reading application state
10:03 - Creating a new post
12:08 - Writing the deploy script
14:27 - Deploying and using the app
15:27 - Writing the update script
17:50 - Writing the delete script
19:52 - Writing out tests
24:24 - Wrapping up
🔗 Codebase - github.com/dabit3/biconomy-social-auth
🔗 Social Login + relayer (pay gas in other ERC20 tokens) - github.com/dabit3/biconomy-social-login-gas-relayer
🔗 Biconomy Documentation - biconomy.gitbook.io/sdk/introduction/overview
🔗 Biconomy Website - biconomy.io
0:00 - Introduction to Biconomy and account abstraction
3:31 - Scaffolding and configuring the app
5:24 - Updating the entrypoint (index.tsx)
6:25 - Creating the Auth component
8:40 - Creating the login function
10:40 - Initializing a smart account
12:05 - Creating useEffect hook
13:40 - Creating the logout function
14:35 - Creating the UI
17:46 - Running the app
18:08 - Updating global CSS
18:38 - Testing the app
21:15 - Conclusion
🔗 Example codebase: github.com/dabit3/react-native-lens-example
🔗 Lens Docs: https://docs.lens.xyz/
In this video you'll learn how to quickly build full stack mobile apps with social networking features using Expo, React Native, and Lens Protocol.
I'll start by giving a brief introduction to Lens and React Native Lens UI Kit, the library we'll be using to build our app.
From there, we'll start building our app using a new Expo app adding features like a list of profiles, profile details, comment details, themeing, and viewing other people's followers.
By the end of this video you should be able to get started building mobile apps with Expo and React Native Lens UI Kit.
0:00 - Introduction to Lens
1:52 - React Native Lens UI Kit
4:14 - The Profiles component
8:27 - Profile Details component
12:14 - The LensProvider
14:25 - Viewing other user's followers
16:55 - Viewing a list of comments on a publication
🔗 Lens Docs - https://docs.lens.xyz/
🔗 Developer Quickstart - https://docs.lens.xyz/docs/developer-quickstart
🔗 Lensverse - https://aave.notion.site/Lensverse-a5926eab1d8148eda10053af9f4e28a0
The application we'll be building is a full stack blog implementing CRUD operations (Create, Read, Update, and Delete), meaning that you will have an open, public, and composable back end that can be transferred and reused anywhere (not only in this app).
I think this is a good example as it's not too basic as to be boring, but not too complex as to be confusing. It shows how to do most of the basic things you'll need and want to understand in order to build more complex and sophisticated applications going forward.
📝 Smartweave TLDR
- Code a smart contracts in JS
- Execute arbitrary amounts of compute without additional fees
- Never have to worry about gas optimizations
- No state bloat
- Can directly process rich content / large files
- Warp offers enhancements (speed, caching, sdks
🔗 Tutorial
dev.to/dabit3/building-full-stack-applications-with-arweave-and-nextjs-28hg
🔗 Codebase
github.com/dabit3/full-stack-warp-arweave
0:00 - Introduction
01:33 - Introduction to Warp
03:15- Project setup
06:30 - Configuring Warp contract and initial state
15:19 - Configuring Warp SDK
21:30 - Creating deployment script
25:05 - Reading state from Warp
26:50 - Creating a post
28:55 - Testing it out
30:25 - Using the Sonar block explorer
31:12 - Configuring Warp on the client
34:18 - Creating posts on the client
41:00 - Updating app entrypoint and reading posts from Warp
47:00 - Updating _app.js to add navigation
48:39 - Testing it out
🔗 Docs
https://docs.lens.xyz/docs
🔗 API Playground
https://api.lens.dev/
🔗 Foundry Tutorial - https://nader.mirror.xyz/6Mn3HjrqKLhHzu2balLPv4SqE5a-oEESl4ycpRkWFsc
🔗 Foundry Cheatsheet - github.com/dabit3/foundry-cheatsheet
🔗 Foundry Book - https://book.getfoundry.sh/
🔗 Foundry GitHub - github.com/foundry-rs/foundry
We'll then spin up a new project, walk through the file structure, and create an example smart contract. From there we'll create and run tests for the contract. Next, we'll run a local test Ethereum network, deploy the contract to the network, and use cast to call end execute transactions to the test network.
We'll then deploy the to Optimism to show how to deploy to a live network. Finally, we'll create an ERC721 contract and learn how to mock users to test out various functions like minting a token, transferring a token, and burning a token.
By the end of this video, you should have a good understanding of how Foundry works and how to use it to build, test, and deploy smart contracts.
0:00 - Introduction
03:15 - Creating a new project
04:13 - Remappings
05:35 - Compiling and ABIs
06:00 - Creating the first contract
08:13 - Writing tests
14:28 - Deploying to the local network
18:33 - Using cast to make contract calls
20:59 - Deploying to Optimism
23:06 - Testing an ERC721 contract
🔗 Lens Protocol Starter - github.com/dabit3/lens-protocol-frontend
🔗 Lens Protocol Subgraph - github.com/protofire/lens-protocol-subgraph
🔗 Example codebase from tutorial - github.com/dabit3/lens-youtube-tutorial
🔗 Lens Protocol Developer Docs - https://lens.xyz/garden
We'll create a new Next.js app, install our dependencies, then query for user profiles. We'll then update the UI to list profiles and their metadata, and allow users to click on a profile and navigate to an individual profile view to see the user's posts.
Next we'll add a follow button to initialize a transaction in the smart contract to enable "follow" functionality. By the end of the video you should have a good understanding of how to use Lens protocol to build out your own applications.
0:00 - Introduction
3:33 - Project initialization and installing dependencies
4:41 - Creating the first query
12:00 - Rendering profiles in the UI
19:55 - Creating the profile page
37:49 - Following a user
44:44 - Wrapping up
🔗 Arwiki: https://arwiki.wiki/#/en/main
🔗 Arweave website: arweave.org
🔗 Bundlr docs: https://bundlr.network/
In this video you'll learn how to use Arweave and Bundlr to permanently store files like images and videos to the Arweave permaweb with a single transaction fee. We'll start by creating a new Next.js application and adding the necessary dependencies.
From there, we'll build out a form that allows users to fund their wallet. We'll then build out a file upload mechanism that lets users upload files and store them permanently to Arweave using popular low cost networks like Matic, Arbitrum, and Solana.
By the end of this video you should have a good understanding of how to build full stack applications with Bundlr and Arweave.
0:00 - Introduction to Arweave and Bundlr
2:04 - Project setup
3:00 - Connecting to Bundlr Network
7:40 - Checking the user's balance
12:10 - Managing state across pages with React context
18:00 - Configuring component state in index.js
20:40 - Creating a form to fund wallet
26:00 - Enabling file upload
32:03 - Conclusion
🔗 Codebase: github.com/dabit3/full-stack-web3
In this in depth guide you'll learn the tools, protocols, and frameworks for building full stack web3 apps, and most importantly - how to put everything together to lay the groundwork for building out any of your own ideas in the future.
Some of the tools, languages, and protocols we'll be covering include JavaScript, React, Next.js, Solidity, Hardhat, Polygon, The Graph, and Radicle.
🔗 Codebase: github.com/dabit3/cryptocoven-api
In this video you'll learn how to build a custom API from any smart contract. In our example, we'll be using an NFT smart contract from the CryptoCoven project.
We'll start by giving an overview of what The Graph is and how it works. We'll then take a look at the smart contract that we'll be building an API for and inspecting the metadata. From there, we'll use The Graph dashboard and The Graph CLI to build and deploy our subgraph and test out the queries.
By the end of this video you should have a good understanding of how to build your own APIs using The Graph, and how The Graph works.
In this stream, I'll interview the founder of Rabbithole about how they built the platform, how people are using it, where they see themselves moving forward, and his vision around what web3 means.
Rabbithole website:
rabbithole.gg
Rabbithole on Twitter:
twitter.com/rabbithole_gg
Brian Flynn on Twitter:
twitter.com/Flynnjamm
Ethereum Speed Run:
medium.com/@austin_48503/%EF%B8%8Fethereum-dev-speed-run-bd72bcba6a4c
Scaffold ETH:
github.com/scaffold-eth/scaffold-eth
Blog post:
dev.to/dabit3/10-minute-tutorial-full-stack-github-authentication-with-supabase-react-3c6b
Code:
github.com/dabit3/supabase-github-oauth
twitter.com/developer_dao
Follow Cooper on Twitter: twitter.com/Cooopahtroopa
DAO Landscape
https://coopahtroopa.mirror.xyz/_EDyn4cs9tDoOxNGZLfKL7JjLo5rGkkEfRa_a-6VEWw
How to launch a token
https://forefront.news/blog/how-to-launch-a-token
Thanks to Moritz Mentges (unsplash.com/@mphotographym) for the cover image from Unsplash.
Code
gist.github.com/dabit3/ba326e47e4882073bd6342dc1998fd16
Ceramic Docs
https://developers.ceramic.network/
IDX Docs
https://developers.idx.xyz/
Sign-in with Ethereum Proposal
twitter.com/ensdomains/status/1414618006710329347
Viral Twitter Thread
twitter.com/BrantlyMillegan/status/1402388133086367751
Decentralized Identity
github.com/dabit3/decentralized-identity-example
Vitalik's Talk at ETHCC
youtube.com/watch?v=oLsb7clrXMQ


