Frontend Mentor - Movies web app

Ma solution au challenge de frontend mentor.

Table des matières

• Le projet
  • Installer et executer le projet
  • Contexte du projet
  • Fonctionnalités encore manquantes
  • Éléments fournis pour la réalisation du projet
  • Fonts
• Mon processus
  • Outils et technologies utilisés
  • Ressources utiles
• Livrables
  • Screenshots
• Auteur

🚀 Le projet

Installer et executer le projet

1. Cloner le projet
2. npm install puis npm run dev dans les dossiers Front et Back
3. Créer un fichier .env.local
4. ajouter : VITE_APP_API_KEY = votreCléApiTheMovieDB VITE_APP_TMDB_ENDPOINT = "https://api.themoviedb.org/3" VITE_APP_TMDB_IMAGE_ENDPOINT = "https://image.tmdb.org/t/p" VITE_YT_API_KEY = votreCléApiYoutube

Contexte du projet

Le challenge est de développer une application web de catalogue de films et de la rendre aussi proche que possible du design. L'utilisateur doit pouvoir :

• Naviguer entre les pages Accueil, Films, Séries TV et Favoris
• Ajouter/Supprimer des favoris pour tous les films et les séries TV
• Rechercher des émissions pertinentes sur toutes les pages
• Voir les états de survol de tous les éléments interactifs de la page
• Visualiser la mise en page optimale de l'application en fonction de la taille de l'écran de leur appareil
• Bonus : Construire ce projet comme une application complète full-stack
• Bonus : Creer un flux d'authentification

Fonctionnalités encore manquantes

• Conteneurisation du projet avec Docker
• Déploiement

Éléments fournis pour la réalisation du projet

• Maquette figma pour l'authentification et la page d'accueil

Fonts

La police du site est Outfit Light

🔨 Mon processus

Outils et technologies utilisés

• Styled-components

• Typescript

• React

• React router

• React hook form

• Vite

• Axios

• Node.js

• Express

• MongoDB

• Mongoose

• Postman

• The movie database

Ressources utiles

• TMDB

📚 Livrables

Screenshots

Desktop

Tablette

Mobile

👷 Auteur

• Noëmie C