LiveTheLifeTV
  • The Future of Photography?
  • LTL Art Collective
    • Auction House
      • Photogrammetry
      • GVO Premint
      • MetaVerse
    • Culture Code
      • Vision / Mission
      • The Bear Market
    • Dream Team
      • Dimitri Daniloff
      • Official Links
  • LTL Workstreams
    • The Summary ⌐◨-◨
    • Creative Design ⌐◧-◧
      • Brand Guide
      • Experimental
        • The Blind Mint
        • Oncyber 1/1
    • Engineering ⌐◫-◫
      • GVO Free Mint
      • Auction House
      • Experimental
        • Play Grounds
          • AllianceDAO
          • DAOhaus
        • Archived (TBD)
          • NFT Component
          • Dynamic Rarity
          • Bankless Loans
          • ERC 1271
          • Optimism
          • Tokenomics
          • Charged Particles
          • Fair Launch
          • Gitflow
          • Audit
          • ENS polygon
        • Web3 Travel
        • Lens Protocol
        • NFT LootBox
        • NFT Staking
    • Operations ⌐◪-◪
      • Governance
      • SnapShot
      • Discord TBD
    • Treasury & Legal ⌐Ξ-Ξ
      • Onchain LLCs
      • Web3 Grants
      • Fundraising
      • JuiceBox
      • Pre-Seed
      • Fairmint
      • Web3 VC
      • License
    • Partnerships ⌐◩-◩
      • TDM Drops
      • Spatial
      • Token Proof
      • MF + HaLo
      • Whitewall
      • Art Link
      • Anima Supply AR
      • One Tree Planted
      • Klima
    • Marketing & PR ⌐◮-◮
      • MPR Strategy
      • FAQ by Dyno
    • Community Vibes ⌐◭-◭
      • Degen Vibes
        • Degen Vibes Proposal
        • Snapshot Delegate
        • The NounsDAO
      • CC Monthly #01
      • Collectors Club
      • IRL Wine Tasting
      • IRL Experiences
  • LTL Tool Box
    • Creator
      • New To NFTs?
      • Davinci Resolve
      • Capture One
      • Photogrammetry
        • MetaShape
        • ZBrush
        • Capture Reality
        • Blender 3D
      • IRL Workshop
    • Frontend
      • Basics
        • NextJS
        • Tailwind
        • SASS SCSS
        • Bun
        • Vite / Rainbow
        • Postgres
        • ImageKit
        • Vercel
        • Kafka
        • Factoria
      • Web2
        • Ghost
        • Shopify
        • Webflow
    • Backend
      • Fleek
      • Spheron
      • TableLand
      • FileBase
      • Arweave
      • Prisma
      • Sanity GROQ
      • PlanetScale
      • HandShake
    • Contracts
      • Manifold
      • AsyncArt
      • Niftykit
      • Buildship
      • VerisArt
      • Hashlips
      • Bunzz
      • BuildSpace
      • Foundry
    • NFT SDKs
      • Zora V3
      • Rarible
      • Seaport
      • Foundation
      • SudoSwap
    • NFT APIs
      • Reservoir
      • SimpleHash
      • Alchemy
      • Moralis
      • OpenSea
      • NFTport
Powered by GitBook
On this page
  1. LTL Tool Box

Frontend

PreviousIRL WorkshopNextBasics

Last updated 2 years ago

We can imagine web3 as a car and web3 libraries/DApps are the car’s chassis, smart contracts/blockchain are the internal hardware components, wallets act as the driver’s license, and the node is the fuel that is needed to run the car.

Most “backends” to your web3/blockchain applications are going to be built with a framework like Hardhat, Brownie, or Foundry. Our frontends are going to use anything and everything we’ve used in the web2 space. HTML, JavaScript, CSS, and frameworks like NextJS, React, and, TypeScript.

Whenever we want to read data from a blockchain, call a function, or make a transaction, we need to connect to the blockchain network. If we send a transaction, we need to send the signed transaction to one blockchain node so that it can send it out to all the other blockchain nodes in the network. You might have used an RPC URL from Alchemy, Infura, or Moralis Speedy Nodes in your blockchain applications before. These are all “node-as-a-service” providers, and give us an HTTP endpoint to send requests to a blockchain node. The same happens with cryptocurrency wallets, our Metamasks have a connection to a blockchain node built-in. In fact, if you go to your Metamask “networks” tab, you can see the exact RPC URL your Metamask is using!

We are working with NextJS for all of these because ReactJS is the most popular frontend framework on the planet right now, and NextJS is built on top of it, and more user-friendly.

LogoGitHub - unbanksytv/dapptools-starter-kitGitHub
LogoGitHub - unbanksytv/template_eth_contractsGitHub
LogoGitHub - paulrberg/create-eth-app: Create Ethereum-powered apps with one commandGitHub
LogoFullStack Web3 — Everything You Need to KnowMedium
LogoGitHub - PatrickAlphaC/full-stack-web3-metamask-connectorsGitHub
LogoGitHub - ethereum-boilerplate/ethereum-boilerplate: The ultimate full-stack Ethereum Dapp Boilerplate which gives you maximum flexibility and speed. Feel free to fork and contribute. Although this repo is called "Ethereum Boilerplate" it works with any EVM system and even Solana support is coming soon! Happy BUIDL!👷‍♂️GitHub
LogoMoralis » The Ultimate Web3 Development PlatformMoralis » The Ultimate Web3 Development Platform
Web3 From Zero - Lesson 1
LogoGitHub - scaffold-eth/scaffold-eth: 🏗 forkable Ethereum dev stack focused on fast product iterationsGitHub