A modern, performant, and accessible website for The Brooklyn Rail, built with Next.js and Directus Cloud.
- 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
- Algolia - Search functionality
- Mailchimp - Newsletter management
- PostHog - Analytics and user tracking
- Google Analytics - Additional analytics
- Node.js 18+
- Yarn package manager
- Access to Directus Cloud instance
- Environment variables (see
.env.example)
- 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.localwith your credentials:
DIRECTUS_URL- Your Directus Cloud instance URLDIRECTUS_TOKEN- Your Directus API tokenALGOLIA_APP_ID- Algolia application IDALGOLIA_SEARCH_KEY- Algolia search API keyALGOLIA_ADMIN_KEY- Algolia admin API keyMAILCHIMP_API_KEY- Mailchimp API keyMAILCHIMP_API_SERVER- Mailchimp server prefixMAILCHIMP_AUDIENCE_ID- Mailchimp audience/list ID
- Start the development server:
yarn dev- Open https://localhost:3000 in your browser
yarn dev- Start development serveryarn build- Build production bundleyarn start- Start production serveryarn lint- Run ESLintyarn type-check- Run TypeScript type checkingyarn validate- Run both linting and type checking
The Brooklyn Rail website manages several types of content through Directus:
- 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
- Monthly and special issues
- Contains articles, sections, and metadata
- Supports both regular monthly issues and special editions
- Content categories (e.g., Art, Poetry, Fiction)
- Organizes articles by topic
- Includes metadata and sorting
- Authors and contributors to the Rail
- Manages biographical information and contributions
- The New Social Environment events
- Includes event details, participants, and scheduling
- Art exhibitions featured in the Rail
- Includes location, dates, and related information
- Profiles of artists, writers, and other figures
- Connected to articles and events
- Curated groups of content
- Used for homepage features and special sections
- Static content pages
- Includes about pages, contact information, etc.
app/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions
├── components/ # React components
│ ├── ads/ # Advertisement components
│ ├── article/ # Article-related components
│ ├── banner/ # Banner components
│ ├── events/ # Event-related components
│ ├── footer/ # Footer components
│ ├── header/ # Header components
│ ├── menu/ # Menu components
│ ├── navBar/ # Navigation components
│ └── popups/ # Popup components
├── lib/ # Shared utilities
├── public/ # Static assets
├── styles/ # Global styles
└── types/ # TypeScript type definitions
The site is automatically deployed to Vercel when changes are pushed to the main branch. Preview deployments are created for pull requests.
All environment variables must be set in the Vercel project settings for production deployment.
- 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.
This project is proprietary and confidential. All rights reserved.
2024-09-07 — we made a series of redirects across the Rail to provide more flexibility around Issues, Special Issues, and Articles.
These changes will make it easier to
- Publish Issues that are out of the year/month model (like Special Issues)
- Make it easier to display Articles outside of the context of an Issue in the front-end site
- Greatly reduce the amount of logic in the code to support Special Issues