NFT SHOP Example POC

This is a POC project for NFT Shopp application (dApp) development.

Tech Stack

App was developed based on the following requirements + bonuses:

User can browse minted tokens in a grid
User can open/close the cart
User can add a token to the cart on click of the product. Cart should open each time a token is added and the token should be listed in the cart
User can remove a token from the cart
User can see the total of the cart
User can checkout on click of the checkout button. Display a confirmation alert
Transactions will be triggered on click of check out, token and goerlieth sent to the wallet “0x1e4EeD1E29B284baCF87D7c75C5798280CB40BA7”.
User can see its balance of goerlieth (wallet icon on navbar)
Contract for token is deployed on Goerli
Contract token should implement the ERC-721 standard
On checkout, transaction is triggered, tokens and payment are transferred to 0x1e4EeD1E29B284baCF87D7c75C5798280CB40BA7
For each token, retrieve its name, its contract address and a fake price of your choice in Eth (rounded to two decimals)
UI is based on Figma requirements (not color / pixel perfect)
UI is responsive and work well with mobile and desktop
App is deployed into Vercel
Deploy a contract that manages order on chain and actually create real listings and order
Use the mantine form utils to validate the data
Show network information with current ETH balance (click on wallet button)
Make a next js api endpoint that receive the checkout form data, validate it another time, and save it to Firestore - if the api return 200 success show a success notification in the front

Additional features not mentioned in requirements were also implemented

Order page with table of stored orders in FireStore
Fetching from contract and showing total supply and minted token count
Theme switcher (Light / Dark mode)
Store Shopping App State in localstore via Mantine hooks
Notifications for different actions
Get Orders Rest Endpoint
Custom Network Switcher
Additional shopping logic like disabling "Buy" buttons for added element to Cart
App supports Hardhat / Localhost blockchain

Things that should be implemented but was outside the requirements and time limits

add more tests
implement better Web3 wallet connection for other wallets (currently only Metamask is supported, I didn't want to add other dependencies for now)
implement better UX for pending transactions / backend communication (eg. on Orders page)
NFT image is hardcoded on the frontend - fetch proper NFT image with skeleton loader
NFT price is hardcoded on the frontend - add price to Contract and create proper calculations / requirements
mint more tokens (requirement was for 8)
fetch ETH / USD price from some service - now it's hardcoded on frontend