Un proyecto inicial para configurar rápidamente la creación de tu DApp en Ethereum y Polygon. Este proyecto es considerado "multi-chain" porque es compatible con las redes de prueba de Goerli y Mumbai (Las redes de prueda de Ethereum y Polygon).
- Typescript
- Next.js
- Tailwind CSS
- Hardhat
- Ethers.js
- Rainbow Wallet
- WAGMI
- Goerli: https://goerli.etherscan.io/
- Polygon Mumbai: https://mumbai.polygonscan.com/
- Vercel: https://vercel.com/
Antes de clonar este proyecto, asegúrate de tener instalado lo siguiente en tu máquina (en este orden)!
node -v
npm -v
yarn -v
git --version
- Metamask
- IMPORTANTE: se recomienda crear una wallet solamente para desarrollo, ¡evita usar tu wallet normal!
- Guarda la llave privada de esta wallet de desarrollo en tus notas.
- Alchemy
- Genera una clave api para goerli & mumbai.
- Guarda tus claves api y enlances en tus notas.
- Etherscan
- Genera una clave api.
- Cómo agregar redes de prueba de Ethereum: https://devtonight.com/articles/metamask-testnet-wallet-setup-for-blockchain-development
- Cómo agregar Polygon Mumbai Testnet en Metamask: https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/
- Primero,
Fork
este proyecto haciendo clic en el botón deFork
en la esquina superior derecha de la página del repositorio. - Segundo, abre tu terminal y ejecuta el siguiente comando con los nombres que correspondan en tu caso.
git clone https://github.com/<YOUR-USERNAME>/hola-mundo-starter
Instala todas las dependencias del proyecto 👷 cambiando los directorios a hardhart/
y luego, next-app/
y ejecutando yarn install
:
- Primero: En una ventana de terminal, instala las dependencias para el desarollo de smart contracts
cd /hardhat
yarn install
- Segundo: Abre otra ventana de terminal para instalar la dependencias del front-end
cd /next-app
yarn install
- Listo! 💘
Tendrás dos ventanas de terminal abiertas, una para su front-end y otra para el desarrollo de smart-contract
- Ve a hardhat/README.md para obtener más información de los comandos a ejecutar para compilar/desplegar smart contracts.
- Ve a next-app/README.md para obtener más información de los comandos a ejecutar para ejecutar tu interfaz (front-end)
-
🔏 Edita tu smart contract
HolaMundo.sol
enhardhat/contracts/
-
📝 Edita tu frontend
index.tsx
ennext-app/pages/
-
💼 Edita tus scripts de despliegue
deployGoerli.ts
ydeployMumbai.ts
enhardhat/scripts/
- Mándame un mensaje en twitter o telegram: @hello-dayana
- Abre un Github Issue
- Crea un Pull Request
Solidity: https://docs.soliditylang.org/en/v0.8.15/
Next.js: https://nextjs.org/docs
Tailwind CSS: https://tailwindcss.com/docs/installation
Flowbit Components: https://flowbite.com/
Hardhat: https://hardhat.org/getting-started/
Ethers.js: https://docs.ethers.io/v5/
Rainbow Kit: https://www.rainbowkit.com/docs/introduction
Wagmi: https://wagmi.sh/docs/getting-started
Markdown Cheatsheet:
https://www.markdownguide.org/cheat-sheet/
Solidity Tutorial: Crypto Zombies (Español)
https://cryptozombies.io/es/course
Visual Studio Code:
https://code.visualstudio.com/
Dev Setup for Mac:
https://www.youtube.com/watch?v=KwYqtbSwnH8
The Git Book (Español):
https://git-scm.com/book/es/v2
Atlassian Git Guru:
https://www.atlassian.com/git/tutorials
Git Commands Cheatsheet:
https://www.hostinger.com/tutorials/basic-git-commands
Canva (Use for Pitch Deck):
https://www.canva.com/
Miro (DApp Planning Whiteboard):
https://miro.com/
Figma (DApp Wireframes):
https://www.figma.com/
Notion for File Sharing/Collaborating:
https://www.notion.so/ce46ba1864254908a4f24c3815125262?v=7d9b9a55be0748148b6b9d0b6e5f3b63
Notion Template for Hackathons (By Women in Web3):
https://womeninweb3.notion.site/womeninweb3/Mini-Hack-Community-Template-65e5ee56505a49ec8c0a884ca4c63be0
A multi-chain starter project to get you quickly setup for building your Dapp on Ethereum and Polygon! (Project interacts with smart contracts deployed to Goerli & Polygon Mumbai test networks).
- Typescript
- Next.js
- Tailwind CSS
- Hardhat
- Ethers.js
- Rainbow Wallet
- WAGMI
- Goerli: https://goerli.etherscan.io/
- Polygon Mumbai: https://mumbai.polygonscan.com/
- Vercel: https://vercel.com/
Before you clone this project make sure you have the following installed on your machine (in this order)!
node -v
npm -v
yarn -v
git --version
- Metamask
- IMPORTANT: It is recommended you create a wallet only to be used for development only, avoid using your regular wallet!
- Save your private keys / seed phrase in your notes.
- Alchemy
- Generate an api key for goerli & mumbai.
- Save your api keys/urls in your notes.
- Etherscan
- Generate an api key.
- Save your api key in your notes.
- How to add Ethereum Testnets: https://devtonight.com/articles/metamask-testnet-wallet-setup-for-blockchain-development
- How to add Polygon Mumbai Testnet: https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/
- First, fork this project by clicking the fork button in the upper right hand corner of the repo page.
- Second, open your terminal and run the following command with the correct inputs.
git clone https://github.com/<YOUR-USERNAME>/<YOUR-REPOSITORY-NAME>
Install all project 👷 dependencies by changing directories into hardhart/
and then, next-app/
and running yarn install
:
- On a terminal window open, navigate inside of the hardhat folder and run
yarn install
:
cd /hardhat
yarn install
- Open another terminal window, navigate inside of the next-app folder and run
yarn install
cd /next-app
yarn install
- Ready! 💘
💡 You will have two terminal windows open: One for your front-end & one for smart contract development.
- Navigate to hardhat/README.md for more information on commands to run for compiling/deploying smart contracts.
- Navigate to next-app/README.md for more information on commands to run for running your front-end
-
🔏 Edit your smart contract
HolaMundo.sol
inhardhat/contracts/
-
📝 Edit your frontend
index.tsx
innext-app/pages/
-
💼 Edit your deployment scripts
deployGoerli.ts
anddeployMumbai.ts
inhardhat/scripts/
- Message me on twt or telegram: @hello-dayana
- Open a Github Issue
- Create a Pull Request
Solidity: https://docs.soliditylang.org/en/v0.8.15/
Next.js: https://nextjs.org/docs
Tailwind CSS: https://tailwindcss.com/docs/installation
Flowbit Components: https://flowbite.com/
Hardhat: https://hardhat.org/getting-started/
Ethers.js: https://docs.ethers.io/v5/
Rainbow Kit: https://www.rainbowkit.com/docs/introduction
Wagmi: https://wagmi.sh/docs/getting-started
Markdown Cheatsheet:
https://www.markdownguide.org/cheat-sheet/
The Git Book:
https://git-scm.com/book/en/v2
Atlassian Git Guru:
https://www.atlassian.com/git/tutorials
Git Commands Cheatsheet:
https://www.hostinger.com/tutorials/basic-git-commands
Solidity Tutorial: Crypto Zombies (English)
https://cryptozombies.io/en/course
Visual Studio Code:
https://code.visualstudio.com/
Dev Setup for Mac:
https://www.youtube.com/watch?v=KwYqtbSwnH8
Git Commands Cheatsheet:
https://www.hostinger.com/tutorials/basic-git-commands
Canva (Use for Pitch Deck):
https://www.canva.com/
Miro (DApp Planning Whiteboard):
https://miro.com/
Figma (DApp Wireframes):
https://www.figma.com/
Notion for File Sharing/Collaborating:
https://www.notion.so/ce46ba1864254908a4f24c3815125262?v=7d9b9a55be0748148b6b9d0b6e5f3b63
Notion Template for Hackathons (By Women in Web3):
https://womeninweb3.notion.site/womeninweb3/Mini-Hack-Community-Template-65e5ee56505a49ec8c0a884ca4c63be0