OB
אופיר ברנס
Builder · TLV
חזרה לכל הפרויקטים
PWA · 2026 · Personal Project

Birthday

לוח ימי הולדת אישי — countdown מדויק לכל אחד, 4 קטגוריות, year-strip, ותזכורות אוטומטיות דרך Notifications API

Birthday

Birthday — אפליקציית PWA לניהול ימי הולדת של חברים, משפחה, וקולגות. לעולם לא תפספס יום הולדת חשוב — האפליקציה מסדרת את כולם לפי "מתי הבא ביותר" עם countdown מדויק לכל יום, ושולחת התראת מערכת ביום ההולדת ויום לפני.

הזרימה המלאה

  1. הוסף אדם עם שם, תאריך לידה (יום + חודש מ-12 בעברית, שנה אופציונלית), קטגוריה (משפחה/חברים/עבודה/אחר), והערה אופציונלית
  2. רואה מיד את הסדר — הקרובים ביותר למעלה, עם countdown ימים לכל אחד
  3. Hero דינמי — אם מישהו חוגג היום: כרטיס celebration עם 🎂 קופצני וגרדיאנט מסתובב. אם לא: countdown ענק לאדם הבא
  4. detail modal עם year-strip ויזואלי (מסמן איפה היום ואיפה יום ההולדת בשנה), חישוב גיל נוכחי, גיל בהולדת הבאה, יום בשבוע
  5. שיתוף איחול עם ניסוח אוטומטי בעברית לוואטסאפ (משתנה אם זה היום או בעוד X ימים)

חישוב התאריכים

מתמטיקת תאריכים מקורית מטפלת ב:

  • Next occurrence — אם תאריך השנה הזו עבר → next year, אחרת → השנה
  • Days until — חישוב מדויק עם normalize של hours (00:00:00 לדיוק יומי)
  • Current age — גיל מותאם בהתחשב בשאלה האם יום ההולדת השנה כבר עבר
  • Next agenextDate.getFullYear() - birthYear
  • Day of weekHE_DOW[next.getDay()] בעברית (ראשון, שני, שלישי...)
  • Validation — מזהה תאריכים לא חוקיים (31 בפברואר → שגיאה לפני שמירה)

פיצ'רים

  • 4 קטגוריות צבעוניות עם emoji + filter chips נגישים
  • 3 stats: סך הכל / השבוע / החודש
  • Year-strip ויזואלי — מציג בארפ מקום היום בשנה ביחס למקום יום ההולדת
  • Avatar עם אות התחלת השם בגרדיאנט הקטגוריה (ללא צילום, פרטי לחלוטין)
  • Today celebration — כרטיס מיוחד עם cake bouncing, גרדיאנט מסתובב, ושם החוגג גדול
  • Notifications API — תזכורת אוטומטית כשהמשתמש פותח את האפליקציה ביום ההולדת או יום לפני (deduplicated לפי תאריך)
  • חישוב גיל אוטומטי מוצג ליד השם ברשימה (קומפקטי) ובמודל הפרטים (מורחב)
  • Web Share API עם הודעת איחול ניסוחית בעברית

טכנולוגיות

  • Intl.DateTimeFormat('he-IL') עם weekday/day/month — יום בשבוע מלא בעברית, חודש מלא, צורה אנושית
  • Date math מקורי — nextBirthday(month, day), daysUntil, currentAge, nextAge
  • Notifications API — תזכורות תקופתיות (visibility-triggered, dedup לפי localStorage key)
  • Vibration API — feedback קצר על שמירה
  • Web Share API עם fallback ל-clipboard
  • IndexedDB — people store + settings (notifyEnabled, lastNotifyDay)
  • Custom SVG cake illustration ב-empty state עם 3 קומות + 3 נרות עם להבות + frosting drips
  • Service Worker + PWA installable

עיצוב

פלטה dusty-rose + cream + gold sparkles — אסתטיקת קישוטי יום הולדת אלגנטיים. נבדלת מ-rose (Pulse, vivid), lavender (Mood), salmon (Voice). רקע dusky #1a0e15 · dusty-rose #d4a5b0 · cream #fef9c3 · gold sparkles #fcd34d.

טיפוגרפיה — Heebo + Frank Ruhl Libre לשמות + Instrument Serif italic ל"שלי" + IBM Plex Mono ל-countdown numbers (300 weight, tabular-nums). Glassmorphic cards, ambient rose orbs נעות ברקע, confetti dots מנומסים ב-background pattern.

פתח את Birthday ב-ofir.zbang.net/birthday

· TECHNOLOGY ·
PWA Intl.DateTimeFormat Notifications API IndexedDB Vibration API Web Share API Custom SVG Service Worker

פרויקטים קשורים.

· YOUR PROJECT NEXT ·

הפרויקט הבא שלך?

בוא נדבר