https://github.com/cdrani/zora
express app connected to zora api & nextjs app to display data retrieved from express api
https://github.com/cdrani/zora
Last synced: 10 months ago
JSON representation
express app connected to zora api & nextjs app to display data retrieved from express api
- Host: GitHub
- URL: https://github.com/cdrani/zora
- Owner: cdrani
- Created: 2022-11-15T16:49:27.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2022-11-15T18:06:07.000Z (over 3 years ago)
- Last Synced: 2025-02-05T13:47:43.978Z (over 1 year ago)
- Language: TypeScript
- Size: 85 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# zora
> [express](https://expressjs.com) app connected to [zora](https://docs.zora.co/docs/zora-api/intro) api & [nextjs](https://nextjs.org)
app to display data retrieved from express api
## Usage
### Installation
Install the dependencies for the **api** && **app** via `yarn` (preferable) or `npm`:
```sh
cd api && yarn && cd ..
cd app && yarn && cd ..
```
### Dev
Start the servers for both **api** and **app** to run at the same time
#### API
```sh
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
```sh
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**:
```ts
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](/api/helpers/methods.js) file.
Additionally, logs are captured within the [logs](/api/logs/) folder.
#### Nextjs App
This is a Nextjs generated typescript SPA with a single page :sweat_smile:.
### Directories of Interest
**[components](/app/components/)**: distinct piecemeal ui
**[commands](/app/commands/)**: Executes user actions. For example, the SearchCommand is executed on user form submission (SearchBar).
**[services](/app/services/)**: Currently limited to just data fetching functions.
**[api](/app/api/)**: Defines interfaces for APIResponse and handling of responses.
**[stores](/app/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