בקצרה
Aviv Bakery, קונדיטוריה ישראלית, קיבלה הזמנות רק דרך WhatsApp. בניתי אתר מלא בעברית עם קטלוג מוצרים, עגלה והזמנה, טופס בקשה לעוגה בעיצוב אישי עם תמונה לדוגמה, מתכונים, גלריה, בלוג והמלצות של לקוחות. מאחוריו יש 12 מסכי ניהול שבהם בעלי העסק מנהלים הזמנות, מוצרים, בקשות לעוגות, פניות ותוכן באתר, בלי מתכנת.
המצב לפני
כל הזמנה הגיעה כהודעת WhatsApp. ללקוחות לא היה קטלוג לעבור עליו, הפרטים של עוגה בעיצוב אישי התפזרו בין הודעות ותמונות בצ'אט, ולא הייתה רשימה של הזמנות או של אנשים ששאלו על עוגה. עדכון של מוצרים, תמונות או מחירים ברשת דרש מישהו טכני.
מה נבנה
הלקוחות מקבלים אתר בעברית עם יותר מ-14 עמודים ציבוריים: קטגוריות ומוצרים, עגלה והזמנה, חשבון לקוח, טופס בקשה לעוגה בעיצוב אישי שבו מתארים מה רוצים ומעלים תמונה, מתכונים, גלריה, בלוג והמלצות. כפתור WhatsApp נשאר בכל עמוד, למי שעדיין מעדיף לכתוב. הזמנות חדשות ופניות נשלחות במייל. בעלי העסק נכנסים לאזור ניהול נפרד עם 12 מסכים: לוח בקרה, הזמנות, מוצרים, מתכונים, קטגוריות, פניות, עוגות בעיצוב אישי, המלצות, גלריה, בלוג, משתמשים והגדרות. אפשר לערוך מוצרים ותמונות מהטלפון, עם תצוגה מקדימה של כל תמונה לפני השמירה. האתר נמסר כשהוא כבר מלא בקטגוריות, מוצרים ומתכונים לדוגמה, כך שבעלי העסק יכלו לראות ולשפוט אותו מהיום הראשון במקום להסתכל על עמודים ריקים.
מה זה שינה לעסק
- הזמנות מגיעות דרך אתר עם קטלוג ועגלה, ולא רק בהודעות WhatsApp
- בקשות לעוגות בעיצוב אישי מגיעות למקום אחד, עם התיאור והתמונה של הלקוח
- בעלי העסק מנהלים מוצרים, הזמנות, בקשות ותוכן מ-12 מסכי ניהול
- מתכונים, גלריה, בלוג והמלצות נותנים ללקוחות סיבה להיכנס גם בלי להזמין
זה מתאים לכם אם
- אתם מנהלים קונדיטוריה, קייטרינג או חנות אוכל שמקבלים הזמנות ב-WhatsApp
- חלק מהעבודה שלכם נעשה לפי הזמנה ודורש פרטים ותמונות מהלקוח
- אתם רוצים לעדכן מוצרים ותמונות בעצמכם, מהטלפון
- אתם רוצים אתר בעברית עם תוכן כמו מתכונים או בלוג לצד החנות
צריכים משהו דומה?
ספרו לי מה אתם צריכים, ונבדוק יחד בשיחה קצרה אם ואיך אפשר לבנות את זה.
שאלות נפוצות
לקוחות שאוהבים WhatsApp עדיין יוכלו להשתמש בו?
כן. כפתור WhatsApp נשאר בכל עמוד באתר הזה, כך שלקוח עדיין יכול לכתוב ישירות. ההבדל הוא שללקוחות שמעדיפים להזמין לבד יש קטלוג, עגלה וטופס בקשה לעוגה.
אפשר לנהל את האתר בעצמנו בלי מתכנת?
זו הייתה המטרה של אזור הניהול. 12 המסכים שלו כוללים הזמנות, מוצרים, קטגוריות, מתכונים, בקשות לעוגות, פניות, המלצות, גלריה, בלוג, משתמשים והגדרות, ואפשר להעלות תמונות מוצרים מהטלפון עם תצוגה מקדימה.
איך בקשות לעוגות בעיצוב אישי מגיעות אלינו?
הלקוח ממלא טופס באתר, מתאר את העוגה ומעלה תמונה לדוגמה. הבקשה נשמרת במסך ניהול משלה, כך שכל בקשה והתמונה שלה נמצאות ברשימה אחת במקום להתפזר בין צ'אטים.
פרטים טכנייםאיך זה בנוי, למי שרוצה לדעת
הפתרון
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' מהיום הראשון