Glass enhances web experiences by leveraging the Unsplash API to dynamically generate and infinitely load high-quality images. It introduces a unique feature allowing users to apply filters, searching for images that match specific criteria directly from Unsplash. This project builds upon the concepts introduced in the javascript20-projects | Infinite Scroll by extending functionality and implementing advanced web development practices.
- Infinite Image Loading: Seamlessly load images as the user scrolls, enhancing user engagement without sacrificing performance.
- Filtered Searches: Incorporate user-specified filters to tailor image searches to specific needs, utilizing the comprehensive Unsplash API.
- Responsive Design: Employ Google Fonts and minimalist design principles to ensure the site is aesthetically pleasing on any device.
- Unsplash API: Visit Unsplash Developers
- CSS Loaders: Explore Loaders
- Google Fonts: Discover Fonts
- Netlify: Learn More
- Axios: Documentation
- Node.js: For backend functionality.
- Integrated using HTML and CSS from CSS Loaders.
- Customized styles for a visually appealing loading experience.
- Adopted Montserrat from Google Fonts for typography.
- Images are displayed in a single-column layout to maintain simplicity and focus.
- Added a header bar for project title and filter input, facilitating easy access to Unsplash's filtered searches.
- Asynchronous functions fetch images from Unsplash, ensuring a smooth infinite scrolling experience.
- Dynamically creates HTML elements (
<a>
and<img>
) to display images, handling image metadata effectively. - Utilizes DOM manipulation methods (
getElementById
,createElement
,appendChild
) and a customsetAttributes
function to streamline element attribute assignment.
- Environment Variables: Configured in Netlify to securely store and access the Unsplash API key, preventing unauthorized access.
- Netlify Functions: Implemented to act as a secure intermediary for API requests, utilizing Axios for HTTP requests and handling query parameters through serverless functions.
- Netlify Environment Variables: Securely added the Unsplash API key into the Netlify site settings to keep it private.
- Serverless Function Configuration: Established a Netlify function to manage API requests, ensuring secure API key usage without exposing it in client-side code.
- Axios for API Calls: Utilized within Netlify functions to streamline and manage HTTP requests to the Unsplash API.
Source Code: Jacinto Wong