Super English – לומדה לבגרות באנגלית

הלומדה נעשתה כחלק משיתוף פעולה עם תלמדיות התמחות אנגלית על מנת לתת לתלמידות הזדמנות חווית לתרגל ולהתכנון לבגריות באנגלית. הלומדה נבתנה באמצעות כל VIBE CODING שונים. לומדה אינטראקטיבית, אופליין-ראשון, להכנה לבגרות באנגלית. ארכיטקטורה היברידית: שרת Node.js שומר את נתוני הניהול כקבצי JSON על הדיסק (לא נדיפים, מסונכרנים בין כל הדפדפנים והמשתמשים), והדפדפן שומר עותק מקומי לעבודה אופליין מלאה.

אתגרים משמעותיים

• איפיון האתר ובניית תוכנית עבודה מסודרת תוך עמידה במטלת הפרוייקט ובהתאמה לללמידה.
• עבודת אופליין והרצה נגישה גם לחסרי ידע טכנולגי
• מתן אפשרות למהל לערוך שינויים גם לאחר סיום הבנייה ושמירת השינוים באופן מלא.
• התאמה למגבלות חומרה תוך שמירה על גרפיקה וביצועים
  • אתר נגיש ומובן עם ניווט נוח

תכולה

• 4 מודולים (A, C, E, G), כל אחד עם 7 שלבי תרגול וניהול תוכן מלא
• ממשק ניהול ב-/admin (סיסמה ברירת מחדל: 1234) — גישה רק דרך הקלדה ישירה של הכתובת (אין קישור גלוי באתר)
• שלב הדגמה (PDF) — מציג שגיאה ברורה אם לא הועלה PDF
• תעודה מעוצבת בעברית, A4 portrait, ללא כפילות חלונות/כפתורים, ללא בעיות קידוד
• צלילים, אנימציות, חלקיקים מתקדמים (זיקוקים + גשם כוכבים + הילה זהובה)
• שני משחקי בונוס לכל מודול (נפתחים אחרי השלמה): כדורים פורחים אמיתיים + פאזל עם חשיפת תמונה
• About תומך Markdown
• ערכת עיצוב מלאה ניתנת לשליטה מהממשק (צבעים, פונט, on/off לעננים/חלקיקים, גוון שמיים)

ארכיטקטורה

• Frontend: React + Vite + Tailwind, מתארח כקבצים סטטיים
• Backend: Express קל-משקל (server/index.js)
  • GET/PUT /api/settings – settings.json על הדיסק (סנכרון בין כל המשתמשים)
  • GET/PUT/DELETE /api/files/:key – קבצי PDF/Excel/תמונות
  • POST /api/reset-password – איפוס סיסמת אדמין ל-1234
• Data dir: ./data/ (עם data/files/ לבינארי). שורד restart ו-redeploy.
• Fallback אופליין: אם השרת לא זמין, ה-frontend נופל ל-localStorage + IndexedDB.

נתינות (Persistence)

נתון	מיקום עיקרי	גיבוי
הגדרות ממשק ניהול	data/settings.json (דיסק)	localStorage
קבצי PDF/Excel/תמונות	data/files/<key> (דיסק)	IndexedDB
התקדמות תלמיד	localStorage (לפי דפדפן)	—

---

הרצה מקומית עם Bun (מהיר ומומלץ)

# התקנה
bun install

# פיתוח (vite + שרת במקביל)
bun run dev:all

# או רק frontend
bun run dev

האתר יעלה ב-http://localhost:8080 והשרת ב-http://localhost:4000.

הרצה מקומית עם npm

npm install
npm run dev:all

פרודקשן (Node)

bun install   # או npm install
bun run build # או npm run build
bun run start # או npm start  (שרת + frontend מאוחדים על :8080)

הרצה עם Docker (מומלץ לפריסה)

docker compose up --build

• האתר זמין ב-http://localhost:8080
• הנתונים נשמרים ב-./data/ (volume mount), שורדים docker compose down/restart

---

אריזה לקובץ בינארי (offline, ללא NPM/אינטרנט בלקוח)

המטרה: לתת ללקוח קובץ אחד שניתן להריץ ללא התקנת Node או npm. משתמשים ב-bun build --compile שמייצר binary עצמאי הכולל את ה-runtime.

שלבים על מחשב הפיתוח (פעם אחת)

# 1) בנה את ה-frontend לקבצים סטטיים
bun install
bun run build              # מייצר ./dist

# 2) קמפל את השרת ל-binary עצמאי הכולל את הקוד וה-runtime של Bun
bun build server/index.js \
  --compile \
  --target=bun-linux-x64 \   # החלף ב-bun-windows-x64 או bun-darwin-arm64 לפי הלקוח
  --outfile super-english

# 3) העבר ללקוח את החבילה הבאה (פשוט להעתיק תיקייה / לדחוס ל-zip):
#    super-english        ← הבינארי שנוצר
#    dist/                ← ה-frontend הסטטי
#    data/                ← (אופציונלי) הגדרות מוכנות מראש

במחשב הלקוח (ללא אינטרנט, ללא npm)

# הרצה ישירה — הבינארי כבר מכיל את הכל
chmod +x super-english     # רק ב-Linux/Mac
./super-english            # ב-Windows: super-english.exe

האתר יזמין על http://localhost:8080 (ה-PORT ניתן לשינוי דרך משתנה סביבה PORT).

טיפ: לבחירת platforms אחרים — bun-linux-arm64, bun-darwin-x64, bun-windows-x64. לתיעוד מלא: https://bun.sh/docs/bundler/executables

חלופות

• pkg של Vercel: npx pkg server/index.js -t node18-win-x64 -o super-english.exe (דורש Node, אך התוצאה עצמאית).
• Docker image מצומצם: לפרוס כקונטיינר ב-air-gapped network דרך docker save/docker load.

---

תלויות (כולן offline-friendly, ללא תשלום)

Frontend: react, react-router-dom, vite, tailwindcss, lucide-react, xlsx, react-pdf, canvas-confetti, fuse.js, react-markdown, remark-gfm, @tsparticles/react, @tsparticles/slim Backend: express, cors, helmet Sounds: Web Audio API מובנה (אין צורך בקבצי mp3) Cert: HTML+CSS print iframe — A4 portrait, קידוד עברי native

אבטחה

• helmet + CORS, ולידציה של מפתחות קבצים
• סיסמת אדמין מקומית, ניתן לאפס ל-1234 דרך הממשק או POST /api/reset-password
• אין קישור גלוי לאדמין — רק כניסה דרך /admin
• עבודה מקומית בלבד, אין משטח תקיפה חיצוני

נגישות

• Skip link, ARIA labels, focus rings ברורים
• ניווט מלא במקלדת (Tab + Enter/Space) בכל המשחקים והתרגילים
• כיבוד prefers-reduced-motion בכל אפקטי החגיגה

ביצועים על חומרה חלשה

• אנימציות מוגבלות ל-30-40fps
• חלקיקים במספר נמוך, ללא WebGL/Three.js (DOM+SVG בלבד)
• כדורים פורחים: SVG עם gradient, לא תמונות
• Express חד-תהליכי, ללא DB