Git Product home page Git Product logo

images-ios's Introduction

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.

Search & select multiple images

Scroll Endlessly

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

Scroll endlessly

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.

View selected images in a slideshow

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: Memory Usage

  • 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

GridViewController DetailViewController

images-ios's People

Contributors

jathurchan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.