🎬 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 auto-contenus.

✨ Fonctionnalités

• 🎨 Design System complet avec thème sombre et couleurs violet pastel
• 📱 Responsive avec système de grille flexbox (Bootstrap-like)
• 🧩 Composants UI auto-contenus avec styles scoped
• ⚡ Performance optimisée avec styles scoped par composant
• 🎭 Composants spécialisés pour le streaming (MovieCard, SearchBar)
• 🔄 Architecture modulaire avec réutilisation et composition
• 🛠️ Classes utilitaires Bootstrap-like pour styling rapide

🏗️ Architecture du Projet

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── ui/              # Composants UI auto-contenus
│   │       ├── Button.astro        # Avec styles intégrés
│   │       ├── Card.astro          # Avec styles intégrés
│   │       ├── Input.astro         # Avec styles intégrés
│   │       ├── Modal.astro         # Avec styles + JS intégrés
│   │       ├── MovieCard.astro     # Compose avec Card.astro
│   │       ├── SearchBar.astro     # Compose avec Input.astro
│   │       ├── Row.astro           # Avec support style prop
│   │       ├── Col.astro           # Responsive breakpoints
│   │       └── ...
│   ├── layouts/
│   │   └── Layout.astro     # Variables + Grid seulement
│   ├── pages/
│   │   └── index.astro      # Page de démo complète
│   └── styles/
│       ├── variables.css    # Variables + Form base + Utilitaires globales
│       └── grid.css         # Grille + Classes utilitaires responsive
└── 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

🏗️ Architecture des Composants

Composition et réutilisation

Les composants sont conçus pour être composés ensemble :

• SearchBar utilise le composant Input avec des styles personnalisés
• MovieCard compose avec le composant Card de base
• ModalHeader utilise le composant Button pour la fermeture
• Classes .form-control-base partagées entre Input, Select et Textarea

Styles scoped

Chaque composant contient ses propres styles avec <style> scoped :

• Isolation CSS automatique par Astro
• Utilisation de :global() pour styler les composants importés
• Variables CSS globales disponibles dans tous les composants

🚀 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 composant Astro dans src/components/ui/
2. Intégrer les styles directement dans le composant avec <style>
3. Utiliser les variables CSS globales et classes utilitaires disponibles
4. Composer avec les composants existants quand possible

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.