Svelte TV Grid

Description du Projet

Ce projet est une application web développée avec SvelteKit qui simule une grille de programmes télévisés. Il a été conçu pour démontrer des compétences en développement front-end moderne (Svelte, CSS expert) et en intégration back-end (PostgreSQL, Drizzle ORM), en réponse à une offre d'emploi pour la construction d'un outil de gestion de grilles de programmes.

L'application affiche une grille horaire des programmes pour différentes chaînes, avec une visualisation proportionnelle de la durée de chaque émission. Un clic sur un programme ouvre une modale affichant les détails de l'émission.

Fonctionnalités

• Grille de Programmes Interactive : Affichage visuel des programmes TV sur une timeline, avec des blocs proportionnels à leur durée.
• Détails des Programmes : Modale affichant le titre, le genre, la durée et le résumé d'un programme au clic.
• Données Dynamiques : Les programmes et les chaînes sont chargés depuis une base de données PostgreSQL.
• Architecture Robuste : Utilisation de SvelteKit pour le front-end et le chargement des données côté serveur, avec Drizzle ORM pour l'interaction avec la base de données.
• Design Réactif : Interface utilisateur conçue avec un CSS expert pour une expérience optimale.

Technologies Utilisées

• Front-end Framework : SvelteKit
• Langage : TypeScript
• Base de Données : PostgreSQL
• ORM : Drizzle ORM
• Conteneurisation : Docker & Docker Compose
• Styling : CSS (avec des techniques avancées pour la grille temporelle)

Prérequis

Avant de commencer, assurez-vous d'avoir installé les éléments suivants sur votre machine :

• Node.js (version 18 ou supérieure) et npm
• Docker Desktop (inclut Docker Engine et Docker Compose)

Installation et Lancement

Suivez ces étapes pour configurer et lancer le projet en local.

1. Cloner le dépôt

git clone https://github.com/younes/svelte-tv-grid.git # Remplacez younes par votre nom d'utilisateur GitHub
cd svelte-tv-grid

2. Installer les dépendances

npm install

3. Lancer PostgreSQL avec Docker Compose

Assurez-vous que Docker est en cours d'exécution. Ce fichier docker-compose.yml va créer et démarrer un conteneur PostgreSQL.

docker-compose up -d

Cela lancera un serveur PostgreSQL sur le port 5432 avec les identifiants :

• Utilisateur : younes
• Mot de passe : mysecretpassword
• Base de données : tv_grid

4. Appliquer les migrations Drizzle

Ces commandes vont créer les tables channels et programs dans votre base de données PostgreSQL.

npx tsx migrate.ts

5. Remplir la base de données (Seeding)

Cette étape insère des données de programmes et de chaînes fictives dans votre base de données.

npx tsx seed.ts

6. Lancer l'application SvelteKit

npm run dev

L'application sera accessible à l'adresse http://localhost:5173 dans votre navigateur.

Structure du Projet

svelte-tv-grid/
├── src/
│   ├── lib/
│   │   ├── components/       # Composants Svelte réutilisables (ex: ProgramModal)
│   │   ├── data/             # Données statiques initiales (pour le seeding)
│   │   └── db/               # Configuration de la base de données et schéma Drizzle
│   │       ├── index.ts
│   │       └── schema.ts
│   └── routes/               # Pages et endpoints SvelteKit
│       ├── +page.svelte      # Page principale de la grille TV
│       └── +page.server.ts   # Chargement des données côté serveur
├── drizzle/                  # Fichiers de migration générés par Drizzle
├── docker-compose.yml        # Configuration Docker pour PostgreSQL
├── migrate.ts                # Script pour appliquer les migrations Drizzle
├── seed.ts                   # Script pour remplir la base de données
├── package.json              # Dépendances et scripts NPM
├── svelte.config.js          # Configuration de SvelteKit
├── tsconfig.json             # Configuration TypeScript
└── vite.config.ts            # Configuration de Vite