Airbnb Web Scraper

A web application that scrapes data from Airbnb (last 10 properties), processes the data, and displays it in a user-friendly interface.

I have written a tutorial about how I did this. You can find it here or here.

---

Tech stack

• React / Vite - used to build the UI
• TailwindCSS - used to style the UI
• Playwright - used to build the scraper
• Axios - used to make requests from the frontend to the backend (Express.js server)
• Express.js - used to spin up a http server and to expose a route ('/scrape') for triggering the scraping

Application features:

• Header

  1. Contains the app title
  2. Contains a button (Refresh) for triggering a new scraping

• Grid

  1. First time when the app is loaded there is an effect that will trigger initial fetching. The data is stored in the local storage. Every time when the Refresh button is used the local storage will be emptied and populated with the new data.
  2. Displays the a grid of the fetched properties data in nice tile-like components
  3. There is a link in each property tile that will open the property page in a new tab

• Footer

  1. Added a copyright notice to enhance the app's completeness and professional appearance.

Demo

⭐ https://scraper-fe.onrender.com/ ⭐

Running The App locally

To run the app, follow these steps.

1. Ensure that NodeJS is installed.
2. Install npm.
3. From the project folder, execute the following commands:

To install dependencies:

  npm i

To run the client app:

  npm run dev

To run the server app:

  npm start

Browse to http://localhost:5173/ and see the running app.