The goal
Replace a WhatsApp-only ordering flow with a full RTL Hebrew website: product catalogue, cart/checkout, custom-cake requests, recipes, gallery, blog, testimonials, leads, and an admin dashboard the owner can operate without a developer.
The solution
A monorepo with client (Vue 3 + Vite + TS + Tailwind), server (Express + TS + Mongoose) and a shared types folder, wired with a single npm run dev. The backend exposes REST endpoints for 11 models with JWT auth, Multer image uploads, validation, an email service, and a seed script. The frontend delivers 14+ public pages plus a 12-page admin CMS (Dashboard, Orders, Products, Recipes, Categories, Leads, Custom Cakes, Testimonials, Gallery, Blog, Users, Settings) with RTL Hebrew layout, Pinia stores and a WhatsApp floating button.
Highlights
- Full RTL Hebrew UX across 14+ public and 12 admin pages
- One-command local dev (client + server + Docker Mongo)
- shared/ types keep client and server locked together
- Complete admin CMS eliminates developer handoffs
The challenge
Run client + server together while keeping shared types in sync.
Root package.json with install:all, seed and parallel dev scripts; shared/types.ts imported by both sides so types literally share one file.
The owner edits products on mobile in Hebrew with images — naive file inputs are clunky.
Multer-based upload middleware with per-route limits; admin edit pages use controlled uploads with preview; uploaded files land in server/uploads (git-excluded) and are served via the API.
Fresh MongoDB = empty site the owner cannot evaluate.
seed.ts (via npm run seed) loads categories, products, recipes, and an admin user from .env so the site is fully populated from minute one.
Admin and public concerns were risking accidental leakage via shared middleware.
Dedicated admin.ts router with auth middleware on every endpoint, and a separate Vue AdminLayout with route guards.
What was delivered
- client/ Vue 3 + Vite + TS + Tailwind frontend (public + admin)
- server/ Express + TS + Mongoose backend (auth, uploads, email)
- shared/types.ts cross-package type source of truth
- docker-compose.yml for local Mongo
- seed.ts for placeholder content and admin user
- Full admin CMS (products, recipes, gallery, blog, testimonials, users, settings)
- README with 7-step local setup
Results
14+
Public pages
12
Admin pages
11
Backend models
Hebrew RTL
Primary language
What it taught me
- A shared/ folder for types beats copying interfaces across packages — refactors become safe
- Seed scripts aren't optional for clients — owners evaluate visually, not through Swagger
- Dockerized Mongo in docker-compose removed 'it works on my machine' from day one