Organize a technical catalog while keeping discovery clear. This personal project explores an automotive interface where search, categories and product information take the lead.
02 / SELECTED WORK
AutoPro
Performance,
piece by piece.
Personal development project published in the Car-parts repository. Editorial cover created for this presentation; source available on GitHub.
THE CONTEXT
An automotive parts catalog with search, categories, sorting and product detail pages, built with Next.js and a Supabase integration.
The catalog queries products and categories through Supabase, applies search and sorting, and offers grid or list views. Each product detail page loads its item from a route slug.
AN IDEA, A CHARACTERAutoPro
Structured data.
Clear discovery.
Clear discovery.
FROM THE PROJECT TO THE CODEAn idea takes shape.
Explore the GitHub repository An idea takes shape.
Code brings it to life.
- Next.js
- TypeScript
- Tailwind CSS
- Supabase
01
Find the right part
Search, categories, sorting and grid / list views.
app/products/page.tsxView source file 02 Go into detail
Loading by slug and product state handling.
app/products/[slug]/page.tsxView source file 03 Set the tone
Dark automotive direction and Framer Motion animation.
components/hero-section.tsxView source file mouadbusni / Car-parts · Personal build
Every choice
has a reason.
- 01
Combine text search, category and sorting in catalog queries.
- 02
Offer a grid for discovery and a list for browsing references.
- 03
Handle loading states, empty results and missing products.
EXPLORE THE DETAILSINTERACTIVE PREVIEW
The project at a glance.
KEEP EXPLORING
MoD — Field Notes
Personal project · Portfolio
What if we wrote your story?
Let’s talk about your project↗