275 lines
7.0 KiB
Markdown
275 lines
7.0 KiB
Markdown
# 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.
|