Carbon Credit Trading Dashboard Development

Expert guidance for developing enterprise-grade carbon credit trading analytics dashboards using Next.js 14 App Router, TypeScript, Tailwind CSS, and real-time blockchain data integration.

Project Overview

You are working on a Next.js 14 App Router application for carbon credit trading analytics. The application is built with TypeScript and Tailwind CSS, following a mobile-first, enterprise-grade design pattern with real-time blockchain data integration from the CO2e Chain.

Build Commands

Always use these npm scripts for development tasks:

Before deploying or committing significant changes, always run `npm run production-ready` to ensure all checks pass.

Architecture Patterns

App Router Structure

The application uses Next.js 14 App Router with nested layouts and colocated components. Main routes include:

Component Organization

Components are organized into clear categories:

When creating new components, follow this organization pattern and place files in the appropriate directory.

Data Layer

The data layer includes:

**Primary API Endpoints:**

Always implement proper caching strategies and type-safe patterns when integrating with these APIs.

Development Guidelines

Code Style Requirements

1. **TypeScript Strict Mode**: Always use strict TypeScript. Define proper interfaces and types for all data structures.

2. **Component Patterns**: Use shadcn/ui components for consistency. Follow existing patterns when creating dashboard panels.

3. **Error Handling**: Implement proper error boundaries for fault tolerance. All API calls should have error handling and loading states.

4. **Form Validation**: Use React Hook Form with Zod validation for all forms. Define schemas before building form components.

Mobile-First Design

This application is built mobile-first. When developing:

Performance Optimization

Follow these performance patterns:

Testing Requirements

All new code must meet these testing standards:

1. **Unit Tests**: Required for new components and utilities

- Use Jest + React Testing Library

- Maintain 70% coverage threshold

- Test user interactions and edge cases

2. **E2E Tests**: Required for critical user flows

- Use Playwright

- Test across multiple browsers

- Cover main dashboard workflows

3. **Mobile Tests**: Required for responsive components

- Run mobile verification suite

- Include screenshot comparisons

- Test touch interactions

Run `npm run test` before committing changes.

Common Development Tasks

Adding New Dashboard Panels

When creating a new dashboard panel:

1. Create component in `components/panels/` directory

2. Follow existing panel patterns for consistency (check similar panels)

3. Define proper TypeScript interfaces for panel data

4. Implement mobile-responsive design from the start

5. Add loading and error states

6. Write unit tests using React Testing Library

7. Add panel to appropriate dashboard layout

Example panel structure:

```typescript

interface PanelData {

// Define your data structure

}

export function MyPanel({ data }: { data: PanelData }) {

// Implementation with error boundaries and loading states

}

```

Integrating New Data Sources

When adding new API integrations:

1. Add API client to `lib/` directory

2. Create TypeScript interfaces for API responses

3. Implement caching strategy (consider SWR or React Query patterns)

4. Add comprehensive error handling and retry logic

5. Include loading states in components consuming the data

6. Write integration tests for API interactions

Example API integration pattern:

```typescript

// lib/my-api.ts

export interface ApiResponse {

// Define response structure

}

export async function fetchData(): Promise<ApiResponse> {

// Implementation with error handling

}

```

Extending UI Components

When adding or modifying UI components:

1. Use shadcn/ui patterns for consistency

2. Follow the existing theme configuration (check `tailwind.config.ts`)

3. Ensure ARIA attributes for accessibility

4. Implement responsive behavior for all breakpoints

5. Add keyboard navigation support where applicable

6. Include visual regression tests if component is visually complex

Security and Production

Security Patterns

The application implements these security measures:

Always validate user input and sanitize data before rendering.

Production Optimization

Before deploying:

1. Run `npm run production-ready` to validate build

2. Verify standalone output mode for containerization

3. Check bundle sizes and optimize if needed

4. Test PWA capabilities if enabled

5. Verify SEO metadata is properly set

Data Integration Specifics

CO2e Chain Integration

When working with blockchain data:

Retirement Workflow

For retirement certificate features:

Constraints and Best Practices

1. **Never bypass TypeScript strict mode** - Always define proper types

2. **Follow mobile-first approach** - Design for mobile, then enhance for desktop

3. **Maintain test coverage** - Keep above 70% for all metrics

4. **Use existing UI components** - Prefer shadcn/ui over custom components

5. **Implement proper loading states** - Never show blank screens while data loads

6. **Handle errors gracefully** - Always provide user-friendly error messages

7. **Optimize bundle size** - Use dynamic imports for heavy components

8. **Follow accessibility standards** - Ensure ARIA labels and keyboard navigation

Getting Help

When encountering issues:

1. Check existing similar components for patterns

2. Review test files for usage examples

3. Consult TypeScript types for API contracts

4. Run type-check and lint to catch common issues

5. Test on mobile viewports early and often