Table of Contents

Introduction

The GrangeMobile App is a university based application designed and developed to help university students with keeping track of their college related data. It allows them to not only view several kinds of important data relevant to their course, but also provides tools to help them with their studies.

The app is built using the latest versions of Angular 15 as the main front-end framework and Ionic v7 as the UI library for UI components. The development process took an approximate of 3 weeks to complete. The app demonstrates intermediate use of Angular, Ionic, Firebase, MySQL, PHP, Supabase, PostgresSQL, NPM, NodeJS, JS Libraries, CRUD operations and Capacitor.

In this report, I have detailed out the step by step process of building each feature. The code documentation present here is not just for assignment purposes, but is also meant to serve as a reference document for further coding projects with Angular and Ionic.

<aside> 💡 Declaration: While I have mentioned most of the references in the respective chapters, overall I am declaring that I have used two AI tools, GitHub Co-pilot extensions for code autocompletion and suggestions within VS code editor and Chat Open AI for necessary debugging issues with errors from time to time. But I have not used Chat Open AI to generate any kind of base code. Plus it hasn’t proven to be too helpful since I’ve used Angular 15 and Ionic v7 which are latest and Open AI has only trained Chat GPT 3 with data until September 2021. Ultimately, I have realised that authentic code documentation is the best resource for latest programming syntax.

</aside>

Design

The design of GrangeMobile is such that the primary features are presented first as bottom nav tabs to the user, in our case, the student. Since the app focuses on the student, the UI is kept clean, minimal and intuitive. We’re using standard Ionic components without much style changes. The UI demonstrates a clear hierarchy of information based on varying text sizes and layout. There is also a clear distinction between different interactive elements on the screens. Also, since I’ve used Ionic, the app looks equally consistent on both iOS and Android. We’ll have a look at the detailed design of each screen in the implementation section.

User Scenario: An undergraduate student, Karan, is studying in Tu Dublin and is totally new to the college education paradigm. He needs an app that will help him make the most out of his university education throughout the 4 years in college. He is looking for a way where he can access all the information about his classes, modules, lecturers, and can also prepare better for his classes with the multiple kinds of features all in one place.

Following are the use cases breakdown I have considered for this application that is targeted towards the student as primary user:

1. Student goes to the lecturers page ⇒ views a toggle list with lecturer names ⇒ clicks on one lecturer to expand and view details.
2. Student goes to the My Modules page ⇒ scrolls through a card list of modules ⇒ clicks on one module ⇒ lands on module details page ⇒ views module details.
3. Student goes to Modules Page ⇒ filters through modules ⇒ filters by location of campus ⇒ views campus specific modules.
4. Student goes to My Classroom Page ⇒ views classmates ⇒ can add new classmate, update existing classmate, and delete classmate from list.
5. Student goes to My Modules Page ⇒ views individual module details ⇒ views individual module on a map modal.
6. Student goes to My Modules Pages ⇒ views all module locations on a single map modal.