Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ibrahimalsabr/kasa

Kasa is a platform for renting apartments between individuals. This project involves a complete redesign of the Kasa website using React and React Router.
https://github.com/ibrahimalsabr/kasa

css html javascript react react-router sass vite

Last synced: 26 days ago
JSON representation

Kasa is a platform for renting apartments between individuals. This project involves a complete redesign of the Kasa website using React and React Router.

Awesome Lists containing this project

README 

        
# Kasa : Apartment Rental Agency



![Logo Kasa](./src/assets/imgs/logo.png)



[Lire ce fichier en français](#kasa--agence-de-location-des-logements)



## Description



Kasa is a platform for renting apartments between individuals. This project involves a complete redesign of the Kasa website using React and React Router.



### Features



-   **Ad Management** : Display rental ads with their details.



-   **Navigation** : Utilisation de React Router pour la navigation entre les différentes pages du site.



## Technologies Used



![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![SASS](https://img.shields.io/badge/SASS-CC6699?style=for-the-badge&logo=sass&logoColor=white)

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)

![JSON](https://img.shields.io/badge/JSON-000000?style=for-the-badge&logo=json&logoColor=white)

![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)

![Font Awesome](https://img.shields.io/badge/Font_Awesome-339AF0?style=for-the-badge&logo=font-awesome&logoColor=white)



## Design



The application design is fully responsive, ensuring an optimal user experience across all devices, from desktops to smartphones.



### Screenshots



Here are some screenshots that illustrate the final result of the site:



![Page d'accueil](./src/assets/imgs/screen-01.png)

![Page d'accueil](./src/assets/imgs/screen-02.png)

![Page d'accueil](./src/assets/imgs/screen-03.png)



## Installation



Follow these steps to install and run the Kasa project on your local machine for development and testing.



### Prerequisites



Make sure you have Node.js and npm installed on your machine. If not, you can download and install them from the [Node.js official website](https://nodejs.org/).



### Cloning the Repository



Open your terminal and type the following command to clone the GitHub repository:



`git clone https://github.com/IbrahimAlsabr/Kasa.git`



### Installing Dependencies



Change the directory to access the cloned project folder and install the necessary dependencies:



`cd Kasa`



`npm install`



### Starting the Application



To start the application, run the following command in the terminal: `npm run dev`



Access the application via `http://localhost:5173`.



## Author



### Ibrahim Alsabr



[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/IbrahimAlsabr) [![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ibrahim-alsabr-188939231/) [![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/home?lang=fr)



---



---



---



---







# Kasa : Agence de Location des Logements



![Logo Kasa](./src/assets/imgs/logo.png)



[Read this file in English](#kasa--apartment-rental-agency)



## Description



Kasa est une plateforme de location d'appartements entre particuliers. Ce projet consiste en la refonte complète du site web de Kasa en utilisant React et React Router.



### Fonctionnalités



-   **Gestion des annonces** : Affichage des annonces de locations avec leurs détails.



-   **Navigation** : Utilisation de React Router pour la navigation entre les différentes pages du site.



## Technologies Utilisées



![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![SASS](https://img.shields.io/badge/SASS-CC6699?style=for-the-badge&logo=sass&logoColor=white)

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)

![JSON](https://img.shields.io/badge/JSON-000000?style=for-the-badge&logo=json&logoColor=white)

![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)

![Font Awesome](https://img.shields.io/badge/Font_Awesome-339AF0?style=for-the-badge&logo=font-awesome&logoColor=white)



## Design



Le design de l'application est entièrement responsive, garantissant une expérience utilisateur optimale sur tous les appareils, des ordinateurs de bureau aux smartphones



### Captures d'écran



Voici quelques captures d'écran qui illustrent le résultat final du site :



![Page d'accueil](./src/assets/imgs/screen-01.png)

![Page d'accueil](./src/assets/imgs/screen-02.png)

![Page d'accueil](./src/assets/imgs/screen-03.png)



## Installation



Suivez ces étapes pour installer et exécuter le projet Kasa sur votre machine locale pour le développement et les tests.



### Prérequis



Assurez-vous d'avoir Node.js et npm installés sur votre machine. Si ce n'est pas le cas, vous pouvez les télécharger et les installer depuis [Node.js official website](https://nodejs.org/).



### Clonage du dépôt



Ouvrez votre terminal et tapez la commande suivante pour cloner le dépôt GitHub :

`git clone https://github.com/IbrahimAlsabr/Kasa.git`



### Installation des dépendances



Changez de répertoire pour accéder au dossier du projet cloné et installez les dépendances nécessaires :



`cd Kasa`



`npm install`



### Lancement de l'application



Pour démarrer l'application, exécutez la commande suivante dans le terminal : `npm run dev`



Accédez à l'application via `http://localhost:5173`.



## Auteur



### Ibrahim Alsabr



[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/IbrahimAlsabr) [![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ibrahim-alsabr-188939231/) [![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/home?lang=fr)