Awesome
๐จ Scaffold-ETH x Tailwind
Scaffold-ETH uses Ant Design out of the box for it's design system. This is perfect for quick scaffolding and fast frontend experimentation. Scaffold-ETH can also be used with any UI framework, though.
Scaffold-ETH x Tailwind uses Tailwind CSS, a utility-first CSS framework quickly becoming the default choice for new projects. It does not have ready-to-go components like modals and buttons but is packed with classes to make your own design system easily.
Scaffold-ETH x Tailwind serves as a starting for using Tailwind with Scaffold-ETH and also doubles as showing what is needed to remove Ant Design from the project. Currently, Scaffold-ETH x Tailwind has a reskinned application shell, wallet modal, dev UI, account header, light/dark theme, address input, and ether input. These are enough reskinned components in Tailwind for a user to start building the rest of their app with Tailwind CSS!
๐ Live Demo: https://scaffold-eth-tailwind.surge.sh/
<img width="1792" alt="image" src="https://user-images.githubusercontent.com/12888080/178321228-59d38958-a367-47ec-a571-2e6f58836cd9.png"> <img width="543" alt="image" src="https://user-images.githubusercontent.com/12888080/178321312-84014873-7790-4cf4-a578-5119ccfb8802.png"> <img width="406" alt="image" src="https://user-images.githubusercontent.com/12888080/167281267-1a7cb792-b273-423a-93f7-382d081a4700.png"> <img width="543" alt="image" src="https://user-images.githubusercontent.com/12888080/167281270-84679051-ab48-42ef-9bf4-5e1d6e041932.png">๐ Scaffold-ETH
everything you need to build on Ethereum! ๐
๐งช Quickly experiment with Solidity using a frontend that adapts to your smart contract:
๐โโ๏ธ Quick Start
Prerequisites: Node (v16 LTS) plus Yarn and Git
clone/fork ๐ scaffold-eth:
git clone https://github.com/stevenpslade/scaffold-eth-tailwind
install and start your ๐ทโ Hardhat chain:
cd scaffold-eth-tailwind
yarn install
yarn chain
in a second terminal window, start your ๐ฑ frontend:
cd scaffold-eth-tailwind
yarn start
in a third terminal window, ๐ฐ deploy your contract:
cd scaffold-eth-tailwind
yarn deploy
๐ Edit your smart contract YourContract.sol
in packages/hardhat/contracts
๐ Edit your frontend App.jsx
in packages/react-app/src
๐ผ Edit your deployment scripts in packages/hardhat/deploy
๐ฑ Open http://localhost:3000 to see the app
๐ Documentation
Documentation, tutorials, challenges, and many more resources, visit: docs.scaffoldeth.io
๐ญ Learning Solidity
๐ Read the docs: https://docs.soliditylang.org
๐ Go through each topic from solidity by example editing YourContract.sol
in ๐ scaffold-eth
๐ง Learn the Solidity globals and units
๐ Buidl
Check out all the active branches, open issues, and join/fund the ๐ฐ BuidlGuidl!
-
๐ซ Extend the NFT example to make a "buyer mints" marketplace
-
โ๏ธ Learn how ecrecover works
-
๐ฉโ๐ฉโ๐งโ๐ง Build a multi-sig that uses off-chain signatures
-
โ๏ธ Learn how a simple DEX works
-
๐ฆ Ape into learning!
๐ P.S.
๐ You need an RPC key for testnets and production deployments, create an Alchemy account and replace the value of ALCHEMY_KEY = xxx
in packages/react-app/src/constants.js
with your new key.
๐ฃ Make sure you update the InfuraID
before you go to production. Huge thanks to Infura for our special account that fields 7m req/day!
๐๐จ Speedrun Ethereum
Register as a builder here and start on some of the challenges and build a portfolio.
๐ฌ Support Chat
Join the telegram support chat ๐ฌ to ask questions and find others building with ๐ scaffold-eth!
๐ Please check out our Gitcoin grant too!