Skip to content

Latest commit

 

History

History
331 lines (286 loc) · 10.3 KB

README.md

File metadata and controls

331 lines (286 loc) · 10.3 KB
Raw

👋 Hola Mundo Web3 Starter Project - (English/Español)!

Español - Translations by @0xyNaMu 🌈

Figure 1

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).

🤖 Stack De Tech e Información De Redes

Stack De Tech utilizado:

  • Typescript
  • Next.js
  • Tailwind CSS
  • Hardhat
  • Ethers.js
  • Rainbow Wallet
  • WAGMI

Redes de Blockchain:

Despliegue:

🏄‍♂️ Inicio Rápido

Antes de clonar este proyecto, asegúrate de tener instalado lo siguiente en tu máquina (en este orden)!

Puedes verificar ejecutando estos comandos en tu terminal para revisar si ya los tienes instalados:

node -v
npm -v
yarn -v
git --version

Crea una wallet de desarollo con Metamask, una cuenta de Alchemy y una de Etherscan

  • 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.

Agrega las redes Testnet para Goerli y Polygon Mumbai en Metamask:

Fondea tus Cuentas con tokens de prueba:

Vamos a Construir!

  • Primero, Fork este proyecto haciendo clic en el botón de Fork en la esquina superior derecha de la página del repositorio. Figure 2
  • 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)

🚧 Logística

  • 🔏 Edita tu smart contract HolaMundo.sol en hardhat/contracts/

  • 📝 Edita tu frontend index.tsx en next-app/pages/

  • 💼 Edita tus scripts de despliegue deployGoerli.ts y deployMumbai.ts en hardhat/scripts/

🚀 Despliega tu front-end en Vercel!

Clic Para Desplegar

❓ ¿Tienes un problema o ideas de mejora o necesitas ayuda?

  • Mándame un mensaje en twitter o telegram: @hello-dayana
  • Abre un Github Issue
  • Crea un Pull Request

📚 Recursos

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

🚀 WAGMI

English 🌈

Figure 1

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).

🤖 Tech Stack & Network Info

Tech Stack Used:

  • Typescript
  • Next.js
  • Tailwind CSS
  • Hardhat
  • Ethers.js
  • Rainbow Wallet
  • WAGMI

Networks:

Deployment:

🏄‍♂️ Quick Start

Before you clone this project make sure you have the following installed on your machine (in this order)!

You can check by running these commands on your terminal

node -v
npm -v
yarn -v
git --version

Create a Dev Wallet, Alchemy Account, and Etherscan Account:

  • 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.

Add Testnet Networks for Goerli y Polygon Mumbai on Metamask:

Fund Your Account(s):

Let's Get Building!

  • First, fork this project by clicking the fork button in the upper right hand corner of the repo page. Figure 2
  • 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

🚧 Logistics

  • 🔏 Edit your smart contract HolaMundo.sol in hardhat/contracts/

  • 📝 Edit your frontend index.tsx in next-app/pages/

  • 💼 Edit your deployment scripts deployGoerli.ts and deployMumbai.ts in hardhat/scripts/

🚀 Deploy your front-end to Vercel!

Click to Deploy

❓ Have an Issue or Improvement Ideas or Need Help?

  • Message me on twt or telegram: @hello-dayana
  • Open a Github Issue
  • Create a Pull Request

📚 Resources

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

🚀 WAGMI