# Tuto1 - Next.js Learning Project

A modern Next.js application built with React 19, TypeScript, and Tailwind CSS. This project serves as a learning tutorial for modern web development practices and demonstrates component-based architecture.

## 🚀 Features

- **Next.js 15** with App Router
- **React 19** with TypeScript
- **Tailwind CSS** for styling
- **Radix UI** components for accessibility
- **Heroicons** for iconography
- **Responsive design** with mobile-first approach
- **Component-based architecture**

## 📋 Table of Contents

- [Quick Start](#quick-start)
- [Project Structure](#project-structure)
- [Components](#components)
- [API Reference](#api-reference)
- [Usage Examples](#usage-examples)
- [Development](#development)
- [Tech Stack](#tech-stack)

## 🚀 Quick Start

### Prerequisites

- Node.js 18+
- npm, yarn, or pnpm

### Installation

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd tuto1
   ```

2. **Install dependencies**
   ```bash
   npm install
   # or
   pnpm install
   # or
   yarn install
   ```

3. **Start development server**
   ```bash
   npm run dev
   # or
   pnpm dev
   # or
   yarn dev
   ```

4. **Open your browser**

   Navigate to [http://localhost:3000](http://localhost:3000) to see the application.

## 📁 Project Structure

```
src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout component
│   ├── page.tsx           # Home page
│   └── tuto1/
│       └── page.tsx       # Tutorial examples page
├── components/            # Reusable components
│   ├── ui/               # UI component library
│   │   ├── avatar.tsx
│   │   ├── button.tsx
│   │   └── card.tsx
│   └── user-card.tsx     # User card component
└── lib/
    └── utils.ts          # Utility functions
```

## 🧩 Components

### UserCard Component

A reusable card component that displays user information with an avatar, name, role, and email.

**Location:** [`src/components/user-card.tsx`](src/components/user-card.tsx)

#### Props

| Prop | Type   | Required | Description                  |
|------|--------|----------|------------------------------|
| `user` | `User` | Yes     | User object with id, name, email, and role |

#### User Interface

```typescript
interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}
```

#### Example Usage

```tsx
import { UserCard } from '@/components/user-card';

const user = {
  id: 1,
  name: "Jean Dupont",
  email: "jean.dupont@example.com",
  role: "Développeur"
};

function MyComponent() {
  return <UserCard user={user} />;
}
```

#### Features

- **Avatar Display**: Shows user's initials in a circular avatar
- **Role Badge**: Displays user role with an icon
- **Email Display**: Shows email with envelope icon
- **Responsive Design**: Adapts to different screen sizes
- **Accessible**: Built with Radix UI primitives for screen reader support

## 🏠 Main Page

The home page (`src/app/page.tsx`) demonstrates a complete application layout with:

### Layout Structure

- **Header**: Navigation bar with application title
- **Main Content**:
  - Action button for user interaction
  - User card display
  - Feature cards showcasing technologies

### Features Demonstrated

1. **Component Composition**: How components work together
2. **Props Passing**: Data flow from parent to child components
3. **Responsive Grid**: CSS Grid layout that adapts to screen size
4. **Styling**: Tailwind CSS utility classes
5. **TypeScript Integration**: Type-safe development

## 🎯 API Reference

### TypeScript Interfaces

#### User Interface

```typescript
interface User {
  id: number;      // Unique identifier
  name: string;    // Full name
  email: string;   // Email address
  role: string;    // Job role or position
}
```

## 💡 Usage Examples

### Basic Component Usage

```tsx
// Importing components
import { UserCard } from '@/components/user-card';
import { Button } from '@/components/ui/button';

// Using the UserCard component
const sampleUser: User = {
  id: 1,
  name: "Marie Martin",
  email: "marie.martin@example.com",
  role: "Designer"
};

function HomePage() {
  return (
    <div>
      <h1>My Application</h1>
      <Button>Click me!</Button>
      <UserCard user={sampleUser} />
    </div>
  );
}
```

### Styling with Tailwind CSS

```tsx
// Responsive design example
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div className="bg-white p-6 rounded-lg shadow">
    <h2>React</h2>
    <p>Bibliothèque pour construire des interfaces utilisateur</p>
  </div>
</div>
```

## 🛠️ Development

### Available Scripts

- `npm run dev` - Start development server with Turbopack
- `npm run build` - Build for production using Turbopack
- `npm run start` - Start production server
- `npm run lint` - Run ESLint for code quality

### Development Guidelines

1. **Component Structure**: Follow the existing pattern with proper TypeScript interfaces
2. **Styling**: Use Tailwind CSS utility classes for consistent design
3. **Accessibility**: Leverage Radix UI components for better accessibility
4. **Type Safety**: Define proper TypeScript interfaces for all data structures

## 🛠️ Tech Stack

### Core Technologies

- **[Next.js 15](https://nextjs.org/)** - React framework with App Router
- **[React 19](https://react.dev/)** - UI library
- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework

### UI Components

- **[@radix-ui/react-avatar](https://www.radix-ui.com/primitives/docs/components/avatar)** - Avatar component
- **[@radix-ui/react-slot](https://www.radix-ui.com/primitives/docs/components/slot)** - Slot component
- **[class-variance-authority](https://cva.style/)** - Component variant management
- **[clsx](https://github.com/lukeed/clsx)** - Conditional CSS classes

### Icons

- **[@heroicons/react](https://heroicons.com/)** - Beautiful hand-crafted SVG icons

### Development Tools

- **[ESLint](https://eslint.org/)** - Code linting
- **[TypeScript](https://www.typescriptlang.org/)** - Type checking
- **[Turbopack](https://turbopack.dev/)** - Fast bundler

## 📚 Learning Resources

This project demonstrates several key concepts:

1. **Modern React Development**: Hooks, components, and JSX
2. **Next.js App Router**: File-based routing and layouts
3. **TypeScript Integration**: Type safety and IntelliSense
4. **Component Libraries**: Reusable UI components
5. **Responsive Design**: Mobile-first CSS with Tailwind
6. **Accessibility**: Building inclusive web applications

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## 📄 License

This project is private and not licensed for external use.

---

**Note**: This is a learning project created for educational purposes to demonstrate modern web development practices with Next.js, React, and TypeScript.