Coding Conventions
Relevant source files
The following files were used as context for generating this wiki page:This document outlines the coding conventions, standards, and tooling used in the grapevine_website project. Adhering to these guidelines ensures code consistency, quality, and maintainability across the codebase. The conventions are enforced through a combination of Prettier for code formatting and ESLint for code quality and style rules.
The project is built with Next.js 16 and TypeScript, styled with Tailwind CSS 4. The conventions cover everything from project structure and dependency management to styling and component design.
Tooling and Automation
The project relies on a set of development tools defined in package.json to automate formatting and linting. These tools are integrated into npm scripts for easy execution.
Sources: package.json, README.md:25-31
Key Dependencies
| Dependency | Version | Purpose |
|---|---|---|
next | 16.0.3 | The React framework for production. |
react | 19.2.0 | A JavaScript library for building user interfaces. |
typescript | ^5 | A typed superset of JavaScript that compiles to plain JavaScript. |
tailwindcss | ^4 | A utility-first CSS framework for rapid UI development. |
eslint | ^9 | A tool for identifying and reporting on patterns in JavaScript code. |
prettier | ^3.4.2 | An opinionated code formatter. |
prettier-plugin-tailwindcss | ^0.6.11 | A Prettier plugin that automatically sorts Tailwind CSS classes. |
Sources: package.json:14-34
NPM Scripts
The following scripts are available to developers for maintaining code quality.
| Command | Description |
|---|---|
npm run lint | Runs ESLint to check for code quality issues. |
npm run format | Formats all relevant files using Prettier. |
npm run format:check | Checks if all files are formatted correctly without making changes. |
Sources: package.json:8-11, README.md:25-31
Development Workflow
The standard development workflow involves running formatters and linters before committing code to ensure all changes adhere to the project's standards.
This diagram illustrates the local development quality-check process.
Sources: package.json:8-11
Code Formatting
Code formatting is handled exclusively by Prettier. The configuration is defined in .prettierrc and is designed to be non-configurable by individual developers to ensure uniformity.
Sources: .prettierrc
Prettier Configuration
The configuration ensures a consistent style across all JavaScript, TypeScript, JSON, CSS, and Markdown files.
| Option | Value | Description |
|---|---|---|
printWidth | 100 | Lines will wrap at 100 characters. |
tabWidth | 2 | Tabs are 2 spaces wide. |
useTabs | false | Spaces are used for indentation instead of tabs. |
semi | true | Semicolons are required at the end of statements. |
singleQuote | false | Double quotes are used for strings. |
trailingComma | "es5" | Trailing commas are used where valid in ES5 (objects, arrays, etc.). |
bracketSpacing | true | Spaces are printed between brackets in object literals. |
jsxSingleQuote | false | Double quotes are used in JSX. |
Sources: .prettierrc
Tailwind CSS Class Sorting
The project uses prettier-plugin-tailwindcss to automatically sort Tailwind CSS classes in a consistent order. This is a critical convention for maintaining readable and predictable markup in components.
Sources: package.json:31
Code Quality & Linting
ESLint is used to enforce code quality rules beyond simple formatting. The configuration in .eslintrc.json extends several recommended rule sets.
ESLint Configuration
The configuration is based on a hierarchy of presets, ensuring best practices for general JavaScript, Next.js, and compatibility with Prettier.
{
"extends": ["eslint:recommended", "next/core-web-vitals", "prettier"]
}
Sources: .eslintrc.json:2
The extends array shows the following conventions:
eslint:recommended: Enforces a baseline of recommended JavaScript rules.next/core-web-vitals: Enforces rules specific to Next.js for performance and best practices.prettier: Disables ESLint rules that would conflict with Prettier, making Prettier the single source of truth for formatting.
Project Structure
The project follows the standard Next.js App Router structure. Key directories and their purposes are defined in the README.md file.
This diagram shows the high-level directory structure.
Sources: README.md:33-39
Styling Conventions
Styling is managed by Tailwind CSS v4. A global stylesheet app/globals.css defines the core theme using CSS custom properties within a @theme block.
Color Palette
The color palette is defined as CSS variables, providing a consistent theming system for use in Tailwind utility classes.
| Category | Variable Name | Hex Value |
|---|---|---|
| Brand Colors | --color-primary | #1980ef |
--color-primary-hover | #1570d6 | |
--color-primary-light | #3d96f3 | |
| Base Colors | --color-white | #ffffff |
--color-navy | #0c0e2d | |
--color-light | #f3f7fc | |
| Semantic Colors | --color-body | #5c6876 |
--color-muted | #9ca9b7 | |
| State Colors | --color-error | #ef4444 |
--color-success | #10b981 |
Sources: app/globals.css:4-39
Font Usage
The project uses a local font, "Ambit", which is configured in the root layout. This ensures consistent typography across the entire application. The font files are loaded with varying weights and styles.
// app/layout.tsx
const ambit = localFont({
src: [
{
path: "../public/fonts/Ambit/Ambit-Regular.ttf",
weight: "400",
style: "normal",
},
// ... other weights and styles
],
variable: "--font-ambit",
});
Sources: app/layout.tsx:5-52
The font is then applied to the <body> tag via a CSS variable, making it the default sans-serif font for the project.
Sources: app/globals.css:42, app/layout.tsx:131
SEO and Metadata
A standardized approach to Search Engine Optimization (SEO) is implemented through a combination of a central configuration file and per-page metadata exports.
Site Configuration
A global siteConfig object contains default metadata for the entire site, such as the site name, description, URL, and social media handles. This ensures consistency and a single source of truth for site-wide SEO information.
// lib/seo.ts
export const siteConfig = {
name: "Grapevine",
description:
"Grapevine detects gaps in itineraries and sends personalised prompts that encourage traveller to book in-platform, driving compliance for corporates and revenue for TMCs.",
url: process.env.NEXT_PUBLIC_APP_URL || "https://grapevine.travel",
ogImage: "/images/og-image.png",
xHandle: "grapevine_trvl",
// ...
};
Sources: lib/seo.ts:1-23
Page-Level Metadata
Each page in the app/ directory should export a metadata object of type Metadata from next. This allows for page-specific titles, descriptions, and canonical URLs, overriding the defaults where necessary.
// app/about/page.tsx
import { Metadata } from "next";
export const metadata: Metadata = {
title: "About",
description:
"Meet the team behind Grapevine...",
alternates: {
canonical: "/about",
}
};
Sources: app/about/page.tsx:3-11
Structured Data (JSON-LD)
The project uses helper functions in lib/seo.ts to generate JSON-LD structured data schemas (e.g., Organization, WebPage, Service). These are then rendered in the page layout or specific page components using a <JsonLd> component, enhancing how search engines understand the site's content.
Sources: lib/seo.ts:80-99, app/layout.tsx:129, app/about/page.tsx:14-19