An online real-time collaboration template document editor.

I was responsible for refactoring the existing architecture and front-end codebase to support the real-time collaboration functionality with AWS AppSync.

The Information Hub is a data collection, repository, sharing, and analysis web platform with a lot of versatility and ability for integration.

In a very simplified and broad overview, the application is unlike its precessor which focuses on a specific field, the Information Hub is field-independent, allowing users to create projects with user-defined tables, customizable forms for input to tables, customizable dashboards to format table data, wiki for notes, manager to manage workflow, project scoped storage that is integrated with Google Cloud Storage, and Apps for simplified access and view. Meanwhile, all of the mentioned base features are able to be organised into organisations or groups, with fine-tuned, custom permissions and roles for access control.

I started on the Information Hub project in its infancy from conceptualisation, architectural design, UI/UX design, implementation and development, to the late phases of production maintenance and support.

During my time on this project, I worked with a team of 9 members at its height and collaborated together. Over time with the team needing to scale down, I was placed and took upon the responsibility of the front end of the application. I worked on the UI/UX, lightweight app feature, offline functionality, and many other smaller and advanced features and improvements, including many bug fixes, major performance optimisations, full-stack features, refactoring, and multiple small-scale features and solutions that have an impact on user experience and usability of the application in a way that it facilitates users to achieve their goals.

This project is a serverless PWA Angular project using Ionic. It is hosted using Firebase and GCP.
Some of the tech stack cores of the project are: Angular, Ionic, GCP, Firebase, Docker, NestJs, Postgres, Nx, Graphql, gRPC, NGXS, Prisma, Google Vision, and Capacitor.

This project is still ongoing and its use is growing at an exponential rate.

The Diagnostic Clinic is a web application that streamlines the work done by researchers in the plant, farming and forestry sectors. In a broad overview, the application allows farmers and users to submit plant samples that are potentially infected by diseases and pests to researchers, which they are able to do an analysis on the sample to gather research data and also be informed if there is a potential threat to the location of where the sample came from. The project is built as a serverless Angular project with Angular material. The project is hosted and makes use of Firebase and GCP.

Within this project, I was tasked with full-stack feature development, bug fixes, optimisation, UI/UX design, and creating mail templates with Handlebars to be used with Mailgun.

With the usefulness of such a system and the need for it to scale beyond just the farming and forestry sector, and cater to multiple fields and their needs, the Information Hub project was initiated.

The Diagnostic Clinic is no longer live as it is replaced by the Information Hub.

Campus is a campus management application that provides health checks, and access control to the university campuses and venues during the height of the Covid-19 pandemic. This application is a serverless PWA Angular project using Angular material, hosted on Firebase and integrated with the Google Cloud Platform. I was tasked with basic full-stack feature development, bug fixing, refactoring, optimisations, and UI/UX design. I was also tasked with creating Looker Studio dashboards using data from BigQuery to facilitate researchable data to researchers.

Campus is no longer maintained.

During my time, I worked on a large-scale project from its infancy, from its conceptualisation, architectural design, UI/UX design, and implementations, all the way to the project's production deployment, maintenance, and support. I worked with and collaborated with a large team on a project, and experience team downscaling, so our team had to balance responsibilities while working under tight deadlines.

Some of the key responsibilities I held were:

• UI/UX design and mockup using Figma to guide the project's visual path.
• UI/UX wireframing using Figma to showcase the design to clients and stakeholders.
• Collaborating and delegating large and complex tasks and features with multiple team members in person and online.
• Took responsibility for the frontend system of a project when the team is downscaled.
• Full-stack feature developments according to users' needs and clients' requirements.
• Managing microservices in an Nx mono repo environment.
• In-person and online user support meetings to assist users with custom integrations to the system.
• Refactoring and improving component code bases to allow for new features and scalability.
• Significant performance optimisation improvement on large dataset rendering.
• Implementing a much-needed offline functionality for an application that was not designed for offline use in a timely matter as it was needed to solve an immediate use case.
• Debugging, bug fixes and application stability improvements.
• Refactoring code to utilise RXJS efficiently to streamline data streaming in a data-heavy application.
• Integrating application with Google Cloud Function that communicated with Google Vision for image labelling and categorising.
• Designed and implemented custom Apollo Link nodes on an Apollo Graphql chain to provide extra functionalities to queries.
• Designed and implemented a full-stack feature of a customizable, simplified version of an application that had multiple target audiences where one of them required a much-simplified application.

Some of the main technologies I used were: HTML, CSS, Typescript, Angular, Ionic, NGXS, RXJS, NX, NestJs, Jest, Apollo, Graphql, Prisma, PostgreSQL, Capacitor, Firebase, GCP, Protoc, gRPC, and Dexie.

I worked on two projects with the same team during this role with some of the key technologies being Angular, Angular Material, Firebase, GCP, NestJs, NGXS, BigQuery, Docker, Nx, and RXJS.

Of the two projects, one project is an existing project and the other is a project where I was there from its start, till the end.

Some key responsibilities I held were:

• UI/UX design mockup using Sketch, Adobe XD, and Figma.
• Improving existing UI.
• Creating Looker Studio dashboards pulling data from BigQuery to facilitate researchers' research.
• Debugging and bug fixes on an existing code base.
• Collaborating and delegating work amongst team members on complex and large tasks.
• Refactoring code to enable it to adapt to new features.
• Implementing Firestore rules.
• Design and develop small features according to users' needs.
• Complete tasks under tight deadlines due to a time-sensitive project that was required for work operations during the height of the Covid-19 pandemic.

I worked as a part-time contract software engineer for the last 2 months of my university degree.

I was tasked with the following:

• Designed and created Handlebar templates for Mailgun to deliver dynamic mail content to users.
• Design and implementation of UI/UX components.
• Debugging and bug fixes.

I worked as a part-time frontend engineer for a startup company in creating a smart online tutor-student matching web platform.

The roles I undertook were:

• Client engagement to communicate progress, and solutions to the client's use cases.
• Architect front-end tech stack and implementation.
• Designed and mocked up the web platform according to the client's specifications and requirements using Adobe XD.
• Developed and implemented the front end according to designs utilising HTML, CSS, JS, Bootstrap, and PHP.
• Implemented the front-end section of the payment gateway using a 3rd party payment gateway.
• Collaborated and coordinated with back-end developer to integrate front-end and back-end.

I worked as a freelancer for a Law consultation firm. I was tasked with designing and creating a website for their firm.

The following is the task I was responsible for:

• Designed and mocked up a simple 2-page website according to client requirements using Figma.
• Developed and implemented the design into a live website with basic HTML, CSS, and JS.
• Collaborated with the backend developer to link up the frontend and backend of the website.