/gallery-view

A web app to view the nfts that people own

Primary LanguageTypeScript

Gallery view

Image of the repo

An NFT viewer for collections or what wallet owns.
This is the code part of the tutorial "Gallery-View" for the web3 Hackathon

This web app lets you:

  • View the nfts that other persons posses
  • View nfts owned by someone

Online demo

You can view the proyect online at this site: webapp (Online proyect is on Goerly Chain).
To make it work put an address of the Goerly Chain and see the NFTs that it collects.

If you want to view a demostration of how it works or how to use it properly please refer to the
hackathon academy video.

Requeriments and installation

Frist of all you will need NodeJs and Yarn installed in a LTS version.

  1. Clone the repo and install the dependencies:
git clone <thisrepo>
cd ./gallery-view
yarn install
  1. Go to alchemy.com and create an app to have key access.

    Then create a .env.local file at the root folder and put inside:
    (Note that the url env variable will determine the Ethereum chain that your proyect will use)
    !!!Note!!!: When writting the API URL you should remove everything to the rigth of /v2/.
    The URL will define the chain that your proyect will use, for the demo to work please use Goerly.

ALCHEMY_API_KEY="youralchemykey"
ALCHEMY_API_URL="the url till the/v2/"
  1. Run the app by just run
yarn dev # only for development mode
yarn build && yarn start # for production mode

Tecnologies used

These are the tecnologies used in this repo:

  • NextJS (TypeScript)
  • React Dom
  • Alchemy NFTs APIs
  • Aprhodite (For styling like react native)

!! Important !! The key part on this proyect is under the file src/pages/api/nfts.ts.