Developer Tooling & Linting
Relevant source files
The following files were used as context for generating this wiki page:
Developer tooling and linting for the Recoup Admin dashboard provide a structured environment for building, maintaining, and scaling the application. The project leverages a modern TypeScript-based stack centered around Next.js 16, utilizing Turbopack for optimized development performance and ESLint for code quality enforcement.
The tooling suite is designed to ensure type safety through TypeScript 5, consistent styling via Tailwind CSS 4, and efficient package management using pnpm. These tools work in tandem to support the App Router architecture and React 19 features implemented across the repository.
Sources: package.json:1-35, README.md:1-45
Build and Development Scripts
The project defines a standard set of scripts for the development lifecycle, including local development, production building, and code quality checks.
| Script | Command | Description |
|---|---|---|
dev | next dev --turbopack | Starts the development server using the Turbopack incremental bundler. |
build | next build | Compiles the application for production deployment. |
start | next start | Starts the production server after a build. |
lint | eslint . | Runs ESLint across the entire project directory to find and report code issues. |
Sources: package.json:5-10, README.md:17-27
Workflow Diagram
The following diagram illustrates the standard developer workflow from environment setup to production build:
The flow shows the progression from dependency installation through the development loop to final production execution.
Sources: README.md:14-30
TypeScript Configuration
The project is configured with TypeScript 5, targeting ES2022 to leverage modern JavaScript features while ensuring compatibility with the Next.js runtime.
Key Compiler Options
The tsconfig.json enforces a strict type-checking environment to minimize runtime errors:
- Strict Mode:
strict: trueis enabled, requiring rigorous type definitions. - Module Resolution: Uses
bundlerresolution for compatibility with modern build tools. - Path Aliases: The
@/*prefix is mapped to the root directory./*to simplify imports. - Next.js Integration: Includes the
nextplugin and specific types for the.nextdirectory to support App Router features.
Sources: tsconfig.json:1-29, package.json:33
Linting and Code Quality
Code quality is enforced through ESLint, specifically utilizing the eslint-config-next package to align with Next.js best practices and Web Vitals requirements.
Tooling Versions
| Tool | Version | Purpose |
|---|---|---|
| ESLint | ^8.57.0 | Core linting engine. |
| eslint-config-next | ^15.3.0 | Next.js specific rules (core-web-vitals). |
| TypeScript | ^5 | Static type analysis. |
Sources: package.json:28-33, README.md:40-45
Styling Tooling: Tailwind CSS 4
The project utilizes Tailwind CSS 4, integrated via PostCSS. This version introduces an @theme block within the global CSS for managing design tokens and variables directly.
Theme Configuration
The styling engine maps CSS variables to Tailwind theme properties:
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-border: var(--border);
}
Sources: app/globals.css:38-50, package.json:32
UI Development Tooling
The project includes specialized tooling for UI components, such as a custom chart configuration system that bridges React state with CSS variables for dynamic themes (light/dark).
Chart Configuration Architecture
The components/ui/chart.tsx file provides a ChartContainer that dynamically generates CSS variables based on a ChartConfig object.
This diagram represents how configuration objects are transformed into CSS variables used by the charting engine.
Sources: components/ui/chart.tsx:14-100
Conclusion
The developer tooling in the Recoup Admin repository focuses on developer velocity and code reliability. By combining Turbopack for fast refreshes, TypeScript for safety, and ESLint for standards, the project provides a robust environment for enterprise dashboard development.
Sources: README.md:38-45