Configuration

Relevant source files

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

• config/site.ts
• lib/api-client.ts
• app/globals.css
• package.json
• E2E_TESTING.md
• app/layout.tsx
• components/layout/footer.tsx

Configuration in the frontend-luan-van project is decentralized, with different aspects of the application's behavior, appearance, and build process managed in dedicated files. This approach separates concerns, making it easier to manage settings for site metadata, API communication, styling, development tooling, and testing.

Key configuration areas include static site information, API client settings, global styling and theming, project scripts and dependencies, and end-to-end testing parameters. These are managed through a combination of TypeScript objects, CSS custom properties, and JSON files.

Site Configuration

Static information about the website, such as its name, description, and social media links, is centralized in config/site.ts. This allows for easy updates to site-wide metadata from a single source.

Sources: config/site.ts, components/layout/footer.tsx

siteConfig Object

The siteConfig object exports all primary site metadata.

// config/site.ts:1-14
export const siteConfig = {
  name: "VisionStore",
  description: "Premium eyewear for modern lifestyle",
  url: "https://visionstore.com",
  links: {
    facebook: "https://facebook.com",
    instagram: "https://instagram.com",
    twitter: "https://twitter.com",
  },
  contact: {
    email: "support@visionstore.com",
    phone: "+84 901 234 567",
    address: "123 Nguyen Hue Street, District 1, Ho Chi Minh City",
  },
}

Sources: config/site.ts:1-14

This configuration is consumed by various components, such as the Footer, to populate UI elements dynamically.

The diagram below illustrates how the siteConfig object is used within the application's component structure.

siteConfig Properties

Key	Type	Description
name	string	The name of the site, "VisionStore".
description	string	A brief description of the site.
url	string	The canonical URL for the website.
links	{ facebook: string, instagram: string, twitter: string }	URLs for social media profiles.
contact	{ email: string, phone: string, address: string }	Contact information for the business.
Sources: config/site.ts:1-14

API Client Configuration

The configuration for the Axios-based API client is defined in lib/api-client.ts. This setup centralizes the backend communication settings, including the base URL and request behavior.

Sources: lib/api-client.ts

API_CONFIG Object

The API_CONFIG object holds the core settings for the apiClient instance. The BASE_URL is notably configured via the NEXT_PUBLIC_API_URL environment variable, with a fallback to http://localhost:3000.

// lib/api-client.ts:21-26
export const API_CONFIG = {
  BASE_URL: process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000",
  TIMEOUT: 10000,
  RETRY_COUNT: 3,
  RETRY_DELAY: 1000,
};

Sources: lib/api-client.ts:21-26

This configuration object is then used to initialize the global apiClient.

API_CONFIG Properties

Key	Type	Default Value	Description
BASE_URL	string	http://localhost:3000	The base URL for all API requests. Pulled from process.env.NEXT_PUBLIC_API_URL.
TIMEOUT	number	10000	Default request timeout in milliseconds.
RETRY_COUNT	number	3	The number of times to retry a failed request.
RETRY_DELAY	number	1000	The delay in milliseconds between request retries.
Sources: lib/api-client.ts:21-26

Styling & Theming

Global styling, including the color palette for both light and dark themes, is configured using CSS custom properties in app/globals.css. This allows for consistent theming across the entire application.

Sources: app/globals.css

CSS Custom Properties

The :root selector defines the default (light) theme, while the .dark class overrides these variables for dark mode.

/* app/globals.css:4-21 */
:root {
  /* Updated to minimalist color scheme for eyewear store */
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --popover: #ffffff;
  --popover-foreground: #1a1a1a;
  --primary: #2d3748;
  --primary-foreground: #ffffff;
  --secondary: #f7fafc;
  --secondary-foreground: #1a1a1a;
  --muted: #f7fafc;
  --muted-foreground: #718096;
  --accent: #4299e1;
  --accent-foreground: #ffffff;
  --destructive: #e53e3e;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #2d3748;
  /* ... */
  --radius: 8px;
}

/* app/globals.css:41-58 */
.dark {
  /* Dark mode with consistent minimalist palette */
  --background: #1a1a1a;
  --foreground: #f7fafc;
  --card: #2d3748;
  --card-foreground: #f7fafc;
  --popover: #2d3748;
  --popover-foreground: #f7fafc;
  --primary: #f7fafc;
  --primary-foreground: #1a1a1a;
  --secondary: #2d3748;
  --secondary-foreground: #f7fafc;
  --muted: #2d3748;
  --muted-foreground: #a0aec0;
  --accent: #4299e1;
  --accent-foreground: #ffffff;
  --destructive: #fc8181;
  --destructive-foreground: #1a1a1a;
  --border: #4a5568;
  --input: #4a5568;
  --ring: #f7fafc;
  /* ... */
}

Sources: app/globals.css:4-21,41-58

Project & Scripts

The package.json file serves as the manifest for the project, defining its name, dependencies, and a set of scripts for common development tasks like running the development server, building the application, and executing tests.

Sources: package.json

Scripts

The scripts section provides convenient command-line shortcuts for developers.

Script	Command	Description
build	next build	Compiles the Next.js application for production.
dev	next dev -p 3001	Starts the Next.js development server on port 3001.
start	next start -p 3001	Starts the production server on port 3001 after a build.
test	jest	Runs Jest unit and integration tests.
test:e2e	playwright test	Runs Playwright end-to-end tests.
test:e2e:ui	playwright test --ui	Opens the Playwright UI for interactive E2E test execution.
Sources: package.json:5-13

End-to-End Testing

E2E testing is configured to use Playwright. Key settings are defined in playwright.config.ts and documented in E2E_TESTING.md.

Sources: E2E_TESTING.md

Playwright Configuration

The testing guide outlines the core configuration for the test environment.

Setting	Value	Description
Base URL	http://localhost:3000	The base URL that Playwright navigates to. Note the port mismatch with dev script (3001).
Timeout	30s	The maximum time allowed for each test to run.
Retries	0 (dev), 2 (CI)	The number of times to retry a failed test.
Browsers	Chromium, Firefox, WebKit	The browsers on which the tests are executed.
Reports	playwright-report/	The directory where HTML reports are generated.
Sources: E2E_TESTING.md:43-49

Application Metadata

The root layout at app/layout.tsx defines the default HTML metadata for all pages, which is crucial for SEO and user experience in the browser.

Sources: app/layout.tsx

metadata Object

The metadata object is exported from the layout file and used by Next.js to populate the <head> tag of the document.

// app/layout.tsx:18-22
export const metadata: Metadata = {
  title: "VisionStore - Premium Eyewear",
  description: "Discover premium eyewear for modern lifestyle. Shop sunglasses, eyeglasses, and sports eyewear.",
  generator: "v0.app",
}

Sources: app/layout.tsx:18-22

This configuration ensures that all pages have a consistent and descriptive title and description by default, which can be overridden by individual pages if needed.