Ionic Coding Challenges (Angular)

You will find a lot of content on this website and my YouTube channel for learning Ionic & Angular, as well as in my book and my advanced course.

There is a lot to learn, and I go to a great deal of effort to make sure that everything is explained thoroughly. I think following the guidance of a teacher is immensely useful in learning any new thing - it will help to keep you on the right path and make sure there aren’t large gaps in your knowledge.

The drawback of this guided approach is that it can become easy to rely on this guidance if you aren’t experimenting by yourself. I think this is something most people experience where they might feel like they are quite competent with a particular language or framework - after having completed many tutorials and read the documentation - until they sit down and try to build out something on their own. Often times you will find yourself stuck at the beginning of even seemingly simple tasks.

It is important throughout your learning to attempt to build your own solutions with little or no guidance. You will probably fail and get stuck initially, but this helps to highlight the areas you need to focus on - relying on tutorials too much will mean that you breeze past these problem areas, never realising that you might struggle with that particular concept.

Even if you have already mastered the basics, I think that this trend continues even to advanced levels. As you seek out tutorials or courses for implementing more advanced concepts and implementations, you may also find yourself reliant on these guides until you start trying to implement your own solutions.

On this page, you will find a variety of challenges of varying difficulties. These challenges have been designed for the purpose of allowing you to build out your own solutions without strict guidance. Of course, you can (and should) come up with your own ideas to try implementing, but for these challenges I have tried to categorise them based on appropriateness for skill level.

These challenges have no particular correct answer or implementation, but in some cases I have added additional restrictions or requirements to help adhere to best practices. You will also find additional resources that link to relevant content that may help you build out your solution.


BEGINNER CHALLENGES

The challenges in this section are best suited to developers who are at the beginning of their Ionic/Angular education. These challenges range in difficulty from the very basics of setting up a new project, to creating complete but simple applications. Completing all of the challenges in this section will require a competent knowledge of most of Ionic and Angular’s basic concepts (but don’t wait until you feel ready, tackle them as soon as you can).


CHALLENGE: Set up an Ionic Project

Set up an Ionic/Angular project using the Ionic CLI that contains the following pages:

  • Home
  • Detail

The project should also contain the following service:

  • GreetingService

Requirements:

  • The user must be able to navigate from the Home page to the Detail page
  • The user must be able to navigate from the Detail page to the Home page
  • If the application is refreshed whilst on the Detail page, the user should still be able to navigate back to the Home page
  • The Detail page should contain a button that, when clicked, will use console.log() to log the message Hello! to the console

Restrictions:

  • You must not manually create any folders or files. Everything must be created using Ionic CLI commands.

Resources:


CHALLENGE: Tip of the Day Application

Create an Ionic application that displays a random “tip” or small quote each day. This will be a simple one page application, so make it look as nice as possible - make sure to utilise Ionic’s UI components for the interface.

Requirements:

  • The “tip” should be supplied from a data source containing 5-10 tips
  • The tip should only change on a new day, not every time the application is opened
  • Customise the primary and secondary colours Ionic provides and make use of those in the application
  • Implement a background colour (not white)
  • Use custom CSS styles to make the font look nicer/more interesting

Optional:

  • Make the background colour random (picked from pre-determined array of colours) each time the application is opened

Restrictions:

  • The data for the tips must be provided by a local tips.json file and loaded into the application via an HTTP request
  • The tip must be provided to the page by a TipsService.

Resources:


CHALLENGE: Contact List Application

Create an Ionic application that mimics the functionality of a phones contact list. This one is quite a bit more challenging and will require a broad knowledge of the basic concepts of Ionic and Angular.

Requirements:

  • A contact should consist of a firstName, lastName, mobileNumber, and notes
  • A list of all contacts should be displayed in a list on the home page (firstName and lastName only)
  • Additional details for a specific contact should either be displayed on a new page or in a modal when selected
  • A user should be able to add new contacts to the application
  • A specific contact should be able to be deleted

Optional:

  • Also allow contacts to be edited, rather than just deleted
  • Display the contact list alphabetically
  • Use local storage to persist contacts after the application is reloaded
  • Create a custom interface to enforce the data structure of a contact

