Snappfood
I worked as Frontend developer at Snappfood. I developed pixel perfect features on mobile app and website and improved performance in many ways. My main scope of work was homepage and search page of Snappfood.
Visit website
Origin Story
Snappfood is the leading online food ordering company in Iran. Customers can find menus, order and be delivered from more than 1,500 restaurants all over Iran through the Snappfood website and mobile application. Since its creation in 2009, Snappfood has continuously transformed the way people order food.
Snappfood Design System
To streamline design process across designers, engineers and product designers for such a large project, we used Figma as our design and prototyping tool. All designs got handed off to developers in Figma and we took care of that from there.
Component Library
We developed our custom component library with Storybook to be used in the website and mobile app. Components library is styled with styled-components and developed in Typescript to increase library's readability and maintainability. We rely on Typescript's types and interfaces for components typing and props documentation.
Testing
Used Cypress to test our workflow and features thoroughly. Also used Jest and React Testing Library for unit testing our components in isolation.
Performance Improvements
A major part of our efforts was improving performance in every way possible; we got our measures like page load time, LCP, FCP, API load time, etc. from Google Analytics and our internal analytics tools. We also continually analysed our bundle size and core Web Vitals through Chrome in every release. Overall I improved performance by dynamic imports (React Suspense), lazy loading components (IntersectionObserver), virtualizing lists, memoizing data, lazy loading images, and requests caching (with cache invalidation timeouts).
Developing Pixel Perfect UI
Developing new features that would help customer retention and conversion rates and implementing existing features redesign was part of my daily routine at Snappfood.
Being a good teammate
I really felt people working at Snappfood, were the ones who planned the product's future and decided it's priorities. We held quarterly OKR sessions to decide on objectives.
OKR sessions
We held quarterly OKR sessions that we would discuss Key Results and brainstorm what our squad could propose in terms of features/value proposition as Objectives.
Product & UX Design
From there product owners, UX researchers and UI designers would work on proposed objectives and come up with features and designs
Development
After grooming and planning sessions, we would start developing features handed off to us as Figma designs in 2 week long sprints.
Project outcomes
We've been able to improve performance in terms of code and business by measuring key metrics and working from there. In code metrics like LCP, TTFB, TBT, etc. and in business metrics like bounce rate, retention rate, conversion rate, etc. We've also increased code quality and maintainability by migrating to Typescript, using our own component library and imposing unified code style in all Frontend squads and making tests mandatory for every code that we write!