iOS app that allows you to search for any comic character and save your favorites in a list.

Overview

iOS App: My Comics

Swift exercise

¡Hola mundo!

In my Swift learning journey my mentor and I decided to do an app using the Comic Vine API. This API gives a lot of information about comic characters so we decided to do a search app where you can look for any character and add it into a favorite list ⭐️

App view after you do a search on the search bar Character detail, after you click on a character. Shows all the api information: photo, gender, description, powers and also renders a heart to make it favorite Favorites view

Screen.Recording.2021-11-02.at.13.10.04.mov

Some Requirements 📋

  • Create a Swift App
  • App must be feed via API
  • Main components must be tested
  • Add and render a favorite list
  • User must be able to search characters in a search bar
  • There must be at least one filter other than the search

Extra features 🌟

  • Allow users to erase the search input
  • Add a tab bar

Built with 🔨

  • XCode
  • SwiftUI
  • Combine
  • CoreData

Development ⌨️

This has been a team work between my mentor and I, as the app was and is part of my Swift learning path 📱 . So we started managing the API for so he used and explain to me some of the Combine functionalities. With the API communication working properly we started shaping all the views that are stored in the "Scenes" and "View" folders.

Here is important to tell that, as a good practice, our view's structs do not have any logic in them, for so we have worked with the View Models. This way the view's structs are as clean and possible and they do one thing: to render. And the View Models are the brain 🧠 behind, sending in all the possible information, or logic needed to do so correctly.

The view can be separated in five main components:

🦹🏽‍♀️ 🦸 Character List 🦹🏽‍♀️🦸🏻‍♂️

This view shows the image and name of the character searched. This is the most basic view and is the only one that has no viewModel attached to it.

App screenshot of Mafalda showing the character list view

👁 Character Detail 👁

As is name say, is the detailed view. When the user click on a character, this view will be rendered showing more information of it. In this view the user will also find a heart, clicking on it will "favorite" the character. This action will allow the user to later find, all its favorites characters in the "Favorite" tab.

🔎 Search bar 🔎

This is our main view as the search action is necessary in order to call the API and show the user the information. This view comes with three main components: - The TextField() itself that will take the user input that we will search in the API to later render it in the Character's components. - The delete search icon, an icon that will be shown after the user starts writing and that allows it to delete the input - The Picker that allows the user to filter the characters by gender. This filter will only be available after the user has done a search and results are rendered

❤️ Favorites ❤️

This is the favorites view. Any character that has been favorited by the user will be shown here

👆 Tab Bar 👆

As a navigation treat we implemented a tab bar that makes it easier to the user to move between the search area and the favorite list.

Screenshot 2021-11-02 at 13 54 06

As the views where ready we went a little further. My mentor created a Data Base using CoreData. This Data Base saves all the characters that the user favorited in order to later render them in the favorite area. Finally we went into the testing, we decided to test all the main components and functions.

Some things I really like 💖

Delete search icon

This is a really small functionality but for the user is a very interesting one. Also I do think that this kind of details really make the app to look and feel really polished.

The delete search icon is a little icon that will be shown in the search bar as soon as the user starts typing. If clicked before the search it will erase whatever the user was writting and empty the field. However if clicked after the user has done a search, it will not only erase the text field input it will also clean up the characters area.

Screen.Recording.2021-11-02.at.14.06.45.mov

Testing

Prior to this project my experience in doing unitary test has been almost unexistant so this was a rollercoaster 🎢 but I had a lot of fun. For the testing my mentor did 4 components to help me understand a little bit more about unit testing, but also for me to have some guidance on how and what to test. After it I was able to do more than 20 test! I'm still in awe about this.

My challenges 🚩

I definetly need to keep digging into the testing as I still find it really hard and takes me lots of time. Combine a CoreData are huge challenges, they are SUPER important, and without them the app would just not work. Both the Combine and CoreData implementations were done by my mentor so I would definetly love to practice them on my own in order to be able to develop them by myself.

Want to clone this repo? 🐑

If you want to clone this repo please feel free to. There's one file missing called "Constants" if you want the code to compile correctly you will need to create a file with this name and add this struct, take into consideration that you will need to assign the apiKey constant your own API key.

struct Constants {
    
    static let baseURL = "https://comicvine.gamespot.com/api/"
    static let apiKey = "yourApiKey"
}

Codefactor

CodeFactor

You might also like...
Add to-do List  - a mobile application where you can add your to-dos and follow them
Add to-do List - a mobile application where you can add your to-dos and follow them

This project, is a mobile application where you can add your to-dos and follow them. You can add your to-do's.

Red Torch is a very very (very) simple iOS app that allows you to have a red torch using your screen.

RED Torch Red Torch is a very very (very) simple iOS app that allows you to have a red torch using your screen. The App is based on storyboard, so the

