Routing & Navigation

Relevant source files

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

• App.tsx
• api/index.ts
• pages/Projects.tsx
• pages/Terminal.tsx
• pages/Stats.tsx
• index.html

The Routing & Navigation system in pcstyledev is bifurcated into a client-side Single Page Application (SPA) architecture and a server-side API routing layer. The frontend utilizes a hash-based routing strategy to manage stateful transitions between cyberpunk-themed modules, while the backend employs a high-performance edge-compatible framework for data retrieval and proxying.

Sources: App.tsx:216-233, api/index.ts:18-22, index.html:56-62

Client-Side Navigation

The frontend architecture relies on react-router-dom for managing the user interface state. It uses a HashRouter to ensure compatibility across various hosting environments without requiring complex server-side redirects.

Navigation Structure

The primary navigation resides in the Layout component within App.tsx. It features a sticky header that dynamically highlights active tabs based on the current URL path. Navigation actions are accompanied by system notifications and optional audio feedback (blips) to maintain the "PCSTYLE_OS" aesthetic.

The diagram above illustrates the high-level flow from application initialization to the rendering of specific route components through the React Router Outlet.
Sources: App.tsx:216-241, App.tsx:43-85

Route Definitions

Routes are defined within a centralized Routes component. Most routes are nested under a main Layout which provides persistent UI elements like the MatrixBackground and CRTOverlay.

Path	Component	Description
/	Projects	Default landing page showing project artifact nodes.
/terminal	Terminal	Virtual OS command-line interface.
/stats	Stats	Real-time coding and contribution metrics dashboard.
/identity	Identity	Personal profile and professional background.

Sources: App.tsx:231-238, pages/Projects.tsx:216-225

State-Driven Navigation

Beyond static path mapping, the system uses URL search parameters to manage complex UI states, particularly within the Projects and Terminal modules.

Search and Filter Parameters

The Projects page synchronizes its internal filter state (search queries, technology stacks, and project status) with the URL. This allows for deep-linking into specific filtered views of the portfolio.

Virtual File System Navigation

The Terminal component implements a specialized internal navigation logic simulating a Unix-like environment. It tracks a currentPath state representing the user's position within a virtual FILE_SYSTEM object.

• cd [dir]: Updates the currentPath array to navigate the object tree.
• ls: Lists keys within the current object level of the FILE_SYSTEM.
• pwd: Translates the currentPath state into a string representation.

Sources: pages/Terminal.tsx:212-230, pages/Terminal.tsx:185-188

Backend API Routing

The backend uses the Hono framework to define a structured API under the /api base path. These routes handle data fetching for projects and provide proxies to external services like WakaTime and GitHub.

API Endpoint Map

The API routing is designed for the Edge Runtime, prioritizing low-latency responses.

Endpoint	Method	Functionality
/api/health	GET	Validates environment variables and system status.
/api/projects	GET	Returns the full list of projects from projects.json.
/api/wakatime/summary	GET	Proxies and aggregates coding time statistics.
/api/github/stats	GET	Fetches and processes user contribution data.

Sources: api/index.ts:101-115, api/index.ts:124-140, api/index.ts:251-265

Routing Middleware

The API includes global and route-specific middleware for logging, CORS enablement, and credential validation.

// Example of route-specific protection in API routing
routes.use('/wakatime/*', async (c, next) => {
  if (!process.env.WAKATIME_API_KEY) {
    return c.json({ error: 'System misconfigured: WakaTime API key missing' }, 500)
  }
  await next()
})

Sources: api/index.ts:38-48, api/index.ts:111-115

Summary

Navigation in pcstyledev is a multi-layered system that balances aesthetic immersion with functional state management. Client-side routing via HashRouter enables seamless transitions between modules like the Terminal and Projects gallery, while the Hono-powered API routing ensures secure and efficient data delivery at the edge.

Sources: App.tsx:226, api/index.ts:21, pages/Terminal.tsx:142