zora

express app connected to zora api & nextjs app to display data retrieved from express api

Usage

Installation

Install the dependencies for the api && app via yarn (preferable) or npm:

cd api && yarn && cd ..

cd app && yarn && cd ..

Dev

Start the servers for both api and app to run at the same time

API

cd api
cp .env.example .env
yarn start

This will start a server on http://localhost:3001. The PORT and other env variables can be be configured in the .env file.

App

cd app
yarn dev

Architecture

Express App

Simple express app with 2 routes:

1. / is simply for a test and displays a message as such
2. /api/nft/:address is the one used to send the following query to the Zora api based on the provided address:

const query = `
    query($ownerAddresses: [String!]) {
        tokens(networks: [{ network: ETHEREUM, chain: MAINNET }],
        where: { ownerAddresses: $ownerAddresses }) {
            nodes {
                token {
                    tokenId
                    metadata
                }
            }
        }
    }
`

The shape of the successResponse & failResponse is defined in the methods file. Additionally, logs are captured within the logs folder.

Nextjs App

This is a Nextjs generated typescript SPA with a single page 😅.

Directories of Interest

components: distinct piecemeal ui

commands: Executes user actions. For example, the SearchCommand is executed on user form submission (SearchBar).

services: Currently limited to just data fetching functions.

api: Defines interfaces for APIResponse and handling of responses.

stores: Notably the ZoraStore is used to request data from the api route with the given address if cache is invalid, otherwise it retrieves cached data from localStorage