Heropad (heropad.gzukas.lt) is an experimental full-stack application designed to visualize social links. It introduces an innovative way to explore and understand the dynamic network of relationships between heroes, providing insights into the awards they have earned.
Note that the generated hero names and awards are entirely fictional, with no intentional resemblance to the real world.
- A full-stack app presenting a pre-generated sociogram from the database to the UI
- Interactive sociogram navigation
- Visualize the connections between related heroes within communities
- Look for heroes and awards with optimal search functionality
- Infinite loading and virtualization for award viewing
The Heropad is built within a monorepository powered by turborepo.
The API is crafted with:
- Fastify, tRPC, and superjson for running an end-to-end typesafe server
- Supabase as the database
- kysely for typesafe database querying
- zod for input validation
- DiceBear for avatar generation
For the web application, the following is used:
- React
- Material UI
- Vite as frontend tooling
- Jotai for state management
- Graphology as graph data structure
- Sigma.js, with the helping hand of React Sigma, for graph rendering
- Lingui as internationalization framework
- Tanstack Router for routing
- Tanstack Virtual for virtualizing large award lists
The following is utilized for testing purposes:
- vitest as the testing framework
- React Testing Library is used for testing React components and hooks
- msw and msw-trpc for mocking the API