Frontend overview

The OWASP Nest frontend is a modern web application built with Next.js. It serves as the primary user interface for discovering OWASP projects, chapters, members, and contribution opportunities.

Tech stack

Component	Technology
Framework	Next.js 16.x (React 19)
Language	TypeScript
Styling	TailwindCSS 4.x
UI library	HeroUI
Data fetching	Apollo Client (GraphQL)
Mapping	Leaflet / React Leaflet
Testing	Jest (unit/a11y), Playwright (e2e)

Directory structure

All frontend source lives under the frontend/ directory in the repository root.

frontend/
├── src/
│   ├── app/          # Next.js App Router pages and layouts
│   ├── components/   # Reusable UI components
│   ├── hooks/        # Custom React hooks
│   ├── types/        # TypeScript types (including GraphQL generated types)
│   └── server/       # Server-side utilities and data fetching
├── public/           # Static assets (images, icons, fonts)
├── __tests__/        # Automated tests (unit, a11y, e2e)
├── graphql-codegen.ts
├── next.config.ts
├── tailwind.config.mjs
└── package.json

Key directories

src/app

Next.js App Router pages and nested layouts. Each subdirectory maps to a URL route. The root layout.tsx wraps all pages with the global header, footer, and providers.

src/components

Over 80 shared UI components including charts, maps, cards, modals, search, navigation, and skeleton loaders. Components use HeroUI and TailwindCSS.

src/hooks

Custom React hooks for session management, search, breadcrumbs, modal state, mutations, and mobile detection.

src/types

TypeScript type definitions. The __generated__/ subdirectory contains types auto-generated from the backend GraphQL schema — do not edit these files manually.

Testing

The frontend uses two testing layers:

Unit and accessibility tests — Jest with @testing-library/react and jest-axe. Run with pnpm run test:unit or pnpm run test:a11y.
End-to-end tests — Playwright. Run with pnpm run test:e2e.

All tests live in the __tests__/ directory at the root of the frontend/ package.

Next steps

Local setup

Set up the frontend on your machine using Docker or pnpm directly.

Getting Started

Architecture

Tech stack

Directory structure

Key directories

src/app

src/components

src/hooks

src/types

Testing

Next steps

Local setup

Build docs developers (and LLMs) love

Getting Started

Architecture

​Tech stack

​Directory structure

​Key directories

src/app

src/components

src/hooks

src/types

​Testing

​Next steps

Local setup

Build docs developers (and LLMs) love

Tech stack

Directory structure

Key directories

Testing

Next steps