Real Estate Website

This project is a construction company website written in TypeScript using React Redux and Styled-components.

There are many features implemented in this project such as:

• Displaying of data received from the server (Rest-API)
• Sorting and filtering of the received data
• A constructor that allows you to select apartments
• Pagination
• Showroom of rooms of the housing complex
• Apartment catalog
• Modal window with form validation

🚀 Demo

https://krashher.github.io/real-estate-website/

💻 Built with

Technologies used in the project:

🧐 Features

Here're some of the project's best features:

Displaying of data received from the server (Rest-API)

The data that comes from the server using fetch API is displayed in a special list of cards containing basic information about buildings.

Sorting and filtering of the received data

The data is sorted (premium buildings are displayed first) and filtered with special inputs. Inputs set the values that are used as filters. When the filter is changed, the selectFilteredCards selector is re-rendered.

House Constructor

The constructor memorizes the user's answers to the questions and then applies them as filters to the buildings and displays only those that have apartments that match the specified conditions.

News Pagination

The data comes from the server, using Axios. It is then cached in Redux to avoid repeated requests to retrieve the news page if it has already been loaded.

Showroom with interactive buttons-indicators

The data about the rooms of the apartments have in addition to pictures also a type. This helps to realize interactive buttons - indicators of the room the user is looking at.

Catalog of avaiable apartments

The user selects an apartment from the list (list includes filter by apartment type), evaluates its characteristics and then clicks select. After that a modal window appears, in which it is necessary to specify the phone number (input validation with zod).

🛠️ Installation:

Start with cloning this repo on your local machine:

$ git clone https://github.com/KrashheR/real-estate-website.git
$ cd real-estate-website

To install and set up the library, run:

$ npm install

Or if you prefer using Yarn:

$ yarn add --dev

Usage

Serving the app

$ npm start

Running the tests

$ npm test

Building a distribution version

$ npm run build

This task will create a distribution version of the project inside your local dist/ folder