Kasa

Site Web - README en Français - README in English

Description en Français

1. Présentation du projet

Projet réalisé dans le cadre du développement front-end pour la refonte de la plateforme web Kasa

1.1 Objectif :

• Développer l’ensemble de l'application en React et intégrer les maquettes Figma dans une application responsive.
• Utiliser les données JSON pour simuler un back-end pendant la phase de développement.
• Créer des composants interactifs comme des galeries d'images, des menus déroulants et des carrousels d'images.

1.2 Compétences évaluées :

• Développement en React
• Création de composants réutilisables
• Gestion de l’état dans une application React
• Utilisation de React Router pour la navigation
• Développement responsive et respect des maquettes Figma

2. Contraintes

2.1 Fonctionnelles :

• Utilisation d’un carrousel d'images avec des fonctionnalités de navigation fluide entre les images.
• Affichage dynamique des informations de logement dans un format de carte.
• Création d'un système de menu déroulant interactif (Collapse) qui peut être ouvert et fermé.

2.2 Techniques :

• Développement de l'application en React avec React Router pour gérer les routes.
• Les données sont simulées via un fichier JSON représentant les annonces.
• Respect des maquettes Figma en termes de design, d'animations et de comportements interactifs.

3. Lancement du projet :

3.1 Prérequis :

• Git
• Node pour les commandes npm ou Yarn pour les commandes yarn

3.2 Dépendances :

• React: ^18.2.0
• React-router-dom: ^6.21.1
• npm i react-router-dom ou yarn add react-router-dom
• prop-types: ^15.8.1
• npm i prop-types ou yarn add prop-types
• Font Awesome Icons: ^6.5.1
• React FontAwesome: ^0.2.0
• npm i @fortawesome/react-fontawesome ou yarn add @fortawesome/react-fontawesome

4. Procédure d'installation :

Clonez le dépôt :

git clone https://github.com/MeTusel/Kasa

4.1 Configuration du front-end :

• Accédez au dossier "kasa"

• Installez toutes les dépendances :

  npm install ou yarn

• Lancez le front-end :

npm run start ou yarn run start

Le front-end sera accessible sur le port 3000 : http://localhost:3000/Kasa.

5. Autres :

5.1 Maquettes

• Lien vers les maquettes

---

Description in English

1. Project Overview

This project was carried out as part of the front-end development for the redesign of the Kasa web platform.

1.1 Objective:

• Develop the entire application in React and integrate Figma mockups into a responsive application.
• Use JSON data to simulate a back-end during the development phase.
• Create interactive components such as image galleries, dropdown menus, and carousels.

1.2 Assessed Skills:

• React development
• Creation of reusable components
• State management in a React application
• Using React Router for navigation
• Responsive development and following Figma mockups

2. Constraints

2.1 Functional:

• Use an image carousel with smooth navigation between images.
• Dynamically display housing information in a card format.
• Create an interactive dropdown menu system (Collapse) that can be opened and closed.

2.2 Technical:

• Develop the application in React with React Router to manage the routes.
• Data is simulated via a JSON file representing the listings.
• Follow Figma mockups in terms of design, animations, and interactive behaviors.

3. Project Launch:

3.1 Prerequisites:

• Git
• Node for npm commands or Yarn for yarn commands

3.2 Dependencies:

• React: ^18.2.0
• React-router-dom: ^6.21.1
• npm i react-router-dom or yarn add react-router-dom
• prop-types: ^15.8.1
• npm i prop-types or yarn add prop-types
• Font Awesome Icons: ^6.5.1
• React FontAwesome: ^0.2.0
• npm i @fortawesome/react-fontawesome or yarn add @fortawesome/react-fontawesome

4. Installation Procedure:

Clone the repository:

git clone https://github.com/MeTusel/Kasa

4.1 Front-end Configuration:

• Access the "kasa" folder

• Install all dependencies:

  npm install or yarn

• Run the front-end:

npm run start or yarn run start

The front-end will be accessible on port 3000: http://localhost:3000/Kasa.

5. Others:

5.1 Mockups

• Link to mockups