Getting Started
Relevant source files
The following files were used as context for generating this wiki page:This document provides a technical overview of the Grapevine website project, covering its technology stack, project structure, and development workflow. The application is a modern website built with Next.js, serving as the "Smart Communications Platform for Business Travel."
The codebase uses the Next.js App Router for page management, TypeScript for type safety, and Tailwind CSS for styling. It is designed to be a static and server-rendered marketing site with a focus on SEO and component-based architecture.
Sources: README.md:1-3, package.json:2
Tech Stack
The project is built using a modern web development stack.
| Category | Technology | Description |
|---|---|---|
| Framework | Next.js 16 | The core React framework for the application. |
| Language | TypeScript | For static typing. |
| Styling | Tailwind CSS 4 | A utility-first CSS framework. |
| Animations | Framer Motion | For UI animations. |
| Icons | Lucide React | A library of SVG icons. |
| Linting | ESLint | For code quality and consistency. |
| Formatting | Prettier | For automated code formatting. |
Sources: README.md:5-10, package.json:14-29
Project Setup
Prerequisites
To run this project, you need Node.js version 18 or higher, along with a package manager like npm, yarn, pnpm, or bun.
Sources: README.md:12-14
Installation
Clone the repository and install the dependencies using npm:
npm install
Sources: README.md:16-18
Development
To start the local development server, run the following command. The application will be available at http://localhost:3000.
npm run dev
Sources: README.md:20-22
Production Build
To build the application for production, use:
npm run build
To start the production server after building, use:
npm run start
Sources: README.md:24-28
Core Scripts
The package.json file defines several scripts for common development tasks.
| Command | Description |
|---|---|
npm run dev | Starts the Next.js development server. |
npm run build | Creates a production build of the app. |
npm run start | Starts the production server. |
npm run lint | Runs ESLint to check for code issues. |
npm run format | Formats all code using Prettier. |
npm run format:check | Checks if the code is formatted correctly. |
Sources: package.json:5-11, README.md:30-36
Project Structure
The repository follows a standard Next.js project structure. The diagram below illustrates the key directories and their functions.
This diagram shows the main directories: app for routes, components for shared React components, lib for utilities, and public for static files.
app/: Contains all application routes, layouts, and pages, following the Next.js App Router conventions.components/: Home to reusable React components. It is further organized into subdirectories for animations, custom icons, and UI primitives.lib/: Includes utility functions, such as the SEO schema generators inseo.ts.public/: Stores static assets like images and fonts.
Sources: README.md:38-44
Application Layout and Configuration
Root Layout
The main application shell is defined in app/layout.tsx. This file sets up the HTML structure, loads the custom "Ambit" font, and applies global metadata. It wraps all page content with the Header and Footer components, ensuring a consistent layout across the site.
The layout also injects the Organization schema as JSON-LD for SEO purposes on every page.
Sources: app/layout.tsx:1-104
Site Configuration
Global site configuration is centralized in lib/seo.ts. The siteConfig object holds essential metadata used throughout the application for SEO and content.
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",
linkedInUrl: "https://www.linkedin.com/company/grapevinetravel",
locale: "en_GB",
keywords: [
"travel management",
"TMC software",
// ...
],
};
This configuration is used by the root layout to set default meta tags and by various schema generators within the same file.
Sources: lib/seo.ts:1-20, app/layout.tsx:61-63
Component Architecture
The frontend is built with a component-based approach. Pages are composed of smaller, reusable components found in the components/ directory.
Example: Contact Form
A key interactive element is the ContactForm component, located at components/contact-form.tsx. It demonstrates several important concepts:
- State Management: Uses the
useStatehook to manage form data, errors, and submission status (isLoading,isSubmitted). - Client-Side Validation: The
validateFormfunction checks for required fields and valid email formats before submission. - API Interaction: The
handleSubmitfunction sends aPOSTrequest to the/api/contactendpoint with the form data.
The submission flow is illustrated in the sequence diagram below.
This diagram shows the user interacting with the form, the component performing validation, and the subsequent API call upon successful validation.
Sources: components/contact-form.tsx
SEO and Structured Data
The project places a strong emphasis on Search Engine Optimization (SEO) through metadata and structured data (JSON-LD).
Metadata Management
- Global Metadata: Default metadata, including
title,description, Open Graph, and Twitter card information, is defined inapp/layout.tsx. - Page-Specific Metadata: Individual pages, such as
app/product/page.tsx, export ametadataobject to override or extend the global defaults.
Sources: app/layout.tsx:60-100, app/product/page.tsx:8-19
Structured Data Schemas
The lib/seo.ts file provides a suite of functions to generate various schema.org JSON-LD objects. These schemas help search engines understand the content and context of the pages.
The following class diagram shows the structure of the different schema types defined.
This diagram illustrates some of the key schema interfaces available for generating structured data.
Pages import and use these generator functions to create specific schemas. For example, app/product/page.tsx generates SoftwareApplication and BreadcrumbList schemas.
// in app/product/page.tsx
export default function ProductsPage() {
const softwareSchema = generateSoftwareSchema();
const breadcrumbSchema = generateBreadcrumbSchema([
{ name: "Home", path: "/" },
{ name: "Product" },
]);
return (
<>
<JsonLd data={softwareSchema} />
<JsonLd data={breadcrumbSchema} />
{/* ... */}
</>
);
}
Sources: lib/seo.ts:22-80, app/product/page.tsx:21-28