A full-featured bilingual (English/Arabic) e-commerce storefront for Paper and Pen, built with Next.js 14 and Tailwind CSS. Includes a product catalogue, shopping cart, checkout flow, and an admin dashboard for managing products, orders, and customers.
- 🛍️ Product listing and detail pages
- 🛒 Shopping cart with persistent state
- 💳 Checkout process
- 🌐 Bilingual support (English & Arabic / RTL)
- 🔐 Admin dashboard — products, orders, customers
- ☁️ Cloudflare Workers deployment with D1 database
- ⚡ App Router (Next.js 14)
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Database | Cloudflare D1 (SQLite) |
| Runtime | Cloudflare Workers (via wrangler) |
| Hosting | Netlify / Cloudflare Pages |
src/
├── app/
│ ├── [locale]/ # Locale-aware routes (en / ar)
│ │ ├── admin/ # Admin pages
│ │ ├── checkout/ # Checkout page
│ │ └── page.tsx # Storefront home
│ └── layout.tsx
├── components/
│ ├── admin/ # Admin UI components
│ ├── checkout/ # Cart & checkout components
│ ├── layout/ # Header, Footer, MainLayout
│ ├── product/ # Product listing & detail
│ └── ui/ # Shared UI primitives
├── lib/ # Cart, products, i18n helpers
├── locales/ # en.json / ar.json translations
└── hooks/
migrations/ # D1 SQL migrations
- Node.js 18+
- npm or yarn
- Wrangler CLI (
npm i -g wrangler) for local D1 access
git clone https://github.com/zaabi1995/paperandpen-website.git
cd paperandpen-website
npm installCreate a .env.local file:
# Add any required environment variables here
# e.g., NEXT_PUBLIC_API_URL=...npm run devVisit http://localhost:3000.
npm run build
npm start# Apply migrations locally
wrangler d1 execute DB --local --file migrations/0001_initial.sql
# Apply to production
wrangler d1 execute DB --file migrations/0001_initial.sqlwrangler deployNavigate to /en/admin/login (or /ar/admin/login) to access the admin dashboard.
MIT © 2024-2026 Ali Adnan Haider Darwish Al-Zaabi