Prototype
Fadi Phone
E-commerce prototype for a phone store in Kélibia: smartphones, accessories, repairs and trade-in.
- Role
- Design & front-end
- Team
- Client project
- Tech stack
- 7 technologies
What it is
Fadi Phone is an e-commerce prototype built with Next.js, TypeScript and Tailwind CSS by Majd Ben Slimene for a client, a phone store in Kélibia selling smartphones, accessories and repairs, with iPhone trade-in. It uses the App Router, with SEO for e-commerce: meta tags, Open Graph, sitemap, structured data and a product feed.
Problem solved
Give a local phone store an online shop where customers can browse the catalogue, compare phones, estimate a trade-in and track an order or a repair.
My role
Design and front-end: the shop and the administrator dashboard, a UX/UI upgrade, then the migration from React / Vite to Next.js (App Router).
Key features
Catalogue with categories, advanced search and filters
Cart, favourites and product comparison
Trade-in calculator
Repair tracking and order tracking
Promotions, promo codes and price alerts
Administrator dashboard with analytics
Challenges
Hydration after the Next.js migration
After the Next.js migration, client-side data broke during hydration.
Solution
A full browser QA pass and an audit of the LocalStorage keys found three bugs (product reviews, recently viewed products, customer session), which I fixed.
What I learned
- Migrating a React / Vite app to the Next.js App Router
- SEO for e-commerce: meta tags, Open Graph, sitemap, structured data, product feed
- Presenting a prototype to a real client
Screenshots
1 / 6
