The Brooklyn Rail

A modern, performant, and accessible website for The Brooklyn Rail, built with Next.js and Directus Cloud.

🏆 2025 Webby Honoree — Best Visual Design - Function (Webby Awards)

Credits & Recognition

This site was completely re-platformed and re-designed in 2024 to consolidate and make accessible the Rail's vast archive of articles and videos chronicling art and culture since 2000.

Team

Role	Person
Digital & Brand Strategy	Juliette Cezzar & Jeremy Zilar
Site Design	Juliette Cezzar & Jeremy Zilar
Site Development	Jeremy Zilar

About the team:

Juliette Cezzar — Designer, educator, and writer. Former Director of Communication Design at Parsons School of Design and President of AIGA NY. Board member of The Brooklyn Rail since 2018.
Jeremy Zilar — Designer, strategist, and engineer. Board member of The Brooklyn Rail. Formerly oversaw blogs at The New York Times and served as Director of Digital.gov.

Typography

Set in Untitled Sans and Untitled Serif by Klim Type Foundry.

Special Thanks

William Friedman, Alex van der Valk, and Jose Varela at Directus for their continuing technical guidance and support towards managing and migrating our archive data.

Brand Guidelines

Brooklyn Rail Brand Guidelines 2024 (Figma)

Technology Stack

Core Technologies

Next.js 15 - React framework for server-rendered applications
TypeScript - Type-safe JavaScript
Directus Cloud - Headless CMS for content management
Tailwind CSS - Utility-first CSS framework
Vercel - Hosting and deployment platform

Additional Services

Algolia - Search functionality
Mailchimp - Newsletter management
PostHog - Analytics and user tracking
Google Analytics - Additional analytics
Stripe - Payment processing for donations
Airtable - Data management

Development Tools

ESLint - Code linting
Prettier - Code formatting
SASS - CSS preprocessor
Luxon - Date/time handling

Architecture Overview

Key Integration Points

Directus Cloud (studio.brooklynrail.org) — Primary content management system. All articles, issues, events, contributors, and media are managed here.
Vercel — Hosts the main Next.js application with automatic deployments from the main branch.
Cloudflare Workers — Routes /donate traffic to Netlify-hosted Hugo site.
Algolia — Provides search functionality across all content types.

Getting Started

Prerequisites

Node.js 20+
Yarn package manager
Access to Directus Cloud instance
Environment variables (see .env.example)

Local Development Setup

Clone the repository:

git clone https://github.com/brooklynrail/app.git
cd app

Install dependencies:

yarn install

Create environment file:

cp .env.example .env.local

Update .env.local with your credentials:

DIRECTUS_URL - Your Directus Cloud instance URL
DIRECTUS_TOKEN - Your Directus API token
ALGOLIA_APP_ID - Algolia application ID
ALGOLIA_SEARCH_KEY - Algolia search API key
ALGOLIA_ADMIN_KEY - Algolia admin API key
MAILCHIMP_API_KEY - Mailchimp API key
MAILCHIMP_API_SERVER - Mailchimp server prefix
MAILCHIMP_AUDIENCE_ID - Mailchimp audience/list ID

Start the development server:

yarn dev

Open https://localhost:3000 in your browser

Development Scripts

yarn dev - Start development server (with HTTPS)
yarn build - Build production bundle
yarn start - Start production server
yarn lint - Run ESLint
yarn type-check - Run TypeScript type checking
yarn validate - Run both linting and type checking

Content Types

The Brooklyn Rail website manages several types of content through Directus:

Articles

Core content type for all written pieces
Includes fields for title, body, excerpt, contributors, images
Connected to issues and sections
Supports featured articles and artwork

Issues

Monthly and special issues
Contains articles, sections, and metadata
Supports both regular monthly issues and special editions

Sections

Content categories (e.g., Art, Poetry, Fiction, ArtSeen, Critics Page)
Organizes articles by topic
Includes metadata and sorting

Contributors

Authors and contributors to the Rail
Manages biographical information and contributions

Events

The New Social Environment events
Includes event details, participants, and scheduling

Exhibitions

Art exhibitions featured in the Rail
Includes location, dates, and related information

People

Profiles of artists, writers, and other figures
Connected to articles and events

Collections

Curated groups of content
Used for homepage features and special sections

Pages

Static content pages
Includes about pages, contact information, etc.

Project Structure

