Pokecard NFT

A marketplace for create, buy, sell and display Pokemon NFT cards

Report Bug · View Dapp · Request Feature

Features

• Create and sell your custom NFT Cards
• Buy other cards
• Display all the cards created
• Display last 4 cards minted
• Display owned cards

Table of Contents

1. About The Project
   • Built With
2. Project Structure
   • Smart Contract
   • Angular App
   • Utilitis Scripts
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
   • Deploying the contract yourself
   • Automatic NFTs minting
5. Build
6. Deploy (Firebase)
7. Contributing
8. License
9. Contact
10. Acknowledgments

About The Project

This is an NFT marketplace based on the creation and exchange of collectible NFT cards. This app is connected with the Ethereum blockchain (by default Goerli testnet) through web3.js and interact with a smart contract. In this project you can find everything you need to make a decentralized app:

• Smart contract used and how to deploy it
• Frontend part (NFT creation, visualization and minting)
• Script for populate smart contract with custom NFT (optional)

For the ethereum node provider was used Alchemy, and for NFT storing was used Pinata.

Built With

• 
• 
• 
• 
• 
• 

(back to top 🔝)

Project Structure

Smart Contract

Powering all the data for this app is an Ethereum smart contract, written in Solidity and based on OpenZeppelin ERC-721 standard. The contract is on the file contracts/MyNFT.sol

Angular App

All the frontend is built with Angular, you can find all the files under folder src

Utility Scripts

There are also some utility script under scripts folder:

• deploy.ts: used to deploy the smart contract
• mint-nft.ts: used to dinamically popolate the contract with NFT added on pinataMintCid.json
• setenv.ts: used to populate environment variable

(back to top 🔝)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

List of things you need to use in order to use the software and how to install them:

• npm

  npm install npm@latest -g

• Get a free Alchemy node API Key at https://dashboard.alchemy.com/ (used to be able to load the NFTs info also for user without Metamask installed)

• Get a free Pinata JWT at https://app.pinata.cloud/ (used to store our NFTs information)

Installation

1. Clone the repo

   git clone https://github.com/Albenzoo/PokeCard-NFT.git

2. Install NPM packages

   npm install

3. Enter your personal information in .env (if you have not a contract, follow the instructions below to deploy a new one)

   PUBLIC_KEY=YOUR-WALLET-PUBLIC-KEY
   CONTRACT_ADDRESS=YOUR-CONTRACT-ADDRESS
   PINATA_JWT=YOUR-PINATA-JWT
   ALCHEMY_PROVIDER=YOUR-ALCHEMY-PROVIDER-API-KEY
   

(back to top 🔝)

Usage

Run the project

npm start 

it will create the environment file based on your .env

Deploying the contract yourself

The smart contract is the file MyNFT.sol

First you need to compile the contract with the command

npm run compile-contract

Then you can deploy a new contract instance by running the command

npm run deploy-contract

note that, by default, this command deploy the contract on Goerli Testnet by running the deploy.ts script (you can see the command detail on package.json file)

Automatic NFTs minting

If you want to quickly populate your smart contract with some NFTs whose CID was created earlier, you can compile the pinataMintCid.json file with the CID code you want to mint in your contract. Your Pokemon on Pinata have to follow this structure: scripts/squirtle-example.json, then place the CID in pinataMintCid.json file.

In order to start the minting process run

npm run mint

(back to top 🔝)

Build

npm run build

(back to top 🔝)

Deploy (Firebase)

First increase the version in package.json and build the project with the command above, then run

firebase deploy

(back to top 🔝)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top 🔝)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top 🔝)

Contact

Alberto Presenti - alberto.presenti@yahoo.it

Project Link: https://github.com/Albenzoo/PokeCard-NFT

(back to top 🔝)

Acknowledgments

• Alchemy - 7. How to build an NFT Marketplace from Scratch - Solidity and IPFS | Road to Web3
• Ethereum.org - How to write and deploy an NFT
• OpenZeppelin contract wizard
• Readme Template
• Angular Material v13
• Google Fonts - Icons

(back to top 🔝)