A React dynamic image gallery that utilizes lazy loading

by React

Lazy-Images-Gallery #Demo

📜 Description

Lazy-Images-Gallery is a dynamic image gallery that utilizes lazy loading techniques inspired by popular platforms like Unsplash and Pinterest. This project leverages the Intersection Observer API to efficiently load images as they come into the viewport, enhancing performance and user experience.

🎯 Features

  • Lazy Loading: Images are loaded on-demand as the user scrolls, ensuring that only the visible images are loaded initially, reducing the initial load time and optimizing resource usage.
  • Intersection Observer: The Intersection Observer API is used to detect when images enter the viewport, triggering the loading process and improving the overall performance by reducing unnecessary network requests.
  • Responsive Design: The gallery is designed to be responsive, adapting to different screen sizes and providing an optimal viewing experience on various devices.

🌐 Links

💻 Tech Requirements

  • React
  • Tests: Jest + react-testing-library / enzyme
  • Typescript

Pre-requisites

To run program, run the following command.

🔨 Running Code (react)

To run program, run the following command.

  1. Use the terminal to execute the following commands:

    • npm install or yarn install to install the dependencies for react application
    • npm start to start the the application

  2. Open your browser on http://localhost:3000 to see the page

🔨 Running Test

  1. To run tests, run the following command.
  npm run test

Author

✔️ Prerequisites

  • Node.js

GitHub

View Github