187 lines
5.5 KiB
Markdown
187 lines
5.5 KiB
Markdown
# 🎬 Nixi - Plateforme de Streaming
|
|
|
|
Une plateforme de streaming moderne pour films et séries, construite avec **Astro** et un système de composants UI réutilisables.
|
|
|
|
## ✨ Fonctionnalités
|
|
|
|
- 🎨 **Design System complet** avec thème sombre et couleurs violet pastel
|
|
- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like)
|
|
- 🧩 **Composants UI modulaires** et réutilisables
|
|
- ⚡ **Performance optimisée** avec Astro
|
|
- 🎭 **Composants spécialisés** pour le streaming (MovieCard, SearchBar)
|
|
|
|
## 🏗️ Architecture du Projet
|
|
|
|
```
|
|
/
|
|
├── public/
|
|
│ └── favicon.svg
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ └── ui/ # Composants UI réutilisables
|
|
│ │ ├── Button.astro
|
|
│ │ ├── Card.astro
|
|
│ │ ├── Input.astro
|
|
│ │ ├── Modal.astro
|
|
│ │ ├── MovieCard.astro
|
|
│ │ ├── Navbar.astro
|
|
│ │ ├── Row.astro
|
|
│ │ ├── Col.astro
|
|
│ │ └── ...
|
|
│ ├── layouts/
|
|
│ │ └── Layout.astro # Layout principal
|
|
│ ├── pages/
|
|
│ │ └── index.astro # Page d'accueil
|
|
│ └── styles/
|
|
│ ├── variables.css # Variables CSS (couleurs, espacements)
|
|
│ ├── grid.css # Système de grille flexbox
|
|
│ └── components/ # Styles par composant
|
|
│ ├── button.css
|
|
│ ├── card.css
|
|
│ ├── input.css
|
|
│ └── ...
|
|
└── package.json
|
|
```
|
|
|
|
## 🎨 Design System
|
|
|
|
### Couleurs
|
|
- **Couleur principale** : Violet pastel (`--primary-*`)
|
|
- **Thème sombre** avec nuances de gris
|
|
- **Couleurs sémantiques** : success, warning, error, info
|
|
|
|
### Composants disponibles
|
|
|
|
#### Composants de base
|
|
- **Button** - Boutons avec variantes (primary, secondary, outline, ghost)
|
|
- **Badge** - Badges colorés
|
|
- **Alert** - Alertes contextuelles
|
|
- **Spinner** - Indicateurs de chargement
|
|
- **Progress** - Barres de progression
|
|
|
|
#### Composants de formulaire
|
|
- **Input** - Champs de saisie
|
|
- **Textarea** - Zones de texte
|
|
- **Select** - Listes déroulantes
|
|
- **FormGroup/FormLabel/FormError** - Éléments de formulaire
|
|
|
|
#### Composants de mise en page
|
|
- **Container** - Conteneur responsive
|
|
- **Row/Col** - Système de grille avec breakpoints (xs, sm, md, lg, xl, xxl)
|
|
- **Card** - Cartes avec header/body/footer
|
|
|
|
#### Composants de navigation
|
|
- **Navbar** - Barre de navigation
|
|
- **Modal** - Modales avec backdrop
|
|
- **Dropdown** - Menus déroulants
|
|
|
|
#### Composants spécialisés streaming
|
|
- **MovieCard** - Cartes pour films/séries avec poster, titre, rating
|
|
- **SearchBar** - Barre de recherche avec icône
|
|
|
|
## 🚀 Utilisation des Composants
|
|
|
|
### Exemple basique
|
|
```astro
|
|
---
|
|
import Button from '../components/ui/Button.astro';
|
|
import Card from '../components/ui/Card.astro';
|
|
import CardBody from '../components/ui/CardBody.astro';
|
|
---
|
|
|
|
<Card>
|
|
<CardBody>
|
|
<h3>Titre du film</h3>
|
|
<p>Description du film...</p>
|
|
<Button variant="primary">Regarder</Button>
|
|
</CardBody>
|
|
</Card>
|
|
```
|
|
|
|
### Système de grille
|
|
```astro
|
|
---
|
|
import Container from '../components/ui/Container.astro';
|
|
import Row from '../components/ui/Row.astro';
|
|
import Col from '../components/ui/Col.astro';
|
|
---
|
|
|
|
<Container>
|
|
<Row>
|
|
<Col md={6} lg={4}>
|
|
<!-- Contenu colonne 1 -->
|
|
</Col>
|
|
<Col md={6} lg={8}>
|
|
<!-- Contenu colonne 2 -->
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
```
|
|
|
|
### MovieCard pour le streaming
|
|
```astro
|
|
---
|
|
import MovieCard from '../components/ui/MovieCard.astro';
|
|
---
|
|
|
|
<MovieCard
|
|
title="Titre du Film"
|
|
poster="/path/to/poster.jpg"
|
|
year={2024}
|
|
genre="Action"
|
|
rating={8.5}
|
|
href="/film/titre-du-film"
|
|
/>
|
|
```
|
|
|
|
## 🧞 Commandes
|
|
|
|
Toutes les commandes sont exécutées depuis la racine du projet :
|
|
|
|
| Commande | Action |
|
|
| :------------------------ | :----------------------------------------------- |
|
|
| `npm install` | Installe les dépendances |
|
|
| `npm run dev` | Démarre le serveur de dev sur `localhost:4321` |
|
|
| `npm run build` | Build le site pour la production dans `./dist/` |
|
|
| `npm run preview` | Prévisualise le build en local |
|
|
| `npm run astro ...` | Exécute des commandes CLI Astro |
|
|
| `npm run astro -- --help` | Aide pour la CLI Astro |
|
|
|
|
## 🎯 Développement
|
|
|
|
### Ajouter un nouveau composant
|
|
1. Créer le fichier CSS dans `src/styles/components/`
|
|
2. Créer le composant Astro dans `src/components/ui/`
|
|
3. Importer le CSS dans `src/layouts/Layout.astro`
|
|
|
|
### Variables CSS disponibles
|
|
- `--primary-*` : Couleurs principales (violet pastel)
|
|
- `--bg-*` : Couleurs de fond (thème sombre)
|
|
- `--text-*` : Couleurs de texte
|
|
- `--spacing-*` : Espacements (1 à 32)
|
|
- `--radius-*` : Rayons de bordure
|
|
- `--shadow-*` : Ombres
|
|
|
|
### Breakpoints responsive
|
|
- `xs` : < 576px
|
|
- `sm` : ≥ 576px
|
|
- `md` : ≥ 768px
|
|
- `lg` : ≥ 992px
|
|
- `xl` : ≥ 1200px
|
|
- `xxl` : ≥ 1400px
|
|
|
|
## 📚 Ressources
|
|
|
|
- [Documentation Astro](https://docs.astro.build)
|
|
- [Guide des composants Astro](https://docs.astro.build/en/core-concepts/astro-components/)
|
|
- [CSS Variables MDN](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties)
|
|
|
|
## 🚀 Déploiement
|
|
|
|
Ce projet peut être déployé sur n'importe quelle plateforme supportant les sites statiques :
|
|
- Vercel
|
|
- Netlify
|
|
- GitHub Pages
|
|
- Cloudflare Pages
|
|
|
|
Voir la [documentation de déploiement Astro](https://docs.astro.build/en/guides/deploy/) pour plus de détails. |