This project is built as a Next.js 16 application using the App Router architecture and is developed entirely in TypeScript with strict type safety enabled (strict: true, noEmit: true). The TypeScript configuration leverages modern compiler features, including moduleResolution: "bundler" the React JSX transform and incremental compilation to improve build performance and developer experience. The application targets ES2017 and includes support for dom, dom.iterable, and esnext libraries. A monorepo-style path alias (@/*) is configured to provide cleaner and more maintainable imports across the codebase.

Frontend Architecture

The user interface is built with React 19 and combines the flexibility of Tailwind CSS 4 with the power of styled-components 6 for component-level styling. Tailwind is integrated through:

@tailwindcss/postcss
tailwindcss-animate
tw-animate-css

Modern CSS transformations and optimizations are handled by Lightning CSS, improving runtime performance and build efficiency.

To support scalable and reusable UI development, the project incorporates several utility libraries:

clsx – Conditional class name management
class-variance-authority (CVA) – Variant-driven component APIs
tailwind-merge – Intelligent Tailwind class merging

For accessibility and design consistency, the application utilizes:

Radix UI (@radix-ui/react-slot) for accessible UI primitives
Lucide React for modern, lightweight iconography

Theme management is implemented using next-themes, enabling seamless light and dark mode support throughout the application.

Content Management with Sanity

The platform is deeply integrated with Sanity v5 as its headless content management system. Integration between Next.js and Sanity is handled through next-sanity, providing a streamlined content delivery workflow.

A key feature of the architecture is the implementation of real-time content updates through sanity/lib/live.ts which it configures itself defineLive from next-sanity/live. This setup connects to Sanity’s experimental Live Content API and exposes:

sanityFetch
SanityLive

These utilities enable live content synchronization without requiring manual cache invalidation or page revalidation.

Markdown Content Workflow

Content authoring and rendering are powered by a Markdown-based workflow:

CMS-side tooling

markdown-it
sanity-plugin-markdown

Frontend editing

@uiw/react-md-editor

This combination provides a rich editing experience while maintaining content portability and simplicity.

Additional content utilities include:

@sanity/image-url for optimized image URL generation
slugify for creating URL-safe slugs from content titles and section names

Authentication and Authorization

Authentication is implemented using NextAuth v5 (Beta), providing a standardized framework for:

User authentication
Session management
Authorization flows
Protected route handling

This enables differentiated access patterns, such as draft-only pitch previews for authenticated users while maintaining public access to published content.

Validation and Type Safety

While TypeScript ensures compile-time correctness, runtime validation is handled with Zod. Zod schemas are used to validate:

User inputs
API payloads
CMS data structures
Shared frontend/backend contracts

This approach helps maintain data integrity across application boundaries and reduces runtime errors caused by malformed data.

Monitoring and Observability

Application monitoring and error tracking are managed through Sentry's Next.js SDK (@sentry/nextjs).

Sentry provides:

Error capture and reporting
Performance monitoring
Request tracing
Server and client-side diagnostics

Coverage extends across:

API routes
Server Components
Client Components

This ensures comprehensive visibility into application health and performance.

Development Workflow and Tooling

Project lifecycle management is driven by npm scripts built on top of the Next.js toolchain:

npm run dev     # next dev --turbopack
npm run build   # next build
npm run start   # next start
npm run lint    # next lint
Sanity Type Generation Pipeline

A dedicated type-generation workflow ensures strong alignment between the CMS schema and application types.

The typegen process:

Loads environment variables via dotenv-cli
Extracts the Sanity schema into ./sanity/extract.json
Runs sanity typegen generate
Produces strongly typed definitions for application-wide use

This pipeline is automatically executed through:

predev
prebuild

As a result, both local development and production builds remain synchronized with the latest CMS schema definitions.

Code Quality and Static Analysis

Code quality is enforced using ESLint 10, configured with:

eslint-config-next
@eslint/eslintrc

The linting setup covers both general JavaScript/TypeScript best practices and Next.js-specific conventions.

Type support is further strengthened through:

typescript
@types/react
@types/node
@types/markdown-it

This ensures accurate typing across the entire development stack.

Architectural Summary

The overall architecture combines:

Next.js 16 (App Router)
React 19
TypeScript
Sanity CMS v5
NextAuth v5
Tailwind CSS 4
styled-components 6
Markdown tooling
Zod
Sentry

Together, these technologies create a modern, scalable, and type-safe content platform capable of managing, editing, and presenting structured startup pitch content with real-time updates, robust authentication, strong validation, and comprehensive observability.

Startup Pitch

Overview