Build & Deployment Guide
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Recoup Admin dashboard is a modern web application built using Next.js 16 and the App Router. It serves as the primary administrative interface for the Recoup platform, providing tools for monitoring sandboxes, organization repository commits, user logins, and agent activities.
This guide outlines the technical requirements, development workflows, and production build processes necessary to maintain and deploy the application. The project leverages a high-performance stack including TypeScript 5, Tailwind CSS 4, and Turbopack for development efficiency.
Sources: README.md:1-5, package.json:11-20
Development Environment Setup
Prerequisites
To ensure compatibility and performance, the project requires specific versions of the Node.js runtime and package managers.
| Requirement | Version |
|---|---|
| Node.js | v22+ |
| pnpm | v10+ |
| TypeScript | v5 |
Sources: README.md:10-12, package.json:28-32
Installation and Local Development
The project uses pnpm for dependency management. To set up the local environment, dependencies must be installed followed by launching the development server which utilizes Next.js Turbopack for faster incremental builds.
pnpm install
pnpm dev
The development server defaults to http://localhost:3000.
Sources: README.md:14-23, package.json:5-6
Build Architecture
The application is structured as a React-based frontend that interacts with backend services via authenticated API calls. The build process transforms TypeScript and Tailwind CSS into optimized assets for the Next.js runtime.
Component and Data Flow
The following diagram illustrates the relationship between the development source files, the build process, and the final application runtime.
The build process compiles assets from the app/, components/, and lib/ directories into a production-ready deployment.
Sources: README.md:25-40, package.json:7
Compilation Settings
The project uses specific TypeScript configurations defined in tsconfig.json to ensure strict type safety and modern JavaScript output.
- Target: ES2022
- Module Resolution: Bundler
- Strict Mode: Enabled
- JSX: react-jsx (React 19)
Sources: tsconfig.json:3-14, package.json:17
Deployment Workflow
Production Build
To prepare the application for a production environment, the build script must be executed. This generates an optimized version of the application using the Next.js build pipeline.
pnpm build
pnpm start
Sources: README.md:25-28, package.json:7-8
Environment and Security
The application relies on external authentication and API services. Deployment environments must support the following:
- Authentication: Integrated with
@privy-io/react-authfor secure admin access. - Styles: Tailwind CSS 4 processing via
@tailwindcss/postcss. - Global Styles: The root layout imports
globals.csswhich defines the CSS variable-based theme system for light and dark modes.
The application uses the usePrivy hook to retrieve access tokens, which are then used in authorized API requests to fetch admin data.
Sources: app/layout.tsx:1-5, app/globals.css:1-35, hooks/useAdminSandboxOrgs.ts:10-21
Script Reference
The following scripts are defined in the project configuration for various stages of the lifecycle:
| Script | Command | Purpose |
|---|---|---|
dev | next dev --turbopack | Starts development server with Turbopack. |
build | next build | Creates an optimized production build. |
start | next start | Starts the production server. |
lint | eslint . | Runs static code analysis using ESLint. |
Sources: package.json:5-9
Conclusion
Deploying the Recoup Admin dashboard requires a Node.js v22 environment and the pnpm package manager. By utilizing Next.js 16's App Router and Turbopack, the project ensures a fast development cycle and an optimized production output. Security is maintained through Privy authentication, ensuring that only authorized administrators can access the dashboard and its underlying API endpoints.