app/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── article/       # Article endpoints
│   │   ├── collections/   # Collections endpoints
│   │   ├── events/        # Events endpoints
│   │   ├── issues/        # Issues endpoints
│   │   ├── preview/       # Preview mode endpoints
│   │   ├── refresh/       # Cache refresh endpoints
│   │   └── ...
│   ├── hooks/             # Custom React hooks
│   ├── providers/         # Context providers (PostHog, etc.)
│   ├── [year]/            # Dynamic year routes (legacy redirects)
│   ├── about/             # About pages
│   ├── contributor/       # Contributor pages
│   ├── events/            # Events listing and detail
│   ├── exhibitions/       # Exhibitions
│   ├── issues/            # Issue pages
│   ├── preview/           # Preview mode pages
│   ├── search/            # Search page
│   ├── section/           # Section pages
│   ├── tribute/           # Tribute pages
│   └── ...
├── components/            # React components
│   ├── ads/              # Advertisement components
│   ├── article/          # Article-related components
│   ├── banner/           # Homepage banner
│   ├── collections/      # Collection displays
│   ├── events/           # Event components
│   ├── header/           # Site header
│   ├── footer/           # Site footer
│   ├── issuePage/        # Issue page components
│   ├── search/           # Search components
│   └── ...
├── lib/                   # Shared utilities
│   ├── directus.tsx      # Directus client configuration
│   ├── types.ts          # TypeScript type definitions
│   ├── utils.tsx         # Utility functions
│   └── utils/            # Additional utilities
├── public/               # Static assets
│   ├── images/           # Static images
│   └── pdf/              # PDF files
├── styles/               # Global styles
│   ├── globals.scss      # Global CSS
│   ├── fonts.scss        # Font definitions
│   ├── themes.scss       # Theme variables
│   └── ...
└── types/                # Additional TypeScript types

Deployment

Production (Vercel)

The site is automatically deployed to Vercel when changes are pushed to the main branch. Preview deployments are created for pull requests.

Production URL: https://brooklynrail.org
Preview URL: https://preview.brooklynrail.org (requires Vercel login)

Environment Variables

All environment variables must be set in the Vercel project settings for production deployment. See .env.example for required variables.

Deployment Workflow

Create a feature branch from main
Make changes and test locally
Push branch and create a Pull Request
Vercel creates a preview deployment automatically
Review and test the preview deployment
Merge to main to deploy to production

URL Structure & Redirects

Current URL Patterns

Content Type	URL Pattern	Example
Issue	`/issues/[issueSlug]`	`/issues/2024-09`
Article	`/issues/[issueSlug]/[section]/[slug]`	`/issues/2024-09/art/my-article`
Section	`/section/[slug]`	`/section/artseen`
Contributor	`/contributor/[slug]`	`/contributor/john-smith`
Event	`/event/[year]/[month]/[day]/[slug]`	`/event/2024/09/15/my-event`
Exhibition	`/exhibition/[slug]`	`/exhibition/gallery-show`
Tribute	`/tribute/[tributeSlug]`	`/tribute/artist-name`

Legacy Redirects

The site maintains redirects from the old URL structure for backwards compatibility:

Old Pattern	New Pattern
`/2024/09/`	`/issues/2024-09`
`/2024/09/artseen/`	`/issues/2024-09/artseen`
`/special/River_Rail/`	`/issues/River_Rail/`

See vercel.json and the legacy redirect middleware for complete redirect rules.

Contributing

Fork the repository
Create a feature branch
Make your changes
Submit a pull request

Please ensure your code follows the project's coding standards and includes appropriate tests.

Name		Name	Last commit message	Last commit date
Latest commit History 2,663 Commits
.vscode		.vscode
app		app
components		components
lib		lib
public		public
styles		styles
types		types
.env.example		.env.example
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierrc.js		.prettierrc.js
HANDOFF.md		HANDOFF.md
README.md		README.md
eslint.config.js		eslint.config.js
launch.json		launch.json
next.config.js		next.config.js
package.json		package.json
postcss.config.js		postcss.config.js
settings.json		settings.json
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
tslint.json		tslint.json
vercel.json		vercel.json
yarn.lock		yarn.lock

brooklynrail/app

Folders and files

Latest commit

History

Repository files navigation

The Brooklyn Rail

Credits & Recognition

Team

Typography

Special Thanks

Brand Guidelines

Technology Stack

Core Technologies

Additional Services

Development Tools

Architecture Overview

Key Integration Points

Getting Started

Prerequisites

Local Development Setup

Development Scripts

Content Types

Articles

Issues

Sections

Contributors

Events

Exhibitions

People

Collections

Pages

Project Structure

Deployment

Production (Vercel)

Environment Variables

Deployment Workflow

URL Structure & Redirects

Current URL Patterns

Legacy Redirects

Contributing

License

Related Documentation

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages