A bilingual (Persian / English) e-commerce storefront mockup built with Next.js 16 App Router. Designed as a portfolio piece — frontend only, no backend or real payments.
Live demo: deploy to your subdomain (see Deploy)
Author: DevAmir
Story rail, hero carousel, special offers, promo banners, category grids, product sections, brands, and blog row.
Same retail layout in English with dark theme — header, deals strip, product grids, and portfolio CTA.
Two-row header, search bar (Ctrl+K), category sub-nav, story rail, and hero slider.
Special offers carousel with countdown, promo tile grid, and category quick links.
Blog landing with category cards and latest articles.
- Digikala-inspired home — story rail, hero carousel, amazing deals strip, promo banners, dense product grids
- Bilingual UI —
/fa(RTL) and/en(LTR) with dictionary-based i18n - Full store flow — home, shop (PLP/PDP), blog, cart, mock checkout
- 24 mock products, categories, blog posts, and reviews (JSON data layer)
- Red theme with dark/light mode (
next-themes) - Search — Ctrl+K dialog across products and blog
- Accessible — skip link, focus styles, reduced-motion support
- Portfolio CTAs — links to devamir.com and social profiles
| Layer | Tools |
|---|---|
| Framework | Next.js 16, React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 |
| Theme | next-themes |
| Fonts | Geist + IRANSans (Persian) |
| Data | Static JSON + typed getters |
app/[locale]/(store)/ Store pages (home, shop, blog, cart, checkout…)
components/ UI, layout, cart, shop, search, portfolio
docs/screenshots/ README preview images
lib/data/ Types, getters, localization helpers
lib/i18n/ Locale config + dictionaries
lib/cart/ Cart state (localStorage)
lib/shop/ Route resolution for catch-all shop URLs
lib/site/author.ts Author contact & social links (single source)
data/ products, categories, blog-posts, reviews
messages/ fa.json, en.json
middleware.ts Locale redirect
public/fonts/ IRANSans webfont
npm install
npm run devOpen http://localhost:3000 — middleware redirects to /fa or /en.
npm run dev # Development server
npm run build # Production build
npm run start # Production server
npm run lint # ESLint- Category / subcategory / product catch-all routing
- Filters (category, price, in-stock), sort, product gallery, variants
- Related products, reviews tab, breadcrumb navigation
- Client cart with
localStoragepersistence - Quantity updates, remove items, order summary
- Mock checkout form (no real submission)
- Category pages and post detail
- Featured posts on home
- Locale in URL:
/fa/...,/en/... dir="rtl"/dir="ltr"on<html>- All UI strings from
messages/*.json
- Two-row header with search bar and category sub-nav
- Story rail, hero slider, quick-access icons
- Special offers carousel with countdown timer
- Promo banner grids (4-col, wide, 2-col)
- Circular category icons, brand strip
- Dense 6-column product grids + horizontal carousels
- Horizontal blog row, compact portfolio CTA
| Website | devamir.com |
| devamir99@gmail.com | |
| Phone | 0920 500 7494 |
| linkedin.com/in/devamir | |
| GitHub | github.com/devamirr |
| Telegram | t.me/devamir99 |
Author links are centralized in lib/site/author.ts.
- Push the repo to GitHub
- Import project in Vercel
- Framework preset: Next.js (auto-detected)
- No environment variables required — static mock data only
- Optional: set custom domain / subdomain (e.g.
nova.devamir.com)
Build command: npm run build
Output: Next.js default
npm run build
npm run start- This is a mockup — forms, checkout, and cart do not connect to any API
- Product images use placeholders / external URLs from mock data
- Persian font:
IRANSansWeb_UltraLight.woff2inpublic/fonts/
Open source — available for learning and portfolio reference.
Built by DevAmir