https://github.com/bkpecho/infinite-scroll

This web application utilizes modern web development techniques to create an efficient infinite scroll feature, allowing users to easily load a continuous stream of high-quality images from the Unsplash API.
https://github.com/bkpecho/infinite-scroll

async-await css3 dom fetch-api html5 javascript netlify responsive-design scroll-event unsplash-api

Last synced: 14 days ago
JSON representation

This web application utilizes modern web development techniques to create an efficient infinite scroll feature, allowing users to easily load a continuous stream of high-quality images from the Unsplash API.

• Host: GitHub
• URL: https://github.com/bkpecho/infinite-scroll
• Owner: bkpecho
• Created: 2023-04-17T04:03:01.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-17T10:35:37.000Z (over 1 year ago)
• Last Synced: 2024-12-12T20:36:15.470Z (16 days ago)
• Topics: async-await, css3, dom, fetch-api, html5, javascript, netlify, responsive-design, scroll-event, unsplash-api
• Language: JavaScript
• Homepage: https://bk-infinite-scroll.netlify.app
• Size: 1.01 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Infinite Scroll

This web application utilizes modern web development techniques to create an efficient infinite scroll feature, allowing users to easily load a continuous stream of high-quality images from the Unsplash API. Using the Fetch API and asynchronous JavaScript functions like async/await, images are dynamically retrieved and displayed, while a Scroll Event Listener detects when the user reaches the bottom of the page. To enhance the user experience for those with slower internet connections, the app implements adaptive loading techniques.

## Link to project:

- Live Site URL: [Netlify](https://bk-infinite-scroll.netlify.app/)

## Screenshot

#### Desktop View

![](/src/images/desktop-view.png)

## How It's Made:

Tech used: HTML, CSS, JavaScript

This project uses HTML, CSS, and JavaScript to create a simple but effective infinite scroll feature. The Unsplash API is used to dynamically retrieve and display images, while the Fetch API and asynchronous JavaScript functions like async/await are used to handle the data retrieval process. A Scroll Event Listener is used to detect when the user has reached the bottom of the page and trigger the loading of additional images.

## Optimizations:

In the future, I plan to convert this project to a React app, providing significant performance and maintenance benefits. Furthermore, I aim to enhance the design using Tailwind CSS for greater customization and consistency. Additionally, to further improve the user experience, I plan to optimize image sizes to reduce loading times.

## Lessons Learned:

This project provided me with valuable experience in working with asynchronous JavaScript functions like async/await, as well as handling data retrieval and manipulation using the Fetch API. Additionally, I gained proficiency in using the DOM and Scroll Event Listener to implement interactive features.

## Author

- Github - [BK Pecho](https://www.github.com/bkpecho)

- Frontend Mentor - [@bkpecho](https://www.frontendmentor.io/profile/bkpecho)

- Twitter - [@bkpecho](https://www.twitter.com/bkpecho)

## For other examples of my work, check out these projects:

- **Quote-Generator:** [GitHub Repository](https://github.com/bkpecho/quote-generator)

- **Huddle Landing Page:** [GitHub Repository](https://github.com/bkpecho/huddle-landing-page)