Images App (iOS)

• Skills: iOS Development, Swift, UIKit, Foundation, XCTest (Unit Testing), Performance Benchmarking
• Timeline: 11/22/23 - 11/24/23 (3 days)

Background

Pixabay is a popular stock photo and video website that offers a vast collection of free high-quality images and videos. With over 2.4 million users and over 2.7 million images, Pixabay has become a go-to resource for creatives and individuals seeking royalty-free visual content.

Problem Statement

Create an iOS app that enables users to search for images on Pixabay, select multiple images from the search results, scroll endlessly through search results, and view the selected images in a slideshow format.

Proposed Solution

Search & Select Multiple Images

Search for images using the Pixabay API, which gives you access to over 2 million images. Select as many images as you like from the search results.

Scroll Endlessly

Scroll endlessly without a hitch thanks to automatic content retrieval, asynchronous image loading and caching.

View Selected Images in a Slideshow

View selected images (at least 2) in a slideshow. The images change automatically every 3 seconds, or you can scroll them horizontally.

Implementation Plan

• Define the UI using Figma.
• Implement the models Hit and PixabayJSON, make them decodable and write unit tests to test the decoding.
• Create a ImageGridViewController class. Using a storyboard, Add a search bar, collection view and a toolbar to the root view controller. Add Auto Layout constraints using XCode. Connect the views to ImageGridViewController.
• Create a Playground. Perform GET requests using Pixabay API, testing a variety of query parameters. Retrieve sample data for q = "" and per_page = 20.
• Implement ImageCache to load images asychronously and cache them, using sample data URLs.
• Implement collection view (cell registration and snapshot) to display images using ImageCache and sample data.
• Implement PixabayClient to provide a method perform a specific query: loadHits
• Implement HitProvider to replace sample data. The class provides the hits array to read and 2 methods to update the hits array: loadFirstPageData and loadNextPageData.
• Enable search using the search bar
• Enable infinite scrolling
• Enable selecting and deselecting multiple images in the collection view
• Add cancel and done buttons and # image(s) selected label to the toolbar. Make them update whenever images are selected/deselected and new search query is performed.
• Implement the ImagesViewController to show the selected images in a slideshow (enable manual scrolling horizontally). Apply Auto Layout constraints programmatically (used NSLayoutConstraint.activate([]) and VFL)
• Test the application as a user, fix any bugs & monitor performance.
• Add comments
• Handle errors when loading Hit data from Pixabay

Next Steps

• Make the app accessible (add play/pause and close buttons in ImagesViewController...)
• Handle errors with alert view controllers to alert users of any failures (network connection...)
• Fix Memory usage (Caching without any limit): limit caching capacity using totalCostLimit and clear cache when performing a new query.

Each step corresponds to a scroll with new images being fetched to fill and cached:

• Do not define the constants in the middle of the code (c.f. ImageGridViewController.createLayout())
• Make PixabayClient.loadHits() better testable (using dependency injection for URLSession...)
• Remove duplicate code in ImageGridViewController
• Improve comments

Appendix

Initial UI design using Figma