Project Structure

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• package.json
• app/layout.tsx
• app/page.tsx
• app/about/page.tsx
• app/product/page.tsx
• app/sitemap.ts
• components/footer.tsx
• components/contact-form.tsx
• lib/seo.ts

This document outlines the project structure for the Grapevine website. The project is built using Next.js with the App Router, TypeScript for type safety, and Tailwind CSS for styling. The structure is designed to be modular and scalable, with a clear separation of concerns between routing, UI components, utility functions, and static assets.

The core technologies defining this structure are:

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS 4
• Animations: Framer Motion

Sources: README.md, package.json

High-Level Directory Structure

The project follows a conventional Next.js App Router layout. The main directories are organized to separate routing logic, reusable components, utility functions, and public assets.

This diagram illustrates the top-level folder organization.

Key Directories

Directory	Description
app/	Contains all application routes, pages, and layouts, following the Next.js App Router conventions.
components/	Holds reusable React components used across different pages.
lib/	Contains utility functions, helper scripts, and shared business logic.
public/	Stores static assets like images, fonts, and the site.webmanifest file.

Sources: README.md:27-33

app/ Directory (Routing)

The app directory is the heart of the application's routing and page structure. Each sub-folder within app corresponds to a URL path segment.

• page.tsx: Defines the unique UI for a specific route.
• layout.tsx: Defines a shared UI shell for a segment and its children. The root layout at app/layout.tsx is applied to all routes.
• sitemap.ts: Programmatically generates the sitemap.xml file, defining the site's structure for search engines.

Sources: app/layout.tsx, app/page.tsx, app/sitemap.ts

Routing Structure Example

The file system maps directly to URL paths. For example, app/about/page.tsx renders the content for the /about URL.

This diagram shows how file paths in the app directory translate to browser URLs.

Root Layout

The root layout in app/layout.tsx wraps all pages and includes the global <html> and <body> tags. It is responsible for:

• Loading the custom "Ambit" font.
• Defining global metadata and SEO configurations (title, description, Open Graph, etc.).
• Injecting the <Header> and <Footer> components.
• Rendering child pages within the <main> element.
• Generating and injecting the Organization JSON-LD schema for SEO.

Sources: app/layout.tsx:1-147

components/ Directory (UI Components)

This directory contains all reusable React components. It is further organized into subdirectories for clarity.

• primitives/: Contains basic, low-level UI elements like Button, Input, Select, etc.
• icons/: Holds custom SVG icon components, such as XIcon and LinkedInIcon.
• animations/: Contains components related to animations, likely using Framer Motion.

The README.md also mentions a custom Icon component for dynamically loading icons from the lucide-react library.

Sources: README.md:29-32, components/footer.tsx, components/contact-form.tsx

Component Composition Example

Pages are constructed by composing multiple smaller components. For instance, the About page (app/about/page.tsx) assembles several components to build its view.

This diagram shows the composition of the "About" page from various components.

Contact Form Logic

The components/contact-form.tsx component demonstrates a typical client-side form with state management, validation, and an API call.

This sequence diagram illustrates the user interaction flow for submitting the contact form.

lib/ Directory (Utilities)

The lib directory is for shared, non-component code. A key example is lib/seo.ts, which centralizes all logic related to Search Engine Optimization.

SEO Utilities (lib/seo.ts)

This file exports a siteConfig object and several functions to generate structured data (JSON-LD) schemas. This approach keeps SEO logic separate from the page components that use it.

Element	Description
siteConfig	An object containing site-wide SEO metadata like name, description, URL, and social media handles.
generateOrganizationSchema()	Creates a schema.org/Organization JSON-LD object.
generateWebPageSchema()	Creates a schema.org/WebPage JSON-LD object.
generateSoftwareSchema()	Creates a schema.org/SoftwareApplication JSON-LD object.
generateBreadcrumbSchema()	Creates a schema.org/BreadcrumbList JSON-LD object.
generateFAQSchema()	Creates a schema.org/FAQPage JSON-LD object.

Pages import these functions to inject the appropriate structured data. For example, app/product/page.tsx calls generateSoftwareSchema() and generateBreadcrumbSchema().

Sources: lib/seo.ts, app/product/page.tsx:19-23

Tooling and Configuration

The project's tooling and dependencies are defined in package.json.

NPM Scripts

The following scripts are available for development, building, and maintenance.

Command	Description
npm run dev	Starts the Next.js development server.
npm run build	Creates a production-ready build of the application.
npm run start	Starts the production server after a build.
npm run lint	Runs ESLint to check for code quality issues.
npm run format	Formats code across the project using Prettier.
npm run format:check	Checks if the code is formatted correctly without making changes.

Sources: package.json:5-11, README.md:19-25

Key Dependencies

The project relies on several key libraries defined in package.json.

Dependency	Usage
next	The core React framework.
react / react-dom	The UI library.
tailwindcss	For utility-first CSS styling.
framer-motion	For animations.
lucide-react	For icons.
clsx / tailwind-merge	Utilities for constructing dynamic and conflict-free class names.

Sources: package.json:13-19

Summary

The grapevine_website project is structured as a modern Next.js application. It leverages the App Router for a file-system-based routing system that is both intuitive and powerful. The clear separation of concerns—with routes in app/, reusable UI in components/, and shared logic in lib/—creates a maintainable and scalable codebase. This organization allows developers to easily locate code, understand data flow, and contribute new features efficiently.