Commercial web product
Scanii Price Comparison Web Application
I built and iterated the Next.js web experience for a grocery price-comparison product, organizing scanned items, retailer offers, alternative products, and authenticated product workflows.
- Role
- Frontend Engineer — verified web scope
- Period
- Verified repository work · 2022–2023
Verified web scope
API records into a comparison workflow
Authenticated user state
Product and scan records
Web application state
Retailer offer aggregation
Context
Commercial product engagement
Role
Frontend Engineer — verified web scope
Product type
Commercial web product
Core capability
Next.js
Product context
Turning product and scan records into understandable comparisons
Users needed to understand which retailers carried an item, how offers differed, which alternatives were available, and which products were complete or still pending. The interface had to keep those API-backed states clear inside an authenticated workflow.
Attribution anchor
What I was responsible for
My verified scope is the Next.js web client and its API-backed workflows. Earlier portfolio material mentions a mobile application and backend services, but those parts are deliberately excluded until supporting source or client confirmation is available.
Selected scope
Selected contributions
- 01
Built authenticated product and alternative-product pages with responsive navigation and layout behavior.
- 02
Integrated product, image, item, and user API flows through persisted Redux state.
- 03
Aggregated and presented supermarket offers, counts, prices, and outbound retailer links.
- 04
Separated completed and pending items and implemented product-view and deletion behavior.
- 05
Iterated asset delivery, product details, navigation, footer, and interface fixes across the engagement.
Evidence, not reconstruction
System view
A simplified view of verified responsibilities and system relationships. It does not reproduce a private or historical interface.
Verified web scope
API records into a comparison workflow
A capability-level view of the web client without implying ownership of unverified mobile or backend systems.
Authenticated user state
Persisted product and user state across protected workflows.
Input
Product and scan records
Products, images, items, completion state, and alternatives.
Input
Web application state
Redux-backed API flows and coherent authenticated behavior.
System
Retailer offer aggregation
Counts, prices, and outbound offer links organized for comparison.
Process
Alternatives and item states
Alternative products plus completed and pending item handling.
Process
Responsive comparison views
Navigable, API-backed product pages across viewport sizes.
Output
Verified relationships
- Authenticated user stateWeb application state
- Product and scan recordsWeb application state
- Web application stateRetailer offer aggregation
- Web application stateAlternatives and item states
- Retailer offer aggregationResponsive comparison views
- Alternatives and item statesResponsive comparison views
Engineering judgment
Selected technical decisions
Decision 01
Used Redux Toolkit and persistence to keep authenticated product state coherent across comparison workflows.
Decision 02
Kept retailer aggregation and incomplete-item states explicit instead of flattening unlike records into one list.
Decision 03
Used Next.js image and responsive primitives around API- and cloud-served product media.
Technology context
- Next.js
- React
- Redux Toolkit
- Redux Persist
- Axios
- Formik
- Tailwind CSS
- Headless UI
- Next Image
Delivered capability
“An authenticated, responsive comparison web client that turned API product records into retailer offers, alternative products, and clear complete and pending workflows.”
Next.js products · API-backed interfaces · Data-heavy UX