Heropad is an experimental full-stack application that visualizes social links. Designed as a foundational app, Heropad provides a starting point for exploring dynamic relationships in a network and can be extended for similar applications. It offers a way to understand the interconnectedness between heroes and the awards they have earned, providing valuable insights through an interactive sociogram.
Please note that all hero names and awards are entirely fictional and bear no resemblance to real-world.
- A full-stack application that generates a sociogram from the database and displays it on the UI
- Interactive navigation within the sociogram to explore hero relationships
- Visualize connections between heroes within their respective communities
- Search functionality to find heroes and awards
- Infinite loading and virtualization for award list viewing
To set up Heropad on your local machine, follow the step-by-step guide in the Getting Started.
Heropad is built within a monorepository powered by turborepo.
- Fastify, tRPC, and superjson for a fully typesafe API
- Postgres as the database, managed via Supabase
- Kysely for typesafe database querying
- TypeBox for input validation
- DiceBear for generating avatars
- React
- Material UI
- Vite for fast development tooling
- Jotai for lightweight state management
- Graphology for representing graph data
- Sigma.js with React Sigma for graph rendering
- Lingui for internationalization
- Tanstack Router for routing
- Tanstack Virtual for virtualizing long award lists
- Vitest for running tests
- React Testing Library for testing React components and hooks
- MSW and msw-trpc for mocking API requests