Web Development
Sami General Trading — Bilingual Product Showcase & Admin CMS
A bilingual (English/Amharic) product showcase website for a Dire Dawa trading business selling bicycles & spare parts, water pumps, and weighing scales — with one-tap WhatsApp/Telegram inquiry and a simple admin panel so the owner can manage the catalog without touching code.
eneral Trading / Retail · Dire Dawa, Ethiopia
Challenge
Sami General Trading had no online presence. Customers in Dire Dawa and eastern Ethiopia could not browse bicycles, water pumps, or scales before visiting, and had to rely on word of mouth or in-person visits to learn what was in stock or get a price. The owner needed a professional digital storefront but had no way to update products or contact info without a developer.
Solution
We built a full-stack showcase site with an animated public experience — hero, filterable product catalog, product detail pages with specs, photo gallery, about, and contact with embedded map. Every product uses a contact-for-price model with pre-filled WhatsApp and Telegram inquiry links. A password-protected admin area lets Sami manage products (bilingual names/descriptions, images, flexible spec rows, active/draft toggle), gallery images, and site settings (about text, phone, logo, map) from a single dashboard. The public site supports English and Amharic via a header toggle; all dynamic content is stored per language in the database.
Result
The site is live at https://sami.raafat.site with 6 active products across 3 categories (bicycles, water pumps, scales). Customers can browse the catalog on mobile, switch language, and message Sami directly from any product page. The owner can add or edit listings independently through /admin without redeploying the site.
Key features
- Bilingual public site (EN/Amharic) — Header language toggle; product names, descriptions, gallery captions, and about text render from per-language database fields.
- Category-filtered product catalog — Animated grid with filters for Bicycles & Parts, Water Pumps, Scales, and All; contact-for-price model (no checkout).
- One-tap product inquiry — WhatsApp and Telegram deep links with pre-filled, localized messages including the product name; secondary call and email links.
- Owner admin CMS — Single-user login (Better Auth); CRUD for products, gallery images (with reorder), and site settings (contact info, about text, logo, map embed).
- Motion-rich, mobile-first UI — Framer Motion hero parallax, scroll reveals, page transitions, and skeleton loading states; respects prefers-reduced-motion.
- SEO & discoverability — Dynamic sitemap, robots.txt, JSON-LD structured data, and Open Graph meta tags per page.
Project gallery
Outcomes
2 weeks end-to-end
Delivery time
Technical approach
Full-stack TanStack Start (SSR + server functions) keeps one codebase for public pages and admin — no separate API layer for a catalog under 20 products. PostgreSQL + Prisma stores bilingual content and a singleton settings row so contact info and about text update without redeploy. Images are processed server-side with Sharp to WebP and served from disk (simpler and cheaper than a CDN for this scale). Better Auth handles a single admin account with no roles or public registration. Deployed via Docker Compose on Coolify with PostgreSQL, health checks, and automatic migrations on startup.
What's next
Gallery section is built but empty on production (client to upload shop photos). No analytics integration yet. Admin password reset flow not implemented (credentials changed manually). Traffic and conversion metrics not instrumented.
Project details
- Client
- Sami General Trading
- Service
- Web Development
- Timeline
- ~2 weeks