A Next.js 15 app that browses characters from the public Rick & Morty GraphQL API. Visitors complete a quick profile registration that persists to a cookie before exploring the character catalogue, with both page and modal detail experiences.

• Tech stack
• Key features
• Project layout
• Architecture overview
• Routing
• Data fetching
• Profile & cookies
• UI components
• Styling
• Environment variables
• Getting started
• Available scripts

• Next.js App Router (app/layout.tsx, app/page.tsx)
• React 19
• Apollo Client + GraphQL (lib/gql/apolloClient.ts, lib/gql/queries.ts)
• Tailwind CSS v4 (app/globals.css, postcss.config.mjs)
• Radix UI primitives wrapped with shadcn-inspired components (components/ui)

• Root route redirects to the paginated /information catalogue via Home.
• Character grid with both dedicated page and modal detail routes.
• Cookie-backed profile registration gate enforced by middleware.
• Reusable form, card, dialog, and pagination components for consistent UI.

• RootLayout sets global fonts, mounts SiteFooter, and seeds context with getUserFromCookies.
• Authenticated pages share MainLayout, which fixes the SiteHeader above the main content.
• Home immediately redirects to /information to centralize onboarding.

• Catalogue: CharactersPage renders the paginated grid and description.
• Pagination handler: CharactersPagination wraps Paginations to sync query params.
• Character detail (page): CharacterDetailsPage displays CharacterDetails.
• Character detail (modal): CharacterDetailsModalPage opens CharacterDetailsModal alongside the list.
• Registration: RegisterPage completes onboarding then forwards users to /information.
• Profile management: ProfilePage lets users review or update stored data.
• Not found: NotFoundPage handles unknown routes.

• Apollo client is configured in client using GQL_ENDPOINT.
• Catalogue queries use GET_CHARACTERS_QUERY; detail views use GET_CHARACTER_DETAIL.
• Errors surface as PageError with descriptive messaging.

• /api/register POST/GET (route) persists { username, jobTitle } into the user cookie.
• middleware requires the cookie before allowing /, /information, and /profile.
• Forms reuse ProfileForm, pulling the initial value from UserContext.

• Characters: CharacterCard, CharacterDetails, CharacterInfo, CharacterDetailsModal.
• Pagination: Paginations with getPaginationPages for compact page sets.
• Shared primitives: PageTitle, Button, Card, Dialog, Input, Field, Label, Separator.

• Theme tokens and global styles live in app/globals.css.
• Tailwind/PostCSS setup is defined in postcss.config.mjs; shadcn component registry resides in components.json.

Set in .env.local or .env.production:

• GQL_ENDPOINT – GraphQL API endpoint (defaults to the official API).
• CHALLENGE_VERSION – Rendered by SiteFooter.

1. Install dependencies:

   npm install

2. Start the dev server:

   npm run dev

3. Visit http://localhost:3000 — unauthenticated users are redirected to /register until the user cookie is set.
4. Build and run production:

   npm run build
   npm start

• npm run dev – Launch the Turbopack dev server.
• npm run build – Produce an optimized production build.
• npm start – Serve the production build.
• npm run lint – Run ESLint with eslint.config.mjs.