Surreal Estate React App

To Do

  • move webiste to .env var
  • image optimisation
  • adjust API to accept object for img
  • update initial state for placeholder and default images
  • add alt text and id (as key) to each image from img object
  • error handling for unsplash api
  • use toast for loading, error and success messages

https://fkhadra.github.io/react-toastify/introduction/ https://www.npmjs.com/package/react-toastify

This is a 3 week track where you will create a property search engine similar to RightMove or Zoopla. It is a big one so focus more on taking time to understand the concepts, rather than rushing through to the end - the material isn't going anywhere!

Learning objectives To be able to answer "yes" to the following questions:

Are you able to explain what Single Page Application means and what client-side routing is?

Can you use React Router to define and navigate between routes?

Can you create forms in React?

Can you read and understand API documentation?

Can you make requests in Postman to an external API and can you translate these requests into your React application?

Can you implement 3rd party authentication?

Concepts Single Page Application (SPA)

Client-side Routing

Controlled Inputs

HTTP Requests

API Interaction

OAuth

Challenge You are going to create a property search engine that will have multiple pages:

A listings page where you can search for different properties and sort/filter the results.

An add property page where you will add new properties.

A property page.

Properties will come from an API that we've created.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.