Project file N°09
Character Browser — Next.js + NestJS GraphQL
A full-stack TypeScript app: a NestJS code-first GraphQL API over Prisma, and a Next.js App Router front end with React Query, generated types end to end, and filters kept in the URL.
Stack
- Next.js
- React
- React Query
- NestJS
- GraphQL
- Prisma
- TypeScript
- GraphQL Codegen
- nuqs
Live
github.com/Thusuaso/character-app →The problem
A reference project for the React side of the stack: a searchable, filterable list backed by a real API and database, with types that stay in sync from the schema to the component.
What we built
- 01NestJS module → resolver → service → Prisma layering, with enums exposed to GraphQL
- 02Server-side filtering and name/description search through Prisma
- 03GraphQL Codegen generating typed React Query hooks from the live schema
- 04Search and filters stored in the URL with nuqs, so results survive refresh and can be shared
Outcome
- —One codebase that shows the same patterns used in Nuxt projects, carried over to React and Next.js
Next project →