ה-Tech-Stack לפיתוח Web בשיטת AI-Native
סוכני AI כמו Claude Code משנים את הדרך שבה אתם בונים תוכנה. אתם יכולים להתקדם מהר מאי פעם. אבל מהירות עלולה להוביל לקוד מבולגן. כדי לצמוח, עליכם לשמור על הפרויקט שלכם פשוט וקל לתחזוקה.
הנה ה-stack שאנו משתמשים בו כדי לבנות מהר ולהתרחב (scale) בקלות.
אסטרטגיית AI Agent אל תעשו overengineering. ה-AI הופך את הוספת אלפי שורות קוד מיותרות לקלה מאוד.
- שמרו על קבצי ה-AGENTS.md או CLAUDE.md שלכם קטנים.
- כללו רק חוקי פרויקט שסוכנים נוטים לטעות בהם לעיתים קרובות.
- התקינו כישורים (skills) ספציפיים רק כשאתם זקוקים להם.
- הסירו כישורים כשהשיחה מסתיימת כדי לשמור על ההקשר (context) נקי.
Frontend ו-UI
- Next.js: השתמשו ב-App Router. הוא מטפל ב-server-side rendering לשיפור ה-SEO והמהירות.
- React: האקוסיסטם הטוב ביותר להוספת פיצ'רים במהירות.
- MUI (Material UI): אנחנו משתמשים בזה כדי להימנע מעיצוב הכל מאפס ב-Figma. זה חוסך חודשי עבודה.
- Zod ו-React Hook Form: השילוב הטוב ביותר לטיפול בטפסים מורכבים וב-validation.
Backend ו-Data
- Firebase: אנחנו משתמשים בזה עבור authentication, storage ו-database (Firestore).
- Firestore Rules: זה מטפל בכל ההרשאות בקובץ אחד. זה מסיר את הצורך בקוד אבטחה חוזר על עצמו.
- Firebase Functions: השתמשו בהם ללוגיקה מורכבת. שמרו על ה-frontend שלכם "טיפש" ועל ה-backend שלכם "חכם".
- Vercel AI SDK: הדרך הקלה ביותר לשלב מודלי AI שונים באפליקציה שלכם.
Testing ו-Deployment
- Integration Tests: אנחנו משתמשים ב-Jest כדי לבדוק את שכבת ה-backend service. אנחנו מתמקדים באיך החלקים עובדים יחד במקום ב-unit tests קטנים.
- TypeScript: זה חיוני ל-refactoring בטוח.
- Vercel: זה מתחבר ל-GitHub כדי לספק production ו-preview deployments מיידיים.
- PostHog: השתמשו בזה עבור analytics, session replays ו-error logs.
- Resend ו-react-email: זה מאפשר לכם לכתוב אימיילים כקומפוננטות React.
פרויקט תבנית (template) עם המבנה הזה נמצא ב-GitHub.
Source: https://dev.to/martinxpn/the-teach-stack-for-building-web-platforms-in-the-ai-native-era-45ka
Optional learning community: https://github.com/MartinXPN/nextjs-firebase-mui-starter