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

https://github.com/hichamecode/p11-kasa

P11-Kasa - Develop a web App with React and React Router
https://github.com/hichamecode/p11-kasa

react react-router reactjs sass

Last synced: 2 months ago
JSON representation

P11-Kasa - Develop a web App with React and React Router

Awesome Lists containing this project

README

          

# Kasa 🏠

Kasa is a front-end interface built with **React** and **React Router**, designed to showcase rental properties.

![React](https://img.shields.io/badge/React-18.2.0-blue?logo=react) ![React Router](https://img.shields.io/badge/React%20Router-6.x-orange?logo=reactrouter) ![Sass](https://img.shields.io/badge/Sass-styling-pink?logo=sass)

---

## 📖 Description

This project aims to create a modern, responsive web application for **Kasa**, a company specializing in rental property listings. The interface is built using React to ensure a smooth, single-page application experience, with React Router handling navigation between different views.

## 🎯 Objectives

- Develop a **responsive** and **intuitive** user interface
- Implement **dynamic routing** using React Router
- Create **reusable React components** for efficient code management
- Ensure **smooth navigation** and **state management** within the application
- **Optimize performance** for quick loading and a seamless user experience

---

## 🛠️ Technologies

- **React** 18.2.0
- **React Router** 6.x
- **JavaScript**
- **HTML**
- **CSS**
- **Sass** (for styling)

---

## ⚙️ Installation

To set up the project locally, follow these steps:

1. Ensure you have **Node.js** installed (version 14 or higher).
2. Open your terminal and run the following command to clone the repository:

```bash
git clone https://github.com/hichamecode/P11-Kasa.git
```

3. Navigate to the project directory:

```bash
cd P11-Kasa
```

4. Install the dependencies:

```bash
npm install
```

5. Start the development server:

```bash
npm start
```

6. Open your browser and go to: `http://localhost:3000`.

---

## 🌟 Features

- **Dynamic Property Listings**: Display rental properties with detailed information
- **Responsive Design**: Ensures a seamless experience across various devices and screen sizes
- **Interactive UI Components**: Includes elements like image carousels and collapsible sections
- **Client-Side Routing**: Utilizes React Router for smooth navigation without page reloads

---

## 🗂️ Project Structure

The project is organized as follows:

```bash
P11-Kasa/
├── public/ # Static assets and HTML template
└── src/
├── assets/ # Images, banners, and logos
├── components/ # Reusable React components
├── datas/ # JSON files with mock data
├── pages/ # Individual page components
└── routes/ # React Router setup for navigation
```
---

## Contribution

This project was developed as part of the OpenClassrooms Web Developer training program. Contributions are not currently being accepted.

## License

This project is for educational purposes within the OpenClassrooms curriculum and does not have a specific open-source license.