Skip to main content

1.2 - Project Structure

This section describes the recommended project structure for integrating player-map.

src/
├── constants/
│   └── playerMapConstants.ts    # Constants for player-map
├── contexts/
│   └── WalletContext.tsx         # Privy, Wagmi, React Query configuration
├── components/
│   └── PlayerMapView.tsx         # Component using GraphComponent
├── App.tsx                        # Application entry point
└── main.tsx                       # Main file (if Vite)

.env                                # Environment variables
package.json                       # Project dependencies

Folder organization​

src/constants/​

Contains configuration constants for player-map:

  • playerMapConstants.ts: Configuration of IDs, guilds, claims, etc.

src/contexts/​

Contains required React contexts:

  • WalletContext.tsx: Provider configuration (Privy, Wagmi, React Query)

src/components/​

Contains application components:

  • PlayerMapView.tsx: Main component integrating GraphComponent from player-map

Configuration files​

.env​

File containing environment variables (should not be committed):

  • VITE_PRIVY_APP_ID
  • VITE_PINATA_JWT_KEY
  • VITE_IPFS_GATEWAY

package.json​

Contains project dependencies and build scripts.

Important points​

  • Separation of concerns: Each file has a specific role
  • Modular organization: Facilitates maintenance and updates
  • Centralized configuration: Constants are grouped in a single file