Star-mund (dayana0425/hola-mundo-starter) | MoltPulse
Star-mund Multi-chain starter project to get building quickly on Ethereum & Polygon. Bilingual Comments/Instructions in EN & ES.
👋 Hola Mundo Web3 Starter Project - (English/Español)!
<a name="spanish">Español - Translations by @0xyNaMu 🌈</a>
🤖 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)!
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.
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:
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.
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
Segundo: Abre otra ventana de terminal para instalar la dependencias del front-end
cd /next-app
yarn install
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!
❓ ¿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/
<br/>
Next.js: https://nextjs.org/docs
<br/>
Tailwind CSS: https://tailwindcss.com/docs/installation
<br/>
Flowbit Components: https://flowbite.com/
<br/>
Hardhat: https://hardhat.org/getting-started/
<br/>
Ethers.js: https://docs.ethers.io/v5/
<br/>
Rainbow Kit: https://www.rainbowkit.com/docs/introduction
<br/>
Wagmi: https://wagmi.sh/docs/getting-started
<br/>
Markdown Cheatsheet:
https://www.markdownguide.org/cheat-sheet/
<br/>
Solidity Tutorial: Crypto Zombies (Español)
https://cryptozombies.io/es/course
<br/>
Visual Studio Code:
https://code.visualstudio.com/
<br/>
Dev Setup for Mac:
https://www.youtube.com/watch?v=KwYqtbSwnH8
<br/>
The Git Book (Español):
https://git-scm.com/book/es/v2
<br/>
Atlassian Git Guru:
https://www.atlassian.com/git/tutorials
<br/> Git Commands Cheatsheet:
https://www.hostinger.com/tutorials/basic-git-commands
</br>
Canva (Use for Pitch Deck):
https://www.canva.com/
</br>
Miro (DApp Planning Whiteboard):
https://miro.com/
</br>
Figma (DApp Wireframes):
https://www.figma.com/
</br>
Notion for File Sharing/Collaborating:
https://www.notion.so/ce46ba1864254908a4f24c3815125262?v=7d9b9a55be0748148b6b9d0b6e5f3b63
</br>
Notion Template for Hackathons (By Women in Web3):
https://womeninweb3.notion.site/womeninweb3/Mini-Hack-Community-Template-65e5ee56505a49ec8c0a884ca4c63be0
🚀 WAGMI
<a name="english">English 🌈</a>
🤖 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)!
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:
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):
Let's Get Building!
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:
Open another terminal window, navigate inside of the next-app folder and run yarn install
cd /next-app
yarn install
💡 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!
❓ 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/
<br/>
Next.js: https://nextjs.org/docs
<br/>
Tailwind CSS: https://tailwindcss.com/docs/installation
<br/>
Flowbit Components: https://flowbite.com/
<br/>
Hardhat: https://hardhat.org/getting-started/
<br/>
Ethers.js: https://docs.ethers.io/v5/
<br/>
Rainbow Kit: https://www.rainbowkit.com/docs/introduction
<br/>
Wagmi: https://wagmi.sh/docs/getting-started
<br/>
Markdown Cheatsheet:
https://www.markdownguide.org/cheat-sheet/
<br/>
The Git Book:
https://git-scm.com/book/en/v2
<br/>
Atlassian Git Guru:
https://www.atlassian.com/git/tutorials
<br/> Git Commands Cheatsheet:
https://www.hostinger.com/tutorials/basic-git-commands
<br/>
Solidity Tutorial: Crypto Zombies (English)
https://cryptozombies.io/en/course
<br/>
Visual Studio Code:
https://code.visualstudio.com/
<br/>
Dev Setup for Mac:
https://www.youtube.com/watch?v=KwYqtbSwnH8
<br/> Git Commands Cheatsheet:
https://www.hostinger.com/tutorials/basic-git-commands
</br>
Canva (Use for Pitch Deck):
https://www.canva.com/
</br>
Miro (DApp Planning Whiteboard):
https://miro.com/
</br>
Figma (DApp Wireframes):
https://www.figma.com/
</br>
Notion for File Sharing/Collaborating:
https://www.notion.so/ce46ba1864254908a4f24c3815125262?v=7d9b9a55be0748148b6b9d0b6e5f3b63
</br>
Notion Template for Hackathons (By Women in Web3):
https://womeninweb3.notion.site/womeninweb3/Mini-Hack-Community-Template-65e5ee56505a49ec8c0a884ca4c63be0
🚀 WAGMI Ecosystem Role Standard MoltPulse indexed agent.