Resources:


INTERMEDIATE CHALLENGES

The challenges in this section assume that you are reasonably comfortable with the basics of Ionic and Angular. These challenges focus on branching out into slightly more complicated/complete applications that may also include intergration with native features and other 3rd party APIs.


CHALLENGE: Photo Application

Use Capacitor (or Cordova if you prefer) to integrate Native APIs with an application and create a native build for iOS and/or Android.

Requirements:

  • Allow the user to take a photo using the camera
  • Display all the photos that the user has taken inside of the application
  • Allow the user to share any photos they have taken on social media
  • Create a native build and deploy the application to an iOS or Android device (or use an emulator)

Resources:


CHALLENGE: Inventory Viewer

Using AirTable as a CMS (Content Management System) for your data, create an application that allows you to display product inventory.

Requirements:

  • Create an imaginary set of products that include an id, name, price, and quantity in a spreadsheet in AirTable
  • Create a service in your Ionic application that connects to the AirTable API to pull that data in
  • Allow the user to browse all of the products and see all of the product details
  • Add filtering and sorting options for all of the product attributes
  • Add a mechanism to “refresh” the data in the Ionic application in case it has changed in the backend

Optional:

  • Allow the inventory data to be directly managed through the application, rather than needing to log in to AirTable

Resources:


CHALLENGE: Shopping Cart

Build an eCommerce application in Ionic and Angular that allows the user to browse through products, add them to a cart, and proceed through a mock checkout process.

Requirements:

  • Create a data set in JSON, or use an existing data set of your choosing, that includes at least the following details about products: name, description, price, category, image (you can use a placeholder image if no image data is available)
  • The user must be able to browse through all of the available products
  • The user must be able to filter the products by category (you may choose to provide a separate Category page, filter in place, or some other method of filtering)
  • The user must be able to add products to a shopping cart that is viewable on another page
  • From the shopping cart page, the user must be able to remove unwanted items
  • Implement a Checkout page that displays all of the items in the user’s shopping cart, as well as the total cost

Optional:

  • Allow the user to modify the quantity of items in their shopping cart
  • Allow the user to filter by price (low to high, and high to low)
  • Persist the user’s shopping cart and any filters across application reloads
  • Integrate the Stripe API (or a Payment API of your choosing) and use “test mode” to simulate an actual working eCommerce application

Resources:


ADVANCED CHALLENGES

The challenges in this section require a high level of knowledge of Ionic and Angular, and even of more broad web concepts and external technologies. Little guidance will be given for these challenges, and the degree of freedom is larger than with the previous challenges.


CHALLENGE: Swipe Right

Create Tinder style cards that can perform specific actions when swiped away to the left or right. Make sure it performs well by avoiding common performance pitfalls.

Requirements:

  • Create an Angular component (or a directive) that mimics the behaviour of Tinder’s swipe cards
  • The component (or element the directive is applied to) should be able to be swiped left to perform one action, swiped right to perform a different action
  • The swiping action should be animated

Restrictions:

  • Implement the behaviour without using any additional libraries/packages
  • Any writes to the DOM, or reads from the DOM, must be done using the DomController from @ionic/angular

Resources:


CHALLENGE: Create Account & Login

Implement a backend for an Ionic application that allows users to create accounts, and only allow those who have logged in with a valid account access to the main part of the application.

  • Only the login screen and create account screen should be accessible without being logged in
  • If a user attempts to access a route they are not permitted to view, they should be redirected to the login screen
  • All input fields should validate data the user inputs, and display helpful error messages for incorrect inputs
  • Once logged in, the logged in view should display the current user’s information (or the information should be accessible)
  • After the initial log in, the user should not have to enter their credentials again (at least for a period of time) in order to access the application
  • If logged in, the user should be able to change their name and bio information
  • You may use whatever kind of backend and authentication methods you like. If you are unsure, check out the resources below.

Restrictions:

  • The user’s password must not be stored anywhere in order to facilitate automatic logging in (this is almost always a bad security practice). This functionality can be achieved using a token instead.

Optional:

  • If you have created one of the previous example applications, you may use it as the “logged in view” for this challenge if you like

Resources: