nixi-web/README.md

🎬 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

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

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

---
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
• Guide des composants Astro
• CSS Variables MDN

🚀 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 pour plus de détails.