Expand the gallery with prev/next browsing and fullscreen detail view, golden influence lamps and chronological wall layout in 3D halls, and scripts/docs for catalog expansion, influence edges, and multi-source image fetching. Co-authored-by: Cursor <cursoragent@cursor.com>
63 lines
2.0 KiB
Markdown
63 lines
2.0 KiB
Markdown
# Art Gallery
|
|
|
|
Interactive virtual art gallery: zoomable historical timeline, art movement bands, one 3D hall per artist (dynamic wall layout, chronological wall order, golden influence lamps, canvas placeholders for missing works, influence-linked exits), painting detail with prev/next catalog browsing and fullscreen lightbox, preserved gallery camera on return, and Wikipedia-sourced artist biographies.
|
|
|
|
## Documentation
|
|
|
|
| Document | Purpose |
|
|
|----------|---------|
|
|
| [Documentation/basics.md](Documentation/basics.md) | Architecture, layout, user flow |
|
|
| [Documentation/setup.md](Documentation/setup.md) | Install, env, npm scripts |
|
|
| [Documentation/DB_structure.md](Documentation/DB_structure.md) | PostgreSQL tables |
|
|
| [Documentation/API.md](Documentation/API.md) | REST endpoints |
|
|
| [Documentation/data-and-images.md](Documentation/data-and-images.md) | Catalog, bios, seeding, image pipeline |
|
|
|
|
## Stack
|
|
|
|
- **Backend:** Node.js, Express, PostgreSQL
|
|
- **Frontend:** React, Vite, Three.js (`@react-three/fiber`, `@react-three/drei`)
|
|
|
|
## Setup
|
|
|
|
1. Copy `.env.example` to `.env` and set database credentials.
|
|
2. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
cd client && npm install && cd ..
|
|
```
|
|
|
|
3. Apply database schema (requires PostgreSQL superuser for first-time setup):
|
|
|
|
```bash
|
|
npm run migrate
|
|
npm run seed
|
|
```
|
|
|
|
4. Enrich the catalog (recommended after seed):
|
|
|
|
```bash
|
|
npm run fetch-artist-bios # Wikipedia biographies for all artists
|
|
npm run expand-catalog # add famous works for artists with thin catalogs
|
|
npm run update-influences # art-history lineage links between paintings
|
|
npm run fetch-images -- --artist="Claude Monet" # images per artist (slow; repeat)
|
|
```
|
|
|
|
5. Build the client and start the server:
|
|
|
|
```bash
|
|
cd client && npm run build && cd ..
|
|
npm run server
|
|
```
|
|
|
|
Open http://localhost:3001
|
|
|
|
## Development
|
|
|
|
Run API and Vite dev server separately:
|
|
|
|
```bash
|
|
npm run dev:server # http://localhost:3001
|
|
npm run dev:client # http://localhost:5173 (proxies /api and /images)
|
|
```
|