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/devamir99 |
| @devamirr | |
| Telegram | t.me/devamir99 |
Author links are centralized in lib/site/author.ts.
This project is configured for static export and deploys via GitHub Actions.
Live URL (after setup):
https://devamir99.github.io/Next.js-Learning-Project/
- Push all changes to
main - Open repo Settings → Pages
- Under Build and deployment, set Source to GitHub Actions
- Go to Actions tab and wait for Deploy to GitHub Pages to finish (green check)
- Refresh Settings → Pages — your site URL will appear
- In Settings → Pages, enter your domain (e.g.
nova.devamir.com) - Add DNS record at your registrar:
- CNAME
nova→devamir99.github.io
- CNAME
- Edit
.github/workflows/deploy-pages.yml— remove or empty these env vars:(and setNEXT_PUBLIC_BASE_PATH: /Next.js-Learning-Project
NEXT_PUBLIC_SITE_URLto your domain) - Add
public/CNAMEwith your domain name (one line, nohttps://) - Push and redeploy
- Import project in Vercel
- Framework preset: Next.js
- Remove
output: "export"fromnext.config.tsif you want SSR features - Optional custom domain (e.g.
nova.devamir.com)
npm run build
npx serve outFor GitHub Pages path simulation locally:
$env:NEXT_PUBLIC_BASE_PATH="/Next.js-Learning-Project"; npm run build- This is a mockup — forms, checkout, and cart do not connect to any API
- Product images are local SVG placeholders in
public/images/mock/(~36 KB total) — no external CDN, works on GitHub Pages and in restricted networks - Regenerate placeholders:
npm run images:generate - Persian font:
IRANSansWeb_UltraLight.woff2inpublic/fonts/
Open source — available for learning and portfolio reference.
Built by DevAmir