Gallery Frontend

The premier gallery experience for your NFTs.

Documentation

• Architecture Overview — monorepo structure, build system, auth, GraphQL/Relay, feature flags, CI/CD
• Known Issues & Technical Debt — consolidated TODOs and known bugs
• Third-Party Dependencies — external services, API keys, and subscriptions

Getting Started

Pre-requisites

1. Install Yarn
2. Install NVM

Install Moon

At Gallery, we use a monorepo tool called moon. Every time you want to run a task in our repo, it will follow the format moon {command-here}.

Before moving forward with this README, please install moon using these instructions

You'll notice there are different apps and packages in the repo, each with its own moon.yml file. The files list the relevant moon commands to run for each target. If you're unsure about which command to run to boot a specific app or package, refer to the associated moon.yml.`

Setup Web

Install our node version:

nvm install && nvm use

Install correct yarn version (3.4.1):

yarn set version 3.4.1

Install dependencies:

yarn install

Create a local .env file by copying values from .env.sample:

cp apps/web/.env.sample apps/web/.env

Start app:

moon run web:dev

The app will be running at http://localhost:3000.

Setup Mobile

See apps/mobile/README.md for the full guide. Quick start:

# Requires Xcode 16.4 — download from https://developer.apple.com/download/all/?q=Xcode%2016.4
DEVELOPER_DIR="/path/to/Xcode-16.4.app/Contents/Developer" moon run mobile:ios

# Android
moon run mobile:android

Working with Shared Packages

/packages/shared contains shared code that can be utilized by both web and mobile. When developing here, you'll need to run codegen specific to that package, such as moon run shared:codegen-watch. In other words, just having the web or mobile app running won't automatically handle codegen for shared – that will need to be a separate process.

E2E Testing

Cypress CI is configured as a Github workflow in .github/workflows.

Advanced

If you need access to any of the following:

• Test wallet
• Analytics keys
• Sentry keys
• Cypress dashboard

Hit up a member of the core team.

Feature Flags

Feature flags are defined in two places:

• Static flags in packages/shared/src/utils/featureFlags.ts -- used in pre-auth contexts (login screens, onboarding routing) where no Relay queryRef is available.
• Relay-based flags in apps/web/src/utils/graphql/isFeatureEnabled.tsx and apps/mobile/src/utils/isFeatureEnabled.tsx -- used in authenticated contexts with ADMIN role overrides.

Flag	Default	Description
SHOW_SOCIAL_CONNECTIONS	false	Controls X/Farcaster/Lens connection UI, Farcaster auth, and social pills on profiles

Admins (ADMIN role) see all features regardless of flag values.

Other commands

• moon run web:test for tests
• moon run web:relay-codegen to run relay compiler
• moon run web:relay-watch to run relay compiler in watch mode
• moon run web:lint for linting
• moon run web:typecheck for checking type validity
• moon run web:synpress-run to run e2e tests
• moon run web:synpress-open to open cypress
• yarn fetch-schema to pull graphql schema from production
• yarn fetch-schema-dev to pull graphql schema from development