Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dayana0425/hola-mundo-starter

Multi-chain starter project to get building quickly on Ethereum & Polygon. Bilingual Comments/Instructions in EN & ES.
https://github.com/dayana0425/hola-mundo-starter

dapp ethereum goerli hackathon-starter mumbai polygon

Last synced: 3 days ago
JSON representation

Multi-chain starter project to get building quickly on Ethereum & Polygon. Bilingual Comments/Instructions in EN & ES.

Awesome Lists containing this project

README 

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

* [Clic para Español 🌈](#spanish)

* [Click for English 🌈](#english)

---

## Español - Translations by @0xyNaMu 🌈

![Figure 1](./images/holamundodapp.png)

---



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: 

 - Goerli: https://goerli.etherscan.io/

 - Polygon Mumbai: https://mumbai.polygonscan.com/

#### Despliegue:

 - Vercel: https://vercel.com/

 

 ---



# 🏄‍♂️ Inicio Rápido



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

* [Node.js](https://nodejs.org/en/) 

* [Yarn](https://classic.yarnpkg.com/en/docs/install/)

* [Git](https://git-scm.com/downloads)



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



```bash

node -v

npm -v

yarn -v

git --version

```

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

* [Metamask](https://metamask.io/) 

   * 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](https://www.alchemy.com/)

  * Genera una clave api para goerli & mumbai.

  * Guarda tus claves api y enlances en tus notas.

* [Etherscan](https://etherscan.io/apis)

  * Genera una clave api.



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

* 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/



### Fondea tus Cuentas con tokens de prueba:

* [Georli Faucet](https://goerlifaucet.com/)

* [Polygon Faucet (Mumbai Network)](https://faucet.polygon.technology/)



---



### 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](./images/fork.png)

* Segundo, abre tu terminal y ejecuta el siguiente comando con los nombres que correspondan en tu caso.

  

```bash

git clone https://github.com//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

```bash

cd /hardhat

yarn install

```



* Segundo: Abre otra ventana de terminal para instalar la dependencias del front-end

```bash

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](https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app)

---



### ❓ ¿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](./images/holamundodapp.png)



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: 

- Goerli: https://goerli.etherscan.io/

- Polygon Mumbai: https://mumbai.polygonscan.com/

#### Deployment:

- Vercel: https://vercel.com/



---



# 🏄‍♂️ Quick Start

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



* [Node.js](https://nodejs.org/en/) 

* [Yarn](https://classic.yarnpkg.com/en/docs/install/)

* [Git](https://git-scm.com/downloads)



### You can check by running these commands on your terminal



```bash

node -v

npm -v

yarn -v

git --version

```



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

* [Metamask](https://metamask.io/) 

   * 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](https://www.alchemy.com/)

  * Generate an api key for goerli & mumbai.

  * Save your api keys/urls in your notes.

* [Etherscan](https://etherscan.io/apis)

  * Generate an api key.

  * Save your api key in your notes.



### Add Testnet Networks for Goerli y Polygon Mumbai on Metamask:

* 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/



### Fund Your Account(s):

* [Georli Faucet](https://goerlifaucet.com/)

* [Polygon Faucet (Mumbai Network)](https://faucet.polygon.technology/)



---

### 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](./images/fork.png)

* Second, open your terminal and run the following command with the correct inputs.



```bash

git clone https://github.com//

```

---

### 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`:



```bash

cd /hardhat

yarn install

```

* Open another terminal window, navigate inside of the next-app folder and run `yarn install`

```bash

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](https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app)

---



### ❓ 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