AI-Native ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ Tech-Stack
Claude Code ನಂತಹ AI ಏಜೆಂಟ್ಗಳು ನೀವು ಸಾಫ್ಟ್ವೇರ್ ನಿರ್ಮಿಸುವ ವಿಧಾನವನ್ನೇ ಬದಲಾಯಿಸುತ್ತವೆ. ನೀವು ಹಿಂದೆಂದಿಗಿಂತಲೂ ವೇಗವಾಗಿ ಕೆಲಸ ಮಾಡಬಹುದು. ಆದರೆ ಅತಿಯಾದ ವೇಗವು ಅಸ್ತವ್ಯಸ್ತವಾದ ಕೋಡ್ಗೆ ಕಾರಣವಾಗಬಹುದು. ಬೆಳೆಯಲು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸರಳವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಬಹುದಾದ ರೀತಿಯಲ್ಲಿ (maintainable) ಇಟ್ಟುಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ.
ವೇಗವಾಗಿ ನಿರ್ಮಿಸಲು ಮತ್ತು ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಲು (scale) ನಾವು ಬಳಸುವ ಸ್ಟ್ಯಾಕ್ ಇಲ್ಲಿದೆ.
AI ಏಜೆಂಟ್ ಕಾರ್ಯತಂತ್ರ (AI Agent Strategy) ಅತಿಯಾದ ಎಂಜಿನಿಯರಿಂಗ್ (overengineer) ಮಾಡಬೇಡಿ. AI ಸಾವಿರಾರು ಸಾಲುಗಳ ಅನಗತ್ಯ ಕೋಡ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ.
- ನಿಮ್ಮ AGENTS.md ಅಥವಾ CLAUDE.md ಫೈಲ್ಗಳನ್ನು ಚಿಕ್ಕದಾಗಿ ಇರಿಸಿ.
- ಏಜೆಂಟ್ಗಳು ಪದೇ ಪದೇ ತಪ್ಪು ಮಾಡುವ ಪ್ರಾಜೆಕ್ಟ್ ನಿಯಮಗಳನ್ನು ಮಾತ್ರ ಸೇರಿಸಿ.
- ನಿರ್ದಿಷ್ಟ ಕೌಶಲಗಳನ್ನು (skills) ಅವುಗಳ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ.
- ಸಂದರ್ಭವು (context) ಸ್ಪಷ್ಟವಾಗಿರಲು, ಸಂಭಾಷಣೆ ಮುಗಿದ ನಂತರ ಕೌಶಲಗಳನ್ನು ತೆಗೆದುಹಾಕಿ.
ಫ್ರಂಟ್ಎಂಡ್ ಮತ್ತು UI (Frontend and UI)
- Next.js: App Router ಅನ್ನು ಬಳಸಿ. ಇದು ಉತ್ತಮ SEO ಮತ್ತು ವೇಗದಿಗಾಗಿ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
- React: ಫೀಚರ್ಗಳನ್ನು ವೇಗವಾಗಿ ಸೇರಿಸಲು ಇದು ಅತ್ಯುತ್ತಮ ಎಕೋಸಿಸ್ಟಮ್.
- MUI (Material UI): Figma ನಲ್ಲಿ ಎಲ್ಲವನ್ನೂ ಮೊದಲಿನಿಂದ ವಿನ್ಯಾಸಗೊಳಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ನಾವು ಇದನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ತಿಂಗಳುಗಟ್ಟಲೆ ಕೆಲಸವನ್ನು ಉಳಿಸುತ್ತದೆ.
- Zod ಮತ್ತು React Hook Form: ಸಂಕೀರ್ಣ ಫಾರ್ಮ್ಗಳು ಮತ್ತು ವ್ಯಾಲಿಡೇಶನ್ (validation) ನಿರ್ವಹಿಸಲು ಇದು ಅತ್ಯುತ್ತಮ ಕಾಂಬೊ.
ಬ್ಯಾಕ್ಎಂಡ್ ಮತ್ತು ಡೇಟಾ (Backend and Data)
- Firebase: ನಾವು ಅಥೆಂಟಿಕೇಶನ್ (authentication), ಸ್ಟೋರೇಜ್ ಮತ್ತು ಡೇಟಾಬೇಸ್ಗಾಗಿ (Firestore) ಇದನ್ನು ಬಳಸುತ್ತೇವೆ.
- Firestore Rules: ಇದು ಎಲ್ಲಾ ಅನುಮತಿಗಳನ್ನು (permissions) ಒಂದೇ ಫೈಲ್ನಲ್ಲಿ ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಪದೇ ಪದೇ ಬಳಸುವ ಸೆಕ್ಯೂರಿಟಿ ಕೋಡ್ನ ಅಗತ್ಯವನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.
- Firebase Functions: ಸಂಕೀರ್ಣ ಲಾಜಿಕ್ (logic) ಗಾಗಿ ಇವುಗಳನ್ನು ಬಳಸಿ. ನಿಮ್ಮ ಫ್ರಂಟ್ಎಂಡ್ ಅನ್ನು ಸರಳವಾಗಿ (dumb) ಮತ್ತು ಬ್ಯಾಕ್ಎಂಡ್ ಅನ್ನು ಸ್ಮಾರ್ಟ್ ಆಗಿ ಇರಿಸಿ.
- Vercel AI SDK: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ಗೆ ವಿವಿಧ AI ಮಾಡೆಲ್ಗಳನ್ನು ಸಂಯೋಜಿಸಲು (integrate) ಇದು ಸುಲಭವಾದ ಮಾರ್ಗವಾಗಿದೆ.
ಟೆಸ್ಟಿಂಗ್ ಮತ್ತು ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ (Testing and Deployment)
- Integration Tests: ಬ್ಯಾಕ್ಎಂಡ್ ಸರ್ವಿಸ್ ಲೇಯರ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ನಾವು Jest ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ನಾವು ಸಣ್ಣ ಯೂನಿಟ್ ಟೆಸ್ಟ್ಗಳಿಗಿಂತ ಹೆಚ್ಚಾಗಿ, ವಿವಿಧ ಭಾಗಗಳು ಹೇಗೆ ಒಟ್ಟಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದರ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತೇವೆ.
- TypeScript: ಸುರಕ್ಷಿತ ರಿಫ್ಯಾಕ್ಟರಿಂಗ್ಗಾಗಿ (refactoring) ಇದು ಅತ್ಯಗತ್ಯ.
- Vercel: ಇದು ತಕ್ಷಣದ ಪ್ರೊಡಕ್ಷನ್ ಮತ್ತು ಪ್ರಿವ್ಯೂ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ಗಳನ್ನು ಒದಗಿಸಲು GitHub ಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ.
- PostHog: ಅನಾಲಿಟಿಕ್ಸ್, ಸೆಷನ್ ರಿಪ್ಲೇಸ್ ಮತ್ತು ಎರರ್ ಲಾಗ್ಗಳಿಗಾಗಿ ಇದನ್ನು ಬಳಸಿ.
- Resend ಮತ್ತು react-email: ಇದು ಇಮೇಲ್ಗಳನ್ನು React ಕಾಮಪೊನೆಂಟ್ಗಳಾಗಿ ಬರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ.
ಈ ರಚನೆಯಿರುವ ಟೆಂಪ್ಲೇಟ್ ಪ್ರಾಜೆಕ್ಟ್ 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