Environment Configuration
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Recoup Admin dashboard is built using a modern JavaScript ecosystem centered around Next.js 16 and React 19. The environment configuration is defined through a combination of package manifest files, TypeScript configurations, and framework-specific settings that enable features like the App Router and Turbopack for development.
The project structure is organized to separate concerns between application logic (app/), shared UI components (components/), and global styling configurations, ensuring a scalable environment for managing the Recoup platform's administrative tasks.
Sources: README.md:1-15, package.json:1-25
Core Development Environment
The development environment relies on specific versioning for Node.js and package management to ensure consistency across different developer machines.
Prerequisites and Tooling
The environment requires Node.js v22 or higher and pnpm v10 or higher. The project utilizes Turbopack during development to enhance build performance.
Sources: README.md:10-23, package.json:7-12
| Tool | Version / Value | Purpose |
|---|---|---|
| Node.js | v22+ | Runtime environment |
| pnpm | v10+ | Package manager |
| Next.js | 16.0.10 | Web framework (App Router) |
| TypeScript | 5.x | Programming language |
| React | 19.2.1 | UI library |
Dependency Management
Dependencies are categorized into runtime requirements (e.g., @tanstack/react-table, @privy-io/react-auth) and development-only tools (e.g., eslint, tailwindcss).
Sources: package.json:13-40
Project Architecture and Routing
The environment is configured to support the Next.js App Router, which dictates the file-system-based routing architecture.
Directory Structure
The environment is structured as follows:
- app/: Contains the core application logic, pages, and layouts using the App Router.
- components/: Houses reusable React components, including specialized modules like
CodingAgentSlackTagsandSandboxOrgs. - lib/: Contains utility functions and shared logic.
- types/: Centralized TypeScript interface and type definitions.
Sources: README.md:25-40
Visual Flow of Application Setup
The following diagram illustrates how the environment initializes the application through the root layout and providers.
The diagram shows the initialization flow from the execution of the development script to the rendering of the layout and its nested providers.
Sources: package.json:7-10, app/layout.tsx:28-55
TypeScript Configuration
The environment uses a strict TypeScript configuration defined in tsconfig.json to ensure type safety across the codebase. Key configurations include the use of path aliases and modern module resolution.
Key Compiler Options
- Target:
ES2022for modern JavaScript features. - Path Aliases: The
@/*prefix is mapped to the root directory for cleaner imports. - Module Resolution: Set to
bundlerto align with Next.js/Turbopack requirements. - Strict Mode: Enabled to enforce rigorous type checking.
Sources: tsconfig.json:1-22
{
"compilerOptions": {
"target": "ES2022",
"moduleResolution": "bundler",
"paths": {
"@/*": ["./*"]
}
}
}
Sources: tsconfig.json:4-16
Styling and Theme Configuration
The project utilizes Tailwind CSS 4 for styling, which is configured via CSS variables and PostCSS.
Global Styles and Variables
Themes are managed using CSS variables within app/globals.css, supporting both light and dark modes through the prefers-color-scheme media query.
Sources: app/globals.css:3-35
| Variable | Light Default | Dark Default |
|---|---|---|
| --background | #ffffff | #0a0a0a |
| --foreground | #0a0a0a | #fafafa |
| --primary | #171717 | #fafafa |
| --border | #e5e5e5 | #262626 |
Component-Level Theme Integration
The charting system (components/ui/chart.tsx) leverages these environment variables to dynamically inject styles into the DOM based on the active theme. It uses a ChartStyle component to map configuration keys to CSS variables like --color-count.
Sources: components/ui/chart.tsx:75-108
Conclusion
The Recoup Admin environment is a highly structured Next.js configuration that prioritizes type safety, modern performance (Turbopack), and flexible styling (Tailwind CSS 4). By enforcing strict Node.js and TypeScript standards, the system ensures a stable foundation for the dashboard's complex data visualization and administrative tools.