This is a submission for the GitHub Finish-Up-A-Thon Challenge
Pokémon and all Pokémon character names are trademarks of Nintendo. This project is intended for educational purposes only.
What I Built ⚒️
I built a full stack Pokemon based NFT platform where you can trade, collect and battle Pokemon based NFT cards hosted on Polygon blockchain. All the Pokemon based digital collectibles properties is fetched from PokeApi
Tech stacks I used 🤖
| Layer | Technology |
|---|---|
| Smart Contracts | Solidity 0.8.25, Hardhat, OpenZeppelin v5 |
| Blockchain | Polygon (Amoy Testnet / Mainnet) |
| Web Frontend | React 19, TypeScript, Vite 5, ethers.js v6 |
| Mobile App | Expo ~54, React Native 0.81, Expo Router |
| Data | PokéAPI (pokemon data), Pinata (IPFS metadata; planned for future release) |
Demo 🚀
GitHub repo:https://github.com/tanay9098/PokeDex
Web app version:https://pokedex9098.netlify.app/
Mobile version(Android build stable version):
https://expo.dev/accounts/tanay9098/projects/PokeDex/builds/53d0f4cf-14a8-4856-bcb4-12d5314cf417
The Comeback Story 🏋️♂️
Few months ago, I was learning React Native from Alberto Moedano on one of his tutorial video on his Youtube channel where he taught React Native by building an application named, PokeDex, hence lazy me named it just like that 😂. Now coming to the main part, it was just a simple React Native project which used to fetch Pokemons from PokeApi and later I thought of improvising and adding new changes such as building a Pokemon based NFT trading card platform or Pokemon based battle game but I procrastinated and almost gave up on it, until one day I saw a mail from DEV.to for GitHub Finish-Up-A-Thon challenge which ignited a fire🔥 in me to complete it.
Earlier static version of PokeDex
How GitHub Copilot helped me ❤️🩹
GitHub Copilot helped me to save a lot of time by rewriting a separate version for web which otherwise would take a hell lot of time.
It also helped me with Blockchain implementation wherever necessary
It critiqued my development approach and corrected me wherever I was going wrong
Struggles and learning 😣
This was my first web3/blockchain project and at that time I just had a surface level knowledge of it, hence I had to learn web3/blockchain-based technologies especially Solidity programming language.
I was using claude Haiku model in GitHub copilot free tier and there were times when it was generating hallucinated codes so I had go through the code structure and read each code line by line which enabled me to debug the issues and make few contextual changes.
Also I encountered several build errors related to android and I learned a lesson the hard way, that always keep a separate branch for preview and production and don't push everything to main/production branch.
Limitations and Future Enhancements 📚
Unintentional Technical Trade-offs
This project demonstrates the web 3 enabled frontend and how it interacts with wallet integration(Metamask), Smart Contracts and Blockchain based transactions, but I didn't fully implement NFT based market architecture. Instead of that, I implemented the logic of NFT like ownership such that it can be simulated locally on your machine. Other trade-offs were no integration of multiplayer battle mode, rudimentary implementation of Mobile app and zero synchronization between mobile and web app.
Limitations due to Technical Trade-offs
Ownership is not stored on-chain as purchased pokemons are tracked locally.
Non transferable assests as Pokemon cards aren't minted as NFTs.
Purchased collectibles are stored locally on browser and mobile device hence if you clear the browsing data,cache, or switch devices then it will reset the collection.
The application only demonstrates the purchase flow but doesn't demonstrate peer-to-peer trade or transactions. The transaction gets send to a hardcoded deployer address only(which is me).
No sync between mobile and web due to changes being implemented locally.
Pokemon battle feature includes battle logic(single player only) but doesn't have multiplayer feature.
Right now there are few issues with respect to wallet connection in mobile version as for it I am using thirdweb whose few package is in conflict with few of react-native packages hence need to find a workaround. Hence implementation is pretty much rudimentary in nature.
It's all because of few things that I didn't factor in while starting this project. One of the few thing I thought to implement was minted NFT Pokemon cards(or purchased Pokemon cards) can be used in Battles but due to lack of technical knowledge for now, I wasn't able to implement multiplayer mode. Another issue is there is no synchronization between web and mobile due to absence of a unified backend and blockchain services to keep track of changes remotely, which brings me to the last part, that PokeApi being a read only public API, it has no such concept of ownership because it is accessible to everyone for public use. Hence for example, if one have to purchase Bulbasaur NFT card from my app, its data will be fetched from PokeApi, hence the question would be who owns the Bulbasaur NFT before a user buys it? Someone has to mint it and put it for sale and that someone has to have a proof of an actual ownership of the Bulbasaur NFT but as mentioned that data is being fetched from a public API.
Future Enhancements and Solutions
Adding multiplayer battle mode by implementing socket.io or WebRTC
Enabling sync between mobile and web
To support actual NFT ownership and trading, I would need to design and maintain my own data layer consisting of a dedicated database for Pokémon assets, user inventories, marketplace listings, transaction records, and metadata. This would also require implementing custom read and write APIs, backend services, authentication, and synchronization between the database and blockchain smart contracts. Inculcating all these changes just would expand the scope and complexity of the project further which is why it has a dedicated space for itself for a full-scale project which I will implement it in future.
Solve the conflict issue of mobile version with Third web.
Top comments (0)