← Back to selected work

02 / Product Catalog / Flutter technical assessment

A pocketful
of possibilities.

A Flutter catalog app with paginated browsing, debounced search, and clear loading, empty, and error states.

BUILT WITH FLUTTER / DART

01 / Explore the interface

Three screens.
One simple flow.

A little discovery goes a long way.

Explore products in a two-column catalog. Pages of 20 load as you scroll, keeping the next discovery close.

Screenshot walkthrough · not a live app

FLUTTER / ANDROID
01 / Browse the product catalog
01 / Browse the product catalog
Product Catalog showing a two-column grid of products with names and prices
Take it for a spin.

Android · v1.0.0 · 49.9 MB · Internet required · DummyJSON sample data

02 / Behind the build

The little things
behind the flow.

01 / SEARCH

Beyond the first page.

Search uses the API instead of filtering only loaded products. A 400 ms debounce limits requests, and a request version check keeps older responses from replacing current results.

02 / RESILIENCE

A hiccup isn’t the end.

Products load in pages of 20. If another page fails, existing products stay visible with a retry action. Loading, empty, error, and success states give each request a clear outcome.

03 / DETAILS

Keep the flow going.

Pull-to-refresh reloads the active search. Images include placeholders and error fallbacks, and product details have a swipeable gallery with page indicators.

04 / STRUCTURE

Give data its own space.

A product model handles JSON conversion and a service handles HTTP requests. The interface uses StatefulWidget and setState for the catalog, and FutureBuilder for details.

03 / Validation & scope

A small app.
An honest scope.

This technical assessment uses sample data and has no checkout or payment features. The repository includes one model unit test for numeric conversion and product title preservation; API requests and widgets do not have automated coverage.

The README records manual Android checks for browsing, search, retry, detail navigation, and refresh. It also documents AI assistance with guidance, review, and selected code edits.

Read the project documentation
Next project / Web developmentFrom pocket-sized
to browser-wide. →