Ios Lead Essentials Image Comments Challenge Public

Overview

The Image Comments Challenge - iOSLeadEssentials.com

It’s time to put your development skills to the test!

You are called to add a new feature to the Feed App: displaying image comments when a user taps on an image in the feed.

The goal is to implement this feature using what you learned in the program.

You'll develop the API, Presentation, UI, and Composition for the 'Image Comments' feature.

Important: There's no need to cache comments.

Important: As a minimum requirement to take this challenge, you must have seen the live lectures #001 until #004.


Your challenge

  1. Display a list of comments when the user taps on an image in the feed.

  2. Loading the comments can fail, so you must handle the UI states accordingly.

    • Show a loading spinner while loading the comments.

      • If it fails to load: Show an error message.

      • If it loads successfully: Show all loaded comments in the order they were returned by the remote API.

  3. The loading should start automatically when the user navigates to the screen.

    • The user should also be able to reload the comments manually (Pull-to-refresh).
  4. At all times, the user should have a back button to return to the feed screen.

    • Cancel any running comments API requests when the user navigates back.

      • Important: Only cancel when the scene has been deallocated.

      • Don't cancel the request on viewWillDisappear/viewDidDisappear because it doesn't mean the view has been deallocated (the view may appear again!).

  5. The comments screen layout should match the UI specs.

    • Present the comment date using relative date formatting, e.g., "1 day ago."
  6. The comments screen title should be localized in all languages supported in the project.

  7. The comments screen should support:

    • Light and Dark Mode
    • Dynamic Type (Scalable font sizes based on the user preference)
  8. Write tests to validate your implementation, including unit, integration, and snapshot tests (aim to write the test first!).

    • ⚠️ Important: Different simulators may generate slightly different snapshots (even if they look the same!). So you must run the snapshot tests using the exact same simulator used to take the snapshots:

      • Use precisely the 'iPhone 13 - iOS 15.2' simulator.
    • Do not change any existing snapshot. They're there to validate your implementation.

  9. Follow the specs below and test-drive this feature from scratch:


API Specs

Feed Image Comment

Property Type
id UUID
message String
created_at Date (ISO8601 String)
author CommentAuthorObject

Feed Image Comment Author

Property Type
username String

Payload contract

GET /image/{image-id}/comments

2xx RESPONSE (**Important**: any 2xx response is valid - not only 200!)

{
	"items": [
		{
			"id": "a UUID",
			"message": "a message",
			"created_at": "2020-05-20T11:24:59+0000",
			"author": {
				"username": "a username"
			}
		},
		{
			"id": "another UUID",
			"message": "another message",
			"created_at": "2020-05-19T14:23:53+0000",
			"author": {
				"username": "another username"
			}
		},
		...
	]
}

Base URL

https://ile-api.essentialdeveloper.com/essential-feed

Feed URL

Base URL + /v1/feed

https://ile-api.essentialdeveloper.com/essential-feed/v1/feed

Image Comments URL

Base URL + /v1/image/{image-id}/comments

https://ile-api.essentialdeveloper.com/essential-feed/v1/image/{image-id}/comments


UI Specs

Follow the UI specs for loading, error, and success states:

Image Comments UI

Image Comments UI


BDD Specs

Story: Image Comments

Narrative

As an online customer
I want the app to load image commments
So I can see how people are engaging with images in my feed

Scenarios (Acceptance criteria)

Given the customer has connectivity
 When the customer requests to see comments on an image
 Then the app should display all comments for that image
Given the customer doesn't have connectivity
 When the customer requests to see comments on an image
 Then the app should display an error message

Use Cases

Load Image Comments From Remote Use Case

Data:

  • ImageID

Primary course (happy path):

  1. Execute "Load Image Comments" command with above data.
  2. System loads data from remote service.
  3. System validates data.
  4. System creates comments from valid data.
  5. System delivers comments.

Invalid data – error course (sad path):

  1. System delivers invalid data error.

No connectivity – error course (sad path):

  1. System delivers connectivity error.

