---
title: "Frontend Development"
description: "Guide for developing the TraceRTM frontend"
keywords: [frontend, react, nextjs, typescript, development]
---

# Frontend Development

Guide for developing the TraceRTM frontend application.

## Tech Stack

- **Next.js 14+**: React framework
- **TypeScript**: Type safety
- **Tailwind CSS**: Styling
- **Fumadocs**: Documentation framework
- **React Query**: Data fetching

## Getting Started

### 1. Install Dependencies

```bash
cd docs-site
npm install
```

### 2. Start Development Server

```bash
npm run dev
```

Access at: `http://localhost:3000`

### 3. Build for Production

```bash
npm run build
npm start
```

## Project Structure

```
docs-site/
├── app/                # Next.js app directory
│   ├── docs/          # Documentation pages
│   └── layout.tsx     # Root layout
├── components/        # React components
├── content/           # MDX content
├── public/            # Static assets
└── styles/            # CSS files
```

## Development Workflow

### Create New Page

1. Create MDX file in `content/docs/`
2. Add frontmatter:
```mdx
---
title: "Page Title"
description: "Page description"
---
```

### Create Component

```typescript
// components/MyComponent.tsx
import React from 'react';

export function MyComponent({ title }: { title: string }) {
  return <div>{title}</div>;
}
```

### Styling

Use Tailwind CSS:

```tsx
<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow">
  <h2 className="text-xl font-bold">Title</h2>
</div>
```

## Code Style

### TypeScript

- Use TypeScript for all components
- Define interfaces for props
- Use type inference where possible

```typescript
interface ItemProps {
  id: string;
  title: string;
  status: 'draft' | 'active';
}

export function Item({ id, title, status }: ItemProps) {
  return <div>{title}</div>;
}
```

### Component Structure

```typescript
// Import statements
import React from 'react';
import { Button } from '@/components/ui/button';

// Types/interfaces
interface Props {
  // ...
}

// Component
export function MyComponent({ ... }: Props) {
  // Hooks
  const [state, setState] = useState();
  
  // Effects
  useEffect(() => {
    // ...
  }, []);
  
  // Handlers
  const handleClick = () => {
    // ...
  };
  
  // Render
  return (
    <div>
      {/* JSX */}
    </div>
  );
}
```

## Testing

### Run Tests

```bash
# Run tests
npm test

# Watch mode
npm test -- --watch

# Coverage
npm test -- --coverage
```

### Writing Tests

```typescript
import { render, screen } from '@testing-library/react';
import { Item } from '@/components/Item';

test('renders item title', () => {
  render(<Item title="Test Item" />);
  expect(screen.getByText('Test Item')).toBeInTheDocument();
});
```

## API Integration

### Using React Query

```typescript
import { useQuery } from '@tanstack/react-query';

function useItems(projectId: string) {
  return useQuery({
    queryKey: ['items', projectId],
    queryFn: () => fetchItems(projectId),
  });
}
```

### API Client

```typescript
// lib/api.ts
export async function fetchItems(projectId: string) {
  const response = await fetch(`/api/v1/items?project_id=${projectId}`);
  return response.json();
}
```

## Best Practices

### 1. Component Composition

```typescript
// Good - composable
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>
```

### 2. Error Handling

```typescript
try {
  const data = await fetchData();
} catch (error) {
  console.error('Failed to fetch:', error);
  // Show error to user
}
```

### 3. Performance

- Use React.memo for expensive components
- Lazy load routes
- Optimize images

## Related Documentation

- [Code Style](../03-development/03-contributing/01b-typescript-style) - TypeScript style guide
- [Testing](../03-development/03-contributing/04-testing) - Testing guidelines
