Parking Availability Monitor

View Live Demo 🚀

Introduction

This project is designed to provide real-time parking availability for multiple parking locations in a user-friendly interface. By fetching data from a remote source and dynamically updating the UI, users can easily determine the status of parking lots: Free, Low, or Full.

Core Features

  1. Dynamic Data Fetching: Parking details are fetched concurrently for all predefined parking locations using the getParking function.
  2. Status-Based Color Coding: Each parking location’s status is displayed with intuitive color codes:
    • 🟢 Free: The parking lot is mostly empty and has plenty of available spaces.
    • 🟡 Low: Limited parking spaces are available. Act quickly!
    • 🔴 Full: The parking lot is fully occupied. Consider other locations.
  3. Responsive UI: The UI is styled to provide a clear and visually appealing summary of the parking statuses.

How It Works

This project utilizes modern web technologies and libraries to fetch, process, and display real-time parking availability. Here’s an overview of the high-level architecture:

  1. Fetching Data:

    • Parking data is retrieved from the Ahuzot Parking website using fetch, a native JavaScript API for making HTTP requests.
    • The HTML content of the fetched webpage is processed using JSDOM, a library that enables server-side DOM manipulation.

  2. Data Extraction:

    • Specific elements of the HTML (e.g., parking status, last updated date) are queried using DOM selectors provided by JSDOM.
    • Parking status is determined by mapping image filenames to predefined statuses (Free, Low, Full).

  3. UI Rendering:

    • The UI is built with Astro, a modern static site generator that delivers highly optimized frontend performance.
    • Parking data is displayed dynamically using a layout component (MainPageLayout) and styled using utility CSS classes.

  4. Concurrency:

    • To improve performance, all parking locations are fetched concurrently using Promise.all, ensuring minimal delays even with multiple requests.

  5. Styling and Color Coding:

    • Parking statuses are visually represented using color-coded cards.
    • A custom pickColor function determines the background color of each parking card based on its status.

Libraries and Tools Used

  • Astro: For building the static frontend and creating reusable layout components.
  • JSDOM: For server-side DOM manipulation to parse and extract data from HTML.
  • Fetch API: For making HTTP requests to retrieve parking data.
  • CSS: For responsive and visually appealing styling.

Workflow

  1. The getParking function fetches and processes parking details for each location.
  2. Parking data is stored in an array and passed to the MainPageLayout component.
  3. The UI dynamically renders cards for each parking location with the status and color-coding based on availability.

Example Flow

  1. Fetch data for “Adar” parking lot:
    • Request: Adar Parking Lot Details
    • Parse HTML, extract the parking status image (src) and last updated date (IconText).
  2. Map image source (src) to a status (e.g., 🟢 Free for “panui”).
  3. Pass the processed data to the frontend to render a card with the name, status, and appropriate background color.

Parking Locations 🅿️

The project monitors the following parking locations:

  • Adar
  • Sarona
  • Dovnov
  • Golda
  • Liber
  • Habima
  • Nordao
  • Dan