PokeApp is a sample app that I designed and developed from scratch as part of my iOS Development learning. It uses a Pokedex API to fetch details of the first 150 Pokemons and allows each user to create teams with them. It uses 100% programmatic UI with UIKit (without Storyboard), Coordinator Pattern for the app’s navigation, and repository pattern for the domain layer.

Source Code Link: https://github.com/joelkingsley/pokeapp

Like the rest of the app, the app’s login and sign-up page is also built using programmatic UI with UIKit.

Firebase is the authentication provider for the app. At the moment the app only supports the email-password method for authentication.

The screens both have form validation, and the gradient in the background is programmatically drawn using CAGradientLayer.

After login, the home screen lists all the 150 Pokemons with some basic information on each of the cards. Each card is uniquely colored based on the primary color that is present in the Pokemon’s image. To achieve this I’ve used the dependencies https://cocoapods.org/pods/UIImageColors and https://cocoapods.org/pods/Hue.

When the user clicks on a card on the home screen, the user is taken to the detail screen where the user sees the Pokemon Card with all the details. This screen has a more sophisticated UI with the background and borders all dynamically generated in run time by just using the colors found in the Pokemon’s image.

Finally, coming to the feature that allows users to play, the user can create teams with a maximum of 12 Pokemons in each team.

Whenever the user opens the app, we assign 20 Giga Impacts to 20 random Pokemons among the 150. So when a user creates a team with 1 or more Pokemons with Giga Impacts, then the user gets 20 XP for each Giga Impact Pokemon in their team.

Once a team is added, it is added to the list in the My Teams tab.

The user can also add new Pokemons to an existing pokemon as well.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.