המטרה
להחליף הזמנה דרך WhatsApp באתר RTL עברי מלא: קטלוג מוצרים, עגלה וצ'קאאוט, בקשות עוגות מותאמות, מתכונים, גלריה, בלוג, המלצות, לכידת לידים, ופאנל אדמין שבעלי העסק יכולים להפעיל בלי מפתח.
הפתרון
Monorepo עם client (Vue 3 + Vite + TS + Tailwind), server (Express + TS + Mongoose), ו-shared types, מחוברים ב-`npm run dev` יחיד. ה-backend חושף REST ל-11 מודלים עם JWT auth, העלאת תמונות דרך Multer, validation, שירות אימייל, ו-seed. ה-frontend מציג 14+ דפים ציבוריים + CMS אדמין בן 12 דפים עם RTL, Pinia ו-FAB של WhatsApp.
עיקרי הדברים
- UX עברי RTL מלא על 14+ דפים ציבוריים ו-12 admin
- פיתוח מקומי בפקודה אחת (client + server + Docker Mongo)
- Types ב-shared/ שומרים על client ו-server מסונכרנים
- CMS אדמין מלא מבטל תלויות במפתח
האתגר
להריץ client + server יחד עם שמירה על סנכרון types.
package.json ב-root עם install:all, seed ו-dev מקביל; shared/types.ts מיובא משני הצדדים.
הבעלים עורך מוצרים במובייל בעברית עם תמונות — input file נאיבי מסורבל.
Multer middleware עם מגבלות פר-route; דפי עריכה admin עם preview; קבצים ב-server/uploads (לא ב-git) מוגשים דרך ה-API.
MongoDB ריק = אתר שהבעלים לא יכול להעריך.
seed.ts (דרך npm run seed) טוען קטגוריות, מוצרים, מתכונים ומשתמש admin מ-.env — האתר מלא מהדקה הראשונה.
Routes ציבוריים ו-admin הסתכנו בדליפה דרך middleware משותף.
admin.ts נפרד עם auth middleware בכל endpoint, ו-AdminLayout נפרד עם route guards.
מה נמסר
- client/ Frontend Vue 3 + Vite + TS + Tailwind (ציבורי + admin)
- server/ Backend Express + TS + Mongoose (auth, uploads, אימייל)
- shared/types.ts מקור אמת ל-types
- docker-compose.yml ל-Mongo מקומי
- seed.ts לתוכן ו-admin
- CMS אדמין מלא (מוצרים, מתכונים, גלריה, בלוג, המלצות, משתמשים, הגדרות)
- README עם 7-step local setup
תוצאות
14+
דפים ציבוריים
12
דפי אדמין
11
מודלים
Hebrew RTL
שפה ראשית
מה זה לימד אותי
- תיקיית shared/ ל-types מנצחת העתקת interfaces בין חבילות
- Seed scripts הם חובה — בעלי עסק מעריכים ויזואלית, לא דרך Swagger
- Docker Mongo ב-docker-compose הסיר 'it works on my machine' מהיום הראשון