Skip to content

FULL STACK WEB3 Starter Template built on React.js, Vite, Hardhat and Thirdweb

Notifications You must be signed in to change notification settings

moayaan1911/full3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

FULL3 Setup (Frontend & Backend) - Powered by React, Hardhat, Tailwind, and Thirdweb

INSTALLATION

  • First Install as global dependency: npm install -g full3
  • Initialize new project: npx full3

About the Starter

This is the app setup for a FULL STACK WEB3 project created by the FULL3 package. The FULL3 package is powered by the following technologies:

  • React: A JavaScript library for building user interfaces. It provides the foundation for creating interactive and dynamic UI components in the frontend of the web3 project.

  • Hardhat: A popular development framework for Ethereum projects. Hardhat offers a set of powerful features for smart contract development and deployment, making it an essential tool for handling Ethereum interactions in the backend.

  • Tailwind CSS: A utility-first CSS framework that provides a customizable set of CSS classes. Tailwind CSS enables efficient and rapid styling of components and user interfaces in the project's frontend.

  • Thirdweb: A platform that offers services and tools for developing web3 applications. Thirdweb provides a Software Development Kit (SDK) and related packages, such as @thirdweb-dev/react, for specific functionalities, making it a valuable component in building web3 applications.

The FULL3 package simplifies the setup process for a full-stack web3 project. Users can easily initialize this project in their desired directory by running npx full3 in the command line. The package provides both frontend and backend configurations, enabling users to seamlessly interact with Ethereum and Ethereum-like networks. It comes with essential dependencies and devDependencies for a smooth development experience and provides deployment scripts for various networks, making it a powerful tool for building decentralized applications.

How to Run (Frontend)

  • Sign up on the Thirdweb dashboard to achieve an API key (https://thirdweb.com/dashboard/settings/api-keys).
  • Fill in the API KEY in the main.jsx clientId.
  • Run using yarn dev or npm run dev.
  • Read and write the contract methods.
  • Don't forget to add your URL in allowance in the Thirdweb dashboard.

Scripts (Frontend)

  • npm run dev: Start the Vite development server.
  • npm run build: Build the project using Vite.
  • npm run lint: Run ESLint to check for code quality and enforce coding standards.
  • npm run preview: Start a Vite server to preview the built project.

How to Run (Backend)

  • Create a .env file.
  • Fill it with the same details as mentioned in .env.example.
  • Uncomment the network and etherscan for the network you are going to use.
  • Run the Hardhat project using yarn or npm command.

Deployment Scripts

  • npm run deploy: Deploy the project using the Hardhat framework to the Hardhat network.
  • npm run deploy-mumbai: Deploy the project to the Mumbai network.
  • npm run deploy-mainnet: Deploy the project to the Mainnet network.
  • npm run deploy-sepolia: Deploy the project to the Sepolia network.
  • npm run deploy-bsc: Deploy the project to the Binance Smart Chain (BSC) network.
  • npm run deploy-bsctestnet: Deploy the project to the BSC Testnet.
  • npm run deploy-zkevm: Deploy the project to the ZK-EVM network.
  • npm run deploy-zkevmtestnet: Deploy the project to the ZK-EVM Testnet.
  • npm run deploy-optimism: Deploy the project to the Optimism network.
  • npm run deploy-eth: Deploy the project to the Ethereum (ETH) network.
  • npm run deploy-arbitrum: Deploy the project to the Arbitrum network.

Other Useful Commands

  • npm run node: Start a local Hardhat node for development and testing purposes.
  • npm run help: Get help on Hardhat commands and usage.
  • npm run networks: List all available networks for deployment verification.
  • npm run coverage: Generate code coverage reports for the project.

Using Yarn

To use Yarn for running the commands, replace npm run with yarn in the above command list. For example:

  • yarn dev: Start the Vite development server.
  • yarn deploy: Deploy the project using the Hardhat framework to the Hardhat network.

For other commands like yarn build, yarn lint, yarn preview, yarn node, yarn help, yarn networks, and yarn coverage, simply replace npm run with yarn as well.

Remember to ensure that you have Yarn installed on your system before using Yarn commands.

Dependencies

Dev Dependencies

Please note that the descriptions provided are just brief summaries of each package's functionality. For more detailed information about each package, you can visit their respective websites linked above.

About

FULL STACK WEB3 Starter Template built on React.js, Vite, Hardhat and Thirdweb

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published