Web App for Australian Pet Food Giant
Improving pet food delivery services by enhancing the web app
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.
About the project
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.
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
- Login UI and integration
- 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.
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
- 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.
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.
The Right Conversation Can Save You Six Months
Contact us
More from our engineering work
HEALTHCARE COMMUNITY PLATFORM
We built an innovative healthcare platform that addresses issues like information overload, lack of engagement, and the need for user empowerment. The solution organizes health information in an easily accessible format while fostering collaboration through interactive features such as forums, community groups, and personalized engagement tools.
Real-Time Monitoring Solution for Secure Storage Management | Case Study
The client aimed to develop a user-friendly app that allows facility managers and users to easily monitor the status of their storage units, ensuring safety and security. Key features such as motion detection alerts, scheduled image captures, and environmental monitoring were incorporated to provide a seamless experience for users managing their facilities.