Instructions

  1. Fork the latest version of this repository. Here's how forking works.

  2. Open the EssentialApp/EssentialApp.xcworkspace on Xcode 13.2.1.

    • Other Xcode versions are not supported.

      • Challenges submitted with branches other than xcode13_2_1 will be rejected.
    • Do not change the indentation in the project.

    • Do not rename the existing classes and files.

    • Important: Every time you build the project, it'll automatically reformat the modified files with SwiftFormat to maintain the code consistent.

  3. You need to implement the API, Presentation, UI, and Composition for the Image Comments feature.

    • API:

      • Create a Test file: EssentialFeedTests/ImageComments/API/ImageCommentsMapperTests.swift

      • Create a Prod file: EssentialFeed/ImageComments/API/ImageCommentsMapper.swift

      • Test-drive the ImageCommentsMapper following the API specs above.

        • Look at the Feed API tests and implementation as a guide.
    • Presentation:

      • Create a Test file: EssentialFeedTests/ImageComments/Presentation/ImageCommentsPresenterTests.swift

      • Create a Prod file: EssentialFeed/ImageComments/Presentation/ImageCommentsPresenter.swift

      • Create a strings file: EssentialFeed/ImageComments/Presentation/ImageComments.string

      • Test-drive the ImageCommentsPresenter following the Presentation specs.

        • Look at the Feed Presentation tests and implementation as a guide.
      • Create EssentialFeed/ImageComments/Presentation/ImageCommentsLocalizationTests.swift to ensure the ImageComments.string file supports all localizations in the project.

    • UI

      • Create a Test file: EssentialFeediOSTests/ImageComments UI/ImageCommentsSnapshotTests.swift

      • Create a Prod file: EssentialFeediOS/ImageComments UI/Controllers/ImageCommentCellController.swift

      • Create a Prod file: EssentialFeediOS/ImageComments UI/Views/ImageComments.storyboard

      • Test-drive the ImageCommentCellController with snapshot tests following the UI specs.

        • Look at the Feed UI tests and implementation as a guide.
    • Comments UI Composer

      • Create a Test file: EssentialAppTests/ImageCommentsUIIntegrationTests.swift

      • Create a Prod file: EssentialApp/CommentsUIComposer.swift

      • Test-drive the CommentsUIComposer implementation with integration tests.

        • Look at the Feed UI integration tests and FeedUIComposer implementation as a guide.
    • Composition

      • Open the EssentialAppTests/FeedAcceptanceTests.swift

      • Test-drive the composition with an acceptance test (select an image in the list and check the comments view was shown on screen with the expect comments).

        • The composition must be implemented in the SceneDelegate.showComments() method.

        • Look at the Feed acceptance tests and implementation as a guide.

  4. You can see/interact with your solution by running the Application on the simulator (or device).

    • Switch to the EssentialApp scheme and press CMD+R.
  5. Errors should be handled accordingly.

    • There shouldn't be any fatalError in production code.

    • There shouldn't be empty catch blocks.

    • There shouldn't be any print statements, such as print(error).

  6. When all tests are passing and you're done implementing your solution:

    • Review your code and make sure it follows all the instructions above.

      • If it doesn't, make the appropriate changes, push, and review your code again.
    • If it does, create a Pull Request from your branch to the main challenge repo's matching branch.

      • For example, if you implemented the challenge using the xcode13_2_1 branch, your PR should be from your fork's xcode13_2_1 branch into the main repo's xcode13_2_1 branch (DO NOT MIX Xcode versions or you'll have merge conflicts!).
    • The title of the Pull Request should be: Your Name - Image Comments Challenge

    • Create only one Pull Request and do not close it. If you have any issues, send a comment inside the Pull Request asking for help.

  7. As soon as you create a Pull Request, we automatically receive a notification. You just need to create it and wait while we review your Pull Request and approve it or request any changes required with detailed feedback.


Guidelines

  1. Aim to commit your changes every time you add/alter the behavior of your system or refactor your code.

  2. Aim for descriptive commit messages that clarify the intent of your contribution which will help other developers understand your train of thought and purpose of changes.

  3. The system should always be in a green state, meaning that in each commit all tests should be passing.

  4. The project should build without warnings.

  5. The code should be carefully organized and easy to read (e.g. indentation must be consistent).

  6. Make careful and proper use of access control, marking as private any implementation details that aren’t referenced from other external components.

  7. Aim to write self-documenting code by providing context and detail when naming your components, avoiding explanations in comments.

Happy coding!

You might also like...
✂️ Detect and crop faces, barcodes and texts in image with iOS 11 Vision api.
✂️ Detect and crop faces, barcodes and texts in image with iOS 11 Vision api.

ImageDetect ImageDetect is a library developed on Swift. With ImageDetect you can easily detect and crop faces, texts or barcodes in your image with i

A lightweight and fast image loader for iOS written in Swift.

ImageLoader ImageLoader is an instrument for asynchronous image loading written in Swift. It is a lightweight and fast image loader for iOS. Features

Lightbox is a convenient and easy to use image viewer for your iOS app
Lightbox is a convenient and easy to use image viewer for your iOS app

Lightbox is a convenient and easy to use image viewer for your iOS app, packed with all the features you expect: Paginated image slideshow. V

📸 Instagram-like image picker & filters for iOS
📸 Instagram-like image picker & filters for iOS

YPImagePicker YPImagePicker is an instagram-like photo/video picker for iOS written in pure Swift. It is feature-rich and highly customizable to match

An extremely high-performance, lightweight, and energy-efficient pure Swift async web image loader with memory and disk caching for iOS and  Watch.

KFSwiftImageLoader KFSwiftImageLoader is an extremely high-performance, lightweight, and energy-efficient pure Swift async web image loader with memor

Image picker with custom crop rect for iOS written in Swift (Ported over from GKImagePicker)
Image picker with custom crop rect for iOS written in Swift (Ported over from GKImagePicker)

WDImagePicker Ever wanted a custom crop area for the UIImagePickerController? Now you can have it with WDImagePicker. Just set your custom crop area a

Phimp.me - Photo Image Editor and Sharing App. Phimp.me is a Photo App for iOS that aims to replace proprietary photo applications. It offers features such as taking photos, adding filters, editing images and uploading them to social networks. iOS hashtag generator, using image analysis and discovery
iOS hashtag generator, using image analysis and discovery

Tagger Description Want to be popular on some social network easily? Use Tagger to make your account content more popular and to raise your popularity

Mobile(iOS) Text-to-Image search powered by multimodal semantic representation models(e.g., OpenAI's CLIP)
Mobile(iOS) Text-to-Image search powered by multimodal semantic representation models(e.g., OpenAI's CLIP)

Mobile Text-to-Image Search(MoTIS) MoTIS is a minimal demo demonstrating semantic multimodal text-to-image search using pretrained vision-language mod

Owner
Istvan Balogh
Istvan Balogh
AsyncImage before iOS 15. Lightweight, pure SwiftUI Image view, that displays an image downloaded from URL, with auxiliary views and local cache.

URLImage URLImage is a SwiftUI view that displays an image downloaded from provided URL. URLImage manages downloading remote image and caching it loca

Dmytro Anokhin 1k Jan 4, 2023
Twitter Image Pipeline is a robust and performant image loading and caching framework for iOS clients

Twitter Image Pipeline (a.k.a. TIP) Background The Twitter Image Pipeline is a streamlined framework for fetching and storing images in an application

Twitter 1.8k Dec 17, 2022
Image-cropper - Image cropper for iOS

Image-cropper Example To run the example project, clone the repo, and run pod in

Song Vuthy 0 Jan 6, 2022
📷 A composable image editor using Core Image and Metal.

Brightroom - Composable image editor - building your own UI Classic Image Editor PhotosCrop Face detection Masking component ?? v2.0.0-alpha now open!

Muukii 2.8k Jan 3, 2023
📷 A composable image editor using Core Image and Metal.

Brightroom - Composable image editor - building your own UI Classic Image Editor PhotosCrop Face detection Masking component ?? v2.0.0-alpha now open!

Muukii 2.8k Jan 2, 2023
AYImageKit is a Swift Library for Async Image Downloading, Show Name's Initials and Can View image in Separate Screen.

AYImageKit AYImageKit is a Swift Library for Async Image Downloading. Features Async Image Downloading. Can Show Text Initials. Can have Custom Styles

Adnan Yousaf 11 Jan 10, 2022
A complete Mac App: drag an image file to the top section and the bottom section will show you the text of any QRCodes in the image.

QRDecode A complete Mac App: drag an image file to the top section and the bottom section will show you the text of any QRCodes in the image. QRDecode

David Phillip Oster 2 Oct 28, 2022
Convert the image to hexadecimal to send the image to e-paper

ConvertImageToHex Convert the image to hexadecimal to send the image to e-paper Conversion Order // 0. hex로 변환할 이미지 var image = UIImage(named: "sample

Hankyeol Park 0 Feb 26, 2022
An instagram-like image editor that can apply preset filters passed to it and customized editings to a binded image.

CZImageEditor CZImageEditor is an instagram-like image editor with clean and intuitive UI. It is pure swift and can apply preset filters and customize

null 8 Dec 16, 2022
Agrume - 🍋 An iOS image viewer written in Swift with support for multiple images.

Agrume An iOS image viewer written in Swift with support for multiple images. Requirements Swift 5.0 iOS 9.0+ Xcode 10.2+ Installation Use Swift Packa

Jan Gorman 601 Dec 26, 2022