Content Explorer is a responsive web application for browsing, searching, and filtering a collection of products. The focus of this project is not just feature delivery, but demonstrating strong frontend architecture, performance awareness, and thoughtful trade-offs.
git clone <your-repo-url>
cd <your-project-folder>
npm install
npm run devApp runs at: http://localhost:3000
- Next.js (App Router)
- TypeScript (strict mode)
- React
- Tailwind CSS
- TanStack Query
The codebase follows a feature-based structure to ensure scalability and separation of concerns.
app/→ Routing, layouts, and server componentsfeatures/products/→ Product domain logic and UIcomponents/→ Reusable UI primitiveslib/→ API and helper utilitiestypes/→ Shared TypeScript types
- Server-first data fetching for performance and SEO
- Presentational components with no embedded business logic
- Clear separation between data, UI, and domain logic
Products are fetched on the server using the App Router. This ensures:
- Faster initial page load
- SEO-friendly rendering
- Reduced client-side complexity
- Dynamic route:
/product/[id] - Server-side fetching per request
- Dynamic metadata generation (title, Open Graph)
- Breadcrumb navigation
- URL-driven state (
search,category,price,rating) - Debounced search input (300ms)
- Filters are shareable and persist across reloads
- Controlled via URL (
page) - Prevents over-fetching large datasets
- Keeps navigation predictable and testable
- Skeleton loaders for loading states
- Graceful error handling via
error.tsx - Empty state when no results are found
Data fetching is handled on the server to optimize for:
- Performance (reduced client work)
- SEO (fully rendered HTML)
- Simpler state management
TanStack Query is used only for client-side synchronization, not as the primary data source.
All filters and pagination state are stored in the URL.
This enables:
- Shareable application state
- Predictable behavior
- Elimination of unnecessary global state
Pagination was chosen for its simplicity and predictability.
- Easier to test
- More controlled data usage
- Better suited for structured browsing
Special attention was given to Largest Contentful Paint (LCP), especially on mobile:
- Only the first visible product image is marked as high priority
- Responsive
sizesattribute ensures correct image selection per viewport filllayout with fixed container height prevents layout shifts
This avoids common pitfalls such as over-prioritizing images or downloading oversized assets.
Initial layout caused the primary content to be pushed below the fold on mobile.
Fixes included:
- Reducing excessive vertical spacing on mobile (
py-10 → py-4) - Slimming down sticky header height
- Ensuring the first product is visible immediately
These changes significantly improved perceived load performance.
- Implemented
next/fontwith Geist - Removed unused font imports
- Properly mapped font variables into Tailwind
- Used
display: swapto avoid render blocking
- Server-side rendering (SSR)
- Cached fetch requests (
revalidate: 60) - Minimal client-side state
- Debounced input to reduce unnecessary network calls
-
Some filters (price, rating) are applied client-side
- Simpler implementation
- Not ideal for extremely large datasets
-
TanStack Query is used conservatively
- Avoids unnecessary abstraction for a relatively simple use case
- Jest + React Testing Library
Covered:
- Pagination behavior
- Filtering helper logic
Deployed on: (add your link here)
Vercel was chosen for seamless integration with Next.js and fast deployment.
- Move all filtering to the backend/API layer
- Introduce smarter caching strategies per page
- Improve accessibility (ARIA roles, keyboard navigation)
- Explore Suspense streaming for partial rendering
This project prioritizes:
- Clear architectural decisions
- Performance-aware implementation
- Maintainable and scalable code
The goal was not just to meet requirements, but to demonstrate how a production-ready frontend system is structured and optimized.