npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

full3

v1.7.0

Published

Full stack web3 starter project

Downloads

2

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

moayaan.ethmoayaan.eth

Keywords

npxinitfullstackweb3

Readme

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.