Project Title : Kasa

Project Description

Kasa is a vacation renting web application. This project have 3 pages : Home, Building and Error. When a user select a building on the home page, that redirect him to the building page with the information of the building he clicked on.

Project Goals

• Integrating Front-end Mockup
• Create a good React project structure with pages, components and layout
• Integrating data from JSON file
• Navigating with React-Router

Technologies Used

• HTML
• CSS
• JS
• ReactJS
• React-Router

Project Structure

Kasa/
│
├─ src
    ├─ components # components folder
    ├─ pages # pages folder
    ├─ App.js # a place which you can look all the components
    ├─ index.js # central point of the project
    ├─ router.js # the BrowserRouter of the project
    ├─ style.css # css of the project

How to start the project

1. You need to install the dependencies using :

npm install

2. The start with :

npm start

Project Features

1. Displaying all the buildings
2. Display building on the building page by the id
3. Getting the datas from JSON file
4. Managing the routes with the router
5. Displaying errors if the id or the page don't exist

Conclusion

This is a easy but full projects in ReactJS using the state, the lifecycle and everything inside is designed in functionnal components and not in class components. Functionnal components are easier to maintain.