{"id":25002334,"url":"https://github.com/devbambino/challenge-0-simple-nft","last_synced_at":"2025-03-29T21:14:31.869Z","repository":{"id":200857608,"uuid":"700435657","full_name":"devbambino/challenge-0-simple-nft","owner":"devbambino","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-04T15:52:20.000Z","size":1437,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T21:51:28.098Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devbambino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-04T15:36:25.000Z","updated_at":"2023-10-04T15:52:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"08df4df6-ee86-4633-ba38-a316888e3fd1","html_url":"https://github.com/devbambino/challenge-0-simple-nft","commit_stats":null,"previous_names":["devbambino/challenge-0-simple-nft"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbambino%2Fchallenge-0-simple-nft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbambino%2Fchallenge-0-simple-nft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbambino%2Fchallenge-0-simple-nft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbambino%2Fchallenge-0-simple-nft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devbambino","download_url":"https://codeload.github.com/devbambino/challenge-0-simple-nft/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246243552,"owners_count":20746311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-04T21:50:33.803Z","updated_at":"2025-03-29T21:14:31.849Z","avatar_url":"https://github.com/devbambino.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚩 Challenge #0: 🎟 Simple NFT Example\n\n![readme-0](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/375b7797-6839-43cd-abe5-fca94d88e300)\n\n🎫 Create a simple NFT to learn basics of 🏗 Scaffold-ETH 2. You'll use [👷‍♀️ HardHat](https://hardhat.org/getting-started/) to compile and deploy smart contracts. Then, you'll use a template React app full of important Ethereum components and hooks. Finally, you'll deploy an NFT to a public network to share with friends! 🚀\n\n🌟 The final deliverable is an app that lets users purchase and transfer NFTs. Deploy your contracts to a testnet, then build and upload your app to a public web server. Submit the url on [SpeedRunEthereum.com](https://speedrunethereum.com)!\n\n💬 Meet other builders working on this challenge and get help in the [Challenge 0 Telegram](https://t.me/+Y2vqXZZ_pEFhMGMx)!\n\n## Checkpoint 0: 📦 Environment 📚\n\nBefore you begin, you need to install the following tools:\n\n- [Node (v18 LTS)](https://nodejs.org/en/download/)\n- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))\n- [Git](https://git-scm.com/downloads)\n\nThen download the challenge to your computer and install dependencies by running:\n\n```sh\ngit clone https://github.com/scaffold-eth/se-2-challenges.git challenge-0-simple-nft\ncd challenge-0-simple-nft\ngit checkout challenge-0-simple-nft\nyarn install\n```\n\n\u003e in the same terminal, start your local network (a blockchain emulator in your computer):\n\n```sh\nyarn chain\n```\n\n\u003e in a second terminal window, 🛰 deploy your contract (locally):\n\n```sh\ncd challenge-0-simple-nft\nyarn deploy\n```\n\n\u003e in a third terminal window, start your 📱 frontend:\n\n```sh\ncd challenge-0-simple-nft\nyarn start\n```\n\n📱 Open http://localhost:3000 to see the app.\n\n---\n\n## Checkpoint 1: ⛽️ Gas \u0026 Wallets 👛\n\n\u003e ⛽️ You'll need to get some funds from the faucet for gas.\n\n![gas\u0026wallet](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/912d0d4b-db34-49d3-bd7d-7ca0ab18eb66)\n\n\u003e 🦊 At first, **don't** connect MetaMask. If you are already connected, click **Disconnect**:\n\n\u003cp\u003e\n  \u003cimg src=\"https://github.com/scaffold-eth/se-2-challenges/assets/80153681/2c7a1e40-50ad-4c20-ba3e-a56eff4b892b\" width=\"33%\" /\u003e\n  \u003cimg src=\"https://github.com/scaffold-eth/se-2-challenges/assets/80153681/1bcf9752-e8ae-4db6-a0a6-5dc774abe46c\" width=\"33%\" /\u003e\n\u003c/p\u003e\n\n\u003e 🔥 We'll use burner wallets on localhost.\n\n\u003e 👛 Explore how burner wallets work in 🏗 Scaffold-ETH 2 by opening a new incognito window and navigate to http://localhost:3000. You'll notice it has a new wallet address in the top right. Copy the incognito browser's address and send localhost test funds to it from your first browser (using the **Faucet** button in the bottom left):\n\n![icognito\u0026webBrowser](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/fd191447-a31f-4c03-a36f-936bfb70c2a1)\n\n\u003e 👨🏻‍🚒 When you close the incognito window, the account is gone forever. Burner wallets are great for local development but you'll move to more permanent wallets when you interact with public networks.\n\n---\n\n## Checkpoint 2: 🖨 Minting\n\n\u003e ✏️ Mint some NFTs! Click the **MINT NFT** button in the `My NFTs` tab.\n\n![image](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/74cf02f2-4c1b-4278-9841-f19f668e0b1e)\n\n👀 You should see your NFTs start to show up:\n\n![image](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/63dabceb-ad42-4c09-8e5d-a0139939e32d)\n\n👛 Open an incognito window and navigate to http://localhost:3000\n\n🎟 Transfer an NFT to the incognito window address using the UI:\n\n![image](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/3b92fb50-d43f-48a8-838c-c45c443b0b71)\n\n👛 Try to mint an NFT from the incognito window.\n\n\u003e Can you mint an NFT with no funds in this address? You might need to grab funds from the faucet to pay for the gas!\n\n🕵🏻‍♂️ Inspect the `Debug Contracts` tab to figure out what address is the owner of YourCollectible?\n\n🔏 You can also check out your smart contract `YourCollectible.sol` in `packages/hardhat/contracts`.\n\n💼 Take a quick look at your deploy script `00_deploy_your_contract.js` in `packages/hardhat/deploy`.\n\n📝 If you want to edit the frontend, navigate to `packages/nextjs/pages` and open the specific page you want to modify. For instance: `myNFTs.tsx`.\n\n---\n\n## Checkpoint 3: 💾 Deploy your contract! 🛰\n\n🛰 Ready to deploy to a public testnet?!?\n\n\u003e Change the defaultNetwork in `packages/hardhat/hardhat.config.ts` to `sepolia`.\n\n![chall-0-hardhat-config](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/f94b47d8-aa51-46eb-9c9e-7536559a5d45)\n\n🔐 Generate a deployer address with `yarn generate`. This creates a unique deployer address and saves the mnemonic locally.\n\n\u003e This local account will deploy your contracts, allowing you to avoid entering a personal private key.\n\n![chall-0-yarn-generate](https://github.com/scaffold-eth/se-2-challenges/assets/2486142/133f5701-e575-4cc2-904f-cdc83ae86d94)\n\n👩‍🚀 Use `yarn account` to view your deployer account balances.\n\n![chall-0-yarn-account](https://github.com/scaffold-eth/se-2-challenges/assets/2486142/c34df8c9-9793-4a76-849b-170fae7fd0f0)\n\n⛽️ You will need to send ETH to your deployer address with your wallet, or get it from a public faucet of your chosen network.\n\n\u003e Some popular faucets are [https://sepoliafaucet.com/](https://sepoliafaucet.com/) and [https://www.infura.io/faucet/sepolia](https://www.infura.io/faucet/sepolia)\n\n\u003e ⚔️ Side Quest: Keep a 🧑‍🎤 [punkwallet.io](https://punkwallet.io) on your phone's home screen and keep it loaded with testnet eth. 🧙‍♂️ You'll look like a wizard when you can fund your deployer address from your phone in seconds.\n\n🚀 Deploy your NFT smart contract with `yarn deploy`.\n\n\u003e 💬 Hint: You can set the `defaultNetwork` in `hardhat.config.ts` to `sepolia` **OR** you can `yarn deploy --network sepolia`.\n\n---\n\n## Checkpoint 4: 🚢 Ship your frontend! 🚁\n\n\u003e ✏️ Edit your frontend config in `packages/nextjs/scaffold.config.ts` to change the `targetNetwork` to `chains.sepolia` :\n\n![chall-0-scaffold-config](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/3b50c7a7-b9cc-4af3-ab2a-11be4f5d2235)\n\n\u003e You should see the correct network in the frontend (http://localhost:3000):\n\n![image](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/50eef1f7-e1a3-4b3b-87e2-59c19362c4ff)\n\n\u003e 🦊 Since we have deployed to a public testnet, you will now need to connect using a wallet you own or use a burner wallet. By default 🔥 `burner wallets` are only available on `hardhat` . You can enable them on every chain by setting `onlyLocalBurnerWallet: false` in your frontend config (`scaffold.config.ts` in `packages/nextjs/`)\n\n![image](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/f582d311-9b57-4503-8143-bac60346ea33)\n\n\u003e 💬 Hint: For faster loading of your transfer page, consider updating the `fromBlock` passed to `useScaffoldEventHistory` in [`packages/nextjs/pages/transfers.tsx`](https://github.com/scaffold-eth/se-2-challenges/blob/c18ed9bd202b8614da6775a189937b4facb58929/packages/nextjs/pages/transfers.tsx#L11) to `blocknumber - 10` at which your contract was deployed. Example: `fromBlock: 3750241n` (where `n` represents its a [BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)). To find this blocknumber, search your contract's address on Etherscan and find the `Contract Creation` transaction line.\n\n🚀 Deploy your NextJS App\n\n```shell\nyarn vercel\n```\n\n\u003e Follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.\n\n\u003e If you want to redeploy to the same production URL you can run `yarn vercel --prod`. If you omit the `--prod` flag it will deploy it to a preview/test URL.\n\n⚠️ Run the automated testing function to make sure your app passes\n\n```shell\nyarn test\n```\n\n#### Configuration of Third-Party Services for Production-Grade Apps.\n\nBy default, 🏗 Scaffold-ETH 2 provides predefined API keys for popular services such as Alchemy and Etherscan. This allows you to begin developing and testing your applications more easily, avoiding the need to register for these services.  \nThis is great to complete your **SpeedRunEthereum**.\n\nFor production-grade applications, it's recommended to obtain your own API keys (to prevent rate limiting issues). You can configure these at:\n\n- 🔷`ALCHEMY_API_KEY` variable in `packages/hardhat/.env` and `packages/nextjs/.env.local`. You can create API keys from the [Alchemy dashboard](https://dashboard.alchemy.com/).\n\n- 📃`ETHERSCAN_API_KEY` variable in `packages/hardhat/.env` with your generated API key. You can get your key [here](https://etherscan.io/myapikey).\n\n\u003e 💬 Hint: It's recommended to store env's for nextjs in Vercel/system env config for live apps and use .env.local for local testing.\n\n---\n\n## Checkpoint 5: 📜 Contract Verification\n\nYou can verify your smart contract on Etherscan by running (`yarn verify --network network_name`) :\n\n```shell\nyarn verify --network sepolia\n```\n\n\u003e It is okay if it says your contract is already verified. Copy the address of YourCollectable.sol and search it on sepolia Etherscan to find the correct URL you need to submit this challenge.\n\n## Checkpoint 6: 💪 Flex!\n\n👩‍❤️‍👨 Share your public url with a friend and ask them for their address to send them a collectible :)\n\n![gif](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/547612f6-97b9-4eb3-ab6d-9b6d2c0ac769)\n\n## ⚔️ Side Quests\n\n### 🐟 Open Sea\n\n\u003e 🐃 Want to see your new NFTs on Opensea? Head to [Testnets Opensea](https://testnets.opensea.io/)\n\n\u003e 🎫 Make sure you have minted some NFTs on your Vercel page, then connect to Opensea using that same wallet.\n\n![image](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/c752b365-b801-4a02-ba2e-62e0270b3795)\n\n\u003e You can see your collection of shiny new NFTs on a testnet!\n\n(It can take a while before they show up, but here is an example:) https://testnets.opensea.io/assets/sepolia/0x17ed03686653917efa2194a5252c5f0a4f3dc49c/2\n\n---\n\n\u003e 🏃 Head to your next challenge [here](https://github.com/scaffold-eth/se-2-challenges).\n\n\u003e 💬 Problems, questions, comments on the stack? Post them to the [🏗 scaffold-eth developers chat](https://t.me/joinchat/F7nCRK3kI93PoCOk)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbambino%2Fchallenge-0-simple-nft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevbambino%2Fchallenge-0-simple-nft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbambino%2Fchallenge-0-simple-nft/lists"}