Structure lesson (licence does not allow quoting code)

EnkiArtAI-frontend

Frontend(client) for SymphoraArt

Original: EnkiArtAI/frontend
SuperStack fork: Blockchains/EnkiArtAI-frontend @ 3212cce
Stars: 0
Last push (original): 2026-10-16
Languages: TypeScript, CSS, HTML, JavaScript, PLpgSQL
Detected stack: @solana/kitNext.jsweb3.js
Categories: Infrastructure & Tooling
Licence: none detected: code not quoted on Sol.College

Architecture

788 source files. By extension: .ts ×629, .tsx ×146, .jsx ×11, .js ×2.

Top-level directory	Source files
`lib`	483
`components`	128
`app`	108
`hooks`	27
`.design`	15
`backend`	12
`(root)`	5
`shared`	5

Where the Solana code lives

Source files that import a Solana SDK, ranked by how many Solana APIs they use, with the APIs each one calls. Read them in this order to see how the app talks to the chain.

File	Solana APIs used
`lib/__tests__/x402-settle.test.ts`	`Keypair`, `getAssociatedTokenAddressSync`, `PublicKey`, `transfer`, `ComputeBudgetProgram`, `VersionedTransaction`
`lib/payments/x402-settle.ts`	`transfer`, `VersionedTransaction`, `PublicKey`, `Transaction`, `Connection`, `Keypair`
`lib/payments/withdraw.ts`	`PublicKey`, `Transaction`, `transfer`, `ComputeBudgetProgram`, `Connection`, `getAssociatedTokenAddressSync`
`lib/__tests__/withdraw.test.ts`	`Keypair`, `Transaction`, `transfer`, `Connection`, `PublicKey`, `getAssociatedTokenAddressSync`
`lib/__tests__/rpc-failover.test.ts`	`Keypair`, `sendTransaction`, `VersionedTransaction`, `Transaction`, `SystemProgram`, `TransactionMessage`
`backend/solana-x402-verifier.ts`	`PublicKey`, `Transaction`, `Connection`, `transfer`, `getAssociatedTokenAddressSync`, `findProgramAddressSync`
`lib/__tests__/payment-signer.test.ts`	`Keypair`, `Transaction`, `signTransaction`, `SystemProgram`, `transfer`
`lib/payments/__tests__/escrow-client.test.ts`	`PublicKey`, `findProgramAddressSync`, `SystemProgram`, `Transaction`, `seeds`, `transfer`
`lib/payments/solana.ts`	`Connection`, `Keypair`, `PublicKey`, `Transaction`, `getBalance`
`app/api/x402/generate/route.ts`	`PublicKey`, `transfer`, `getAssociatedTokenAddressSync`, `TransactionMessage`, `VersionedTransaction`, `getLatestBlockhash`
`lib/payments/__tests__/solana-transfer.test.ts`	`Keypair`, `PublicKey`, `getAssociatedTokenAddressSync`, `transfer`, `getAccountInfo`
`components/settings/SendUsdcPanel.tsx`	`transfer`, `Transaction`, `useWallet`, `signTransaction`

Dapp: devnet deploy pending

⏳ Devnet deploy pending — goes live when the devnet wallet is topped up. This fork's own dapp is not deployed yet, so there is no program address or transaction to show. It is queued in dapp-queue.txt; once devnet SOL is available it is deployed, exercised with real devnet transactions, and this section switches to the live dapp at /dapps/enkiartai-frontend/. Until then, the lesson and step-by-step guide below are complete, and you can run it locally with the commands below.

How to run, build and test

These commands come from the repo's own manifests (package.json scripts, Anchor.toml, Cargo, go.mod, Makefile). Check the README for prerequisites and environment variables.

Directory	Command	Runs
`.`	`npm run dev`
`.`	`npm run start`
`.`	`npm run build`
`.`	`npm run test`
`.`	`npm run lint`
`backend`	`npm run build`
`backend`	`npm run test`

What you could build from it

Fork the SuperStack copy and extend it within the Infrastructure & Tooling gaps listed on the idea page.
Learn the pattern first: Building and sending transactions from a client
Learn the pattern first: Anchor account constraints