A responsive Pokedex dApp that allows users to search for and mint each detailed Pokemon Card as an NFT
This project was built using React (create-react-app with typescript), Axios to fetch data from the PokeApi, MUI components to ease up on the UI creation, RainbowKit to provide the “Connect Pokédex” button (aka wallet), Wagmi to glue the frontend with the EVM, and some scripts to automatically generate the Pokemon SVG’s and metadata JSON files to be used in the NFT creation.
The number of Pokémons rendered is limited to 151 (considering these the OG's) and also because all of them are rendered on each load of the page, this is something to work on and updgrade later on. All of the Pokémon information is fetched from the PokeAPI using Axios, one time, on page load.
There is also a search bar that filters the Pokémons showed based on the input name.
When a Pokémon card is clicked a modal opens with a detailed Pokémon Card and a button to mint it as an NFT, here we can also change the Card to the previous and next Pokémon based on it's number.
The Pokémon Cards design was picked up from an AMAZING template created and published by @ricardohs on Figma. This was then translated into HTML/CSS code, so it could be correctly rendered on the page with each Pokemon's updated information. To create the NFTs, this template was also converted to SVG (with no text outlines) which allowed the inclusion of input variables to later be updated with the Pokémon information, and batch create all desired Pokémon cards with a script. To complement, this script also creates the metadata.json files that will compose each NFT card, also populating it with the Pokémon details.
The NFT contracts where developed according to the ERC721URIStorage standard implementation with a little twist to limit the Pokémon NFT minting to 1 of each per wallet. The metadata was stored on IPFS using Pinata, and all under a single CID, this way we can embed this link in the contract and only attach it the received input number of the NFT to create. This prevents having to use the deployer account to mint the NFTs while also ensuring that no other info can be injected. The contracts were deployed on Sepolia and Sepolia Base testnets using RemixIDE.
Deployed contracts:
- Sepolia Testnet: https://sepolia.etherscan.io/address/0x35c6D97EaAcA055480e3471C1045e4659F9371e7
- Base Sepolia Testnet: https://sepolia.basescan.org/address/0x4e7a8e08f86f1653669ea9e26388268b1210eb3f
OpenSea collections:
- Sepolia Testnet: https://testnets.opensea.io/collection/pokeminter-sepolia
- Base Sepolia Testnet: https://testnets.opensea.io/collection/pokeminter-base-sepolia
To run the app:
To run the scripts (installed globally):
To run the app:
$ git clone https://github.com/josevazf/pokeminter.git
$ cd react-app
$ npm install
$ npm startThe application will open in the browser on http://localhost:3000
The number of Pokemon SVGs and JSONs to be created can be changed from inside the scripts (default is 151) To run the scripts:
$ cd react-app/scripts
# generate SVG and JSON files
$ tsx generate_svgs_json.ts
# after uploading the SVGs to IPFS, update `update_json.ts` script with the new CID
$ tsx update_jsons.ts- Render a fixed number of Pokémons at a time, allowing to integrate the full Pokédex
- Option to filter Pokémons by defined attributes
- Implement Account / Gas abstraction
- Show NFTs that have been minted by the user