Web App for Australian Pet Food Giant

Project Type

Web Application

Industry

Healthcare App Development Services

Tech Stack

Nuxt.js

ABOUT THE CLIENT

The client who is based out of Australia has an offering in the form of a web app that is touted to be the healthiest food subscription service that makes fresh food for users’ dogs on demand. They provide customized meals which makes it a seamless experience for users to design their pets’ diets and find the right nutrition for them through wholesome freshly cooked food. They came across the idea when they saw the hassles pet parents had to go through as a result of the onset of the pandemic and realized what the market needs was a platform that could help pet parents to get these essentials with a tap on their phones.

The Problem

The client had already worked with us on a couple of renowned projects before and on seeing the expertise that the GeekyAnts’ team displayed, they reached out to us for the revamping of the existing web application. The client’s primary concern was that he wanted us to re-build the existing app using NuxtJS to make it more responsive across all platforms as well as implement the required screens.

After careful consideration, we decided that the best way to go forward was to engage with the partner using the fixed scope model before moving on to the time and material model which allowed for the flexibility that was necessary to implement the required features. The entire project was split into two phases with the first phase having six milestones and the second having one.

Requirements

We were given the task of implementing certain screens that were required.

Revamp the existing web application using NuxtJS to improve its performance.

Make the app responsive across all platforms, both iOS and Android, as well as devices.

OUR APPROACH

Strategy Analysis Planning UI/UX Development Testing Delivery

Strategy

In this project, we joined hands with one of the biggest providers of on-demand services for pet food based out of Australia in an attempt to revamp their app and streamline its experience.

Analysis Planning

Considering the client wanted to improve the responsiveness of the application, we decided to use NuxtJS along with Bootstrap and CSS as the desired technologies to work with.

UI/UX

Considering the main task was to revamp the existing app and implement certain screens, there wasn’t much to do on the UI/UX front because of which out designers lay easy on this project.

Development

During the development phase, our team worked on revamping the web app while also implementing certain required screens like Home Page, How it works, Recipes, Ingredients, Our Story etc.

Testing

Testing was essential to ensure that the app was up to the mark because of which we roped in one QA analyst who conducted manual testing for the project.

Delivery

The work on the application is currently in progress and the client is extremely happy with the progress that has been made and how the app is turning out to be.

DEVELOPMENT

After setting together the team that could take the project forward and with the team set in place, the next task on hand was to decide on the tech stack and finalize them in order to carry on to the development phase.

NuxtJS was the tech stack of choice used for the application's Frontend because it improved performance, SEO, and accessibility. It is a framework built on top of Vue JS and it uses server-side rendering to resolve all the issues related to SEO. To complement this decision, Bootstrap 5 was chosen as the Frontend library to make the web application responsive and user-friendly on browsers like Google Chrome, Safari, Firefox and on all Android and iOS devices that use this web browser. NuxtJS also has a sound layout system for re-usability because of which the coding time for the developers is reduced as the layout system is created in one go. We used Storybook to build UI components and pages along with CSS to improve the structure of the pages. We also used docker containers for AWS and ECS while finalising the deployment platforms to be AWS, ECR and ECS fargate.

We have revamped the existing web application using NuxtJS, Bootstrap and CSS, having rebuilt almost 20 -25 pages as of now. The first phase of the project was split into six milestones based on the fixed scope model and here were the features that were implemented in the process:

Milestone: 1

Project Setup

CI/CD Setup

Design System for reusable components

Reusable components development

FAQ page UI

Milestone: 2

FAQ screen for Mobile

FAQ screen for Desktop

Join Email API Testing

Responsiveness and browser compatibility for FAQ screen and edit cases for different target devices

Testimonials Page Integration

Milestone : 3

Health Benefits UI and integration

Food Recipes UI and integration

Milestone: 4

Ingredients Page UI and Integration

Our Fresh Dog Food Philosophy UI

API Integration for Philosophy Page

How it works Screen UI

Milestone: 5

How it Works Screen API integration

Our Story Page UI and integration

Treats Marketing Page UI and integration

Ambassador Program Screen UI and integration

Milestone: 6

Forgot Password UI

Deployment + staging testing

Due to the frequent challenges in phase 1, we decided to change the engagement model from fixed scope to the time and material which allowed for more flexibility. During the second phase of the project, we implemented certain screens from scratch. Here are the screens that were created in the same order:

Review Page

Treats Page

Poo report

Carriers page

Build a box functionality

In order to make the product more robust and stable, the testing engineer in this project performed manual testing for all the Jira tickets under the Ready for QA swim lane on the Jira board. As soon as any developer completed a task, that respective ticket was moved to the READY FOR QA lane. The testing engineer performed manual testing in case of any defects and the comment was added to the same ticket before being moved to the review lane. We also used VS Code, Eslint, Prettier for editing and linting the cod to ensure that it was up to the mark.

OVERCOMING CHALLENGES

As with any project of this scale, challenges were inevitable but constant research and the team’s proactiveness helped us to get past this. The main intention of the app is to improvise its performance and improve its SEO and the team had to figure out a few techniques to achieve these parameters. We used Cloudinary which is platform that can store the images of the app in the cloud which we can use to optimise it according to our needs. It provides the CDN service that helps to improvise the image performance and it auto-detects the best image format for the browser. Since the rendering time is very less here because of better compression, this eventually played a part in improvising the performance of the application. The second challenge was to avoid nesting in order to improve the SEO score because of which our team has ensured that nesting is minimal in the HTML templates by using all the necessary attributes required by the Google crawler so that it can index all the necessary information.

FINAL IMPRESSION

The web app is currently live and the client is ecstatic looking at the progress that has been made. While the project is currently in progress, they think that the app has come a long way since the beginning of the engagement. New features and functionalities are constantly being experimented with and implemented to ensure that the experience that the app offers to its customers is nothing short of perfect.

Case Studies.