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
• Project Structure
• Components
• API Reference
• Usage Examples
• Development
• Tech Stack

🚀 Quick Start

Prerequisites

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

Installation

1. Clone the repository

   git clone <repository-url>
   cd tuto1
   

2. Install dependencies

   npm install
   # or
   pnpm install
   # or
   yarn install
   

3. Start development server

   npm run dev
   # or
   pnpm dev
   # or
   yarn dev
   

4. Open your browser

   Navigate to 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

Props

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

User Interface

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

Example Usage

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

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

// 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

// 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 - React framework with App Router
• React 19 - UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework

UI Components

• @radix-ui/react-avatar - Avatar component
• @radix-ui/react-slot - Slot component
• class-variance-authority - Component variant management
• clsx - Conditional CSS classes

Icons

• @heroicons/react - Beautiful hand-crafted SVG icons

Development Tools

• ESLint - Code linting
• TypeScript - Type checking
• Turbopack - 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.