A open source Swift app for iOS 13 that allows you to check your NFC transit card information. Written with SwiftUI.
A open source Swift app for iOS 13 that allows you to check your NFC transit card information. Written with SwiftUI.

ABANDONED Metrodroid, which TransitPal was heavily inspired by, now has its own fully functional iOS app! It should be in the App Store "soon". I stro

In this mini app covered the concepts like basics of SwiftUI and Navigations and Animations and List with CRUD functions and MVVM and App Launch and App icons adding and also applied persistence using UserDefaults Concept.
In this mini app covered the concepts like basics of SwiftUI and Navigations and Animations and List with CRUD functions and MVVM and App Launch and App icons adding and also applied persistence using UserDefaults Concept.

TodoList In this application used the concepts from the beginner level project of SwiftUI_Evolve_1 The following concepts covered in this mini app Swi

macOS app to save links for later
macOS app to save links for later

Later Later is a SwiftUI, macOS app to store and save links for later use! Why? I was tired of Reddit's terrible post saving, and wanted an easy, conv

Generate strong passwords and save them in Keychain. Made with SwiftUI.
Generate strong passwords and save them in Keychain. Made with SwiftUI.

lockd Password manager iOS app, generate strong passwords and save them in Keychain. Download lockd on the App Store: https://apps.apple.com/us/app/lo

This is a repository with an app that shows a list of posts and where you can access the detail of each of them
This is a repository with an app that shows a list of posts and where you can access the detail of each of them

PostsApp This is a repository with an app that shows a list of posts and where you can access the detail of each of them Dependencies You need to inst

Fast iOS app to browse and search movies, tv, actors, credits
Fast iOS app to browse and search movies, tv, actors, credits

Fast iOS app to browse and search movies, tv, actors, credits

SwiftUI app to search and showcase SF Symbols 🔎
SwiftUI app to search and showcase SF Symbols 🔎

SF Symbols (SwiftUI 2.0 App) Experimenting with SwiftUI 2.0 whilst creating a practical app to browse the SF Symbols via an iOS/iPadOS app. 👨🏻‍⚖️ Di

Comments
  • Feature/dark mode

    Feature/dark mode

    Added @Environment clause with variable currentMode to characterCell and tabBar extension in order to listen the device mode and change the background and barTintColor according to it

    opened by silviaespanagil 0
Owner
Silvia España Gil
Mobile Developer Jr. currently working on Swift 📱 My notebooks are CSS styled ✏️📝
Silvia España Gil
Timetinerary is an iOS app that allows you to create, save, and share continuous schedules.

Timetinerary is an iOS app that allows you to create, save, and share continuous schedules. These schedules can be converted into a widget and notifications.

Ben Koppe 1 Feb 14, 2022
Mahmoud-Abdelwahab 5 Nov 23, 2022
Visualize your dividend growth. DivRise tracks dividend prices of your stocks, gives you in-depth information about dividend paying stocks like the next dividend date and allows you to log your monthly dividend income.

DivRise DivRise is an iOS app written in Pure SwiftUI that tracks dividend prices of your stocks, gives you in-depth information about dividend paying

Kevin Li 78 Oct 17, 2022
MapApp - You can save the location of the places you go on the map and add names and notes

MapApp - You can save the location of the places you go on the map and add names and notes

Yağız Savran 3 Feb 1, 2022
Stock is a MacOS menu bar app that helps you quickly save a web link, a file link, or a text by using drag and drop

Stock is a MacOS menu bar app that helps you quickly save a web link, a file link, or a text by using drag and drop

シュンジョーァ 19 Dec 4, 2022
Weather forecast app that allows the user to either look for weather at their current location based on the GPS data or search for another city manually.

⛅️ Cloudy Weather forecast app that allows the user to either look for weather at their current location based on the GPS data or search for another c

Burhan 0 Nov 7, 2021
Todo-list - Simple todo list app written in Swift

About TodoApp TodoApp is sinmple todo list app that I created in my free time, i

null 2 Aug 30, 2022
iOS App that allows a pilot to check drone photo collection after a mapping mission for any issues

DronePhotoChecker iOS App that allows a pilot to check drone photo collection after a mapping mission for any issues. Features: Connects to DJI drone

null 0 Dec 30, 2021
An iOS app that allows you to create resumes on your phone and export them to pdf

Resume Builder iOS An iOS app that allows you to create resumes on your phone and export them to pdf To create a new resume, choose + from the main vi

Sonia Grzywocz 1 Oct 25, 2021
Cookbook app that allows you to read, add and modify your recipes.

What-s-For-Dinner-iOS-App Cookbook app that allows you to read, add and modify your recipes. Features ?? ?? View You can see recipes divided into cate

Katie Saramutina 2 May 18, 2022