One moment…
Building the next page.
One moment…
Building the next page.
Frontend Engineering Assessment
A complete responsive E-Commerce application built from scratch in 30 hours as part of a frontend engineering assessment, focused on scalable architecture, performance and maintainable code.
SearchFilterBuildShip!
Idea to ImpactOne Sprint at a Time
This project was built from scratch over 30 hours alongside my regular work as part of a frontend engineering assessment.
The goal was to create a modern, scalable and responsive shopping experience while focusing not only on the visual interface, but also on clean architecture, performance, reusable components and maintainable code.
The project gave me an opportunity to work through the kind of decisions that come up when building a real-world frontend application under a limited deadline.
The objective was to build a complete E-Commerce experience where users could:
The focus was not simply to make the application work, but to build it in a way that could scale as the application grows.
The application includes dedicated experiences for both Product Listing and Product Details.
The Product Listing page provides product discovery through search, filtering and pagination.
Users can narrow down products using:
Each product can then be opened to view its dedicated detail page.
Product discovery was one of the core parts of the application.
The search experience supports real-time product filtering, while additional filters allow users to narrow the product catalogue based on category, brand and price range.
This required keeping the filtering experience responsive while coordinating it with API requests and application state.
The application uses React Query for handling server state.
React Query is responsible for:
Using React Query helped separate server-state concerns from UI state and provided a cleaner approach to handling asynchronous product data.
The application follows a feature-based architecture.
Instead of organizing the entire application only around file types, functionality is grouped around individual features.
This makes the codebase easier to understand and allows individual features to evolve independently.
The architecture was designed with scalability in mind so that additional E-Commerce functionality can be introduced without turning the codebase into a tightly coupled structure.
The application uses reusable UI components and custom hooks to keep the code organized.
Common UI patterns are extracted into reusable components instead of being duplicated across pages.
Custom hooks are also used to isolate reusable application logic and keep components focused primarily on rendering and user interaction.
The application was designed for both desktop and mobile experiences.
Layouts, product grids, filters, navigation and content sections adapt to different screen sizes so the shopping experience remains usable across devices.
Responsive design was treated as part of the application architecture rather than something added at the end.
Real-world applications need to handle more than successful API responses.
The project includes dedicated states for:
These states help provide clear feedback to users while asynchronous operations are taking place.
The project is built with:
React and TypeScript power the application, React Query manages server state and caching, Ant Design provides UI primitives, Tailwind CSS handles styling and responsive layouts, and DummyJSON provides the product data and search API.
One of the most valuable parts of this project was building it within a 30-hour constraint while continuing my regular work.
A limited timeline forces you to think differently.
Instead of trying to build everything, I had to prioritize the functionality that mattered most, make architectural decisions early, and balance implementation quality with delivery speed.
That meant thinking about:
Building a real-world project under a deadline continues to remind me that projects teach things tutorials cannot fully simulate.
You learn how to prioritize features, make architectural decisions, manage trade-offs and deliver a polished product within a limited timeframe.
From designing the folder structure and reusable components to managing API state and solving responsive UI challenges, this project was a valuable exercise in frontend engineering.