Customising the web app
What to change to make this look and behave like your own app, and what depends on the Movies model.
What is generic and what is Movies-specific
| Part | Generic? | Notes |
|---|---|---|
src/ui/*, src/poster/Poster.tsx, src/theme/tokens.css, src/styles.css | Generic | Buttons, chips, dialog, avatar, generated posters, tokens. They depend only on src/lib/hash.ts and src/lib/initials.ts. |
src/graph/GraphView.tsx | Generic | Takes nodes and links. |
src/forms/PersonPicker.tsx | Mostly generic | A typeahead over one entity type; copy it for another. |
src/forms/model.ts | Pattern is generic | buildCreateInput and buildUpdateInput show how to turn form state into nested mutation inputs and diffs; the fields are Movie-specific. |
src/lib/filters.ts, peopleFilters.ts | Pattern is generic | URL-synced filters and where/sort builders; the filter set is Movie-specific. |
src/pages/*, src/search/* | Movie-specific | Rename and rework per entity. |
src/graphql/generated/* | Generated | Re-run npm run codegen. |
Change the look
- Colours, spacing, radii, shadows: edit the custom properties in
src/theme/tokens.css.:rootis the dark theme and:root[data-theme="light"]the light one; keep both in step. Text and background pairs need enough contrast (4.5:1 for normal text). - Fonts: Public Sans is loaded from
@fontsource-variable/public-sansinsrc/main.tsx; swap the package and the--fonttoken. - Layout and components: all styles are in
src/styles.css, grouped by area (header, inputs, cards, results, detail, forms, dialog). - Brand name: the header text is in
src/App.tsx(Header), the page title inindex.html.
Change the posters and avatars
Posters are generated from the title and first genre in src/poster/Poster.tsx. Edit GENRE_HUE for the genre colours and posterStyle for the gradients. To use real images instead, add an image URL field to the schema and render an <img> in Poster when it exists, falling back to the generated style.
About Needle
The look is styled after Neo4j’s Needle design system (Public Sans, blue and teal palette, dark and light themes), reimplemented in our own components. The colour values are approximations that have not been checked against Needle’s published tokens; compare them with neo4j.design before presenting this as Needle. The app does not use the @neo4j-ndl/* packages: they are GPL-3.0 and this repo is Apache-2.0, so adding them would make the combined work GPL-3.0. Do not add them without changing this repo’s licence.
Point it at a different server
Set VITE_GRAPHQL_URL at build time (Docker build argument, or an env var for vite). It must be reachable from the browser. For local development: VITE_GRAPHQL_URL=http://localhost:4000/graphql npm run dev. The server’s CORS_ORIGIN must include the web origin (the dev server uses http://localhost:3000).
Adapt it to another dataset
The step-by-step version, with a worked example, is in the grandstack umbrella repo (docs/build-your-own-app.md). In short: change the server schema and seed, run npm run codegen here, and the compiler lists every place that used a field you removed. Then rename pages and components, rewrite the filters to your fields, and update the forms.
Source: grandstack-web/docs/customising.md (this page is a copy; edit it in the repository)