- Skills:
iOS Development
,Swift
,UIKit
,Foundation
,XCTest
(Unit Testing
),Performance Benchmarking
- Timeline:
11/22/23 - 11/24/23
(3 days
)
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.
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.
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 without a hitch thanks to automatic content retrieval, asynchronous image loading and caching.
View selected images (at least 2) in a slideshow. The images change automatically every 3 seconds, or you can scroll them horizontally.
- Define the UI using Figma.
- Implement the models
Hit
andPixabayJSON
, 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 toImageGridViewController
. - Create a Playground. Perform GET requests using Pixabay API, testing a variety of query parameters. Retrieve sample data for
q = ""
andper_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 thehits
array to read and 2 methods to update thehits
array:loadFirstPageData
andloadNextPageData
. - Enable search using the search bar
- Enable infinite scrolling
- Enable selecting and deselecting multiple images in the collection view
- Add
cancel
anddone
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
- 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 forURLSession
...) - Remove duplicate code in
ImageGridViewController
- Improve comments