𝗧𝗵𝗲 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸 𝗳𝗼𝗿 𝗔𝗜 𝗡𝗮𝘁𝗶𝘃𝗲 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁

AI-Native ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਟੈਕ-ਸਟੈਕ

Claude Code ਵਰਗੇ AI agents ਸਾਫਟਵੇਅਰ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਬਦਲ ਰਹੇ ਹਨ। ਤੁਸੀਂ ਪਹਿਲਾਂ ਨਾਲੋਂ ਕਿਤੇ ਤੇਜ਼ੀ ਨਾਲ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। ਪਰ ਤੇਜ਼ੀ ਕਾਰਨ ਕੋਡ ਗੜਬੜੀ ਵਾਲਾ ਹੋ ਸਕਦਾ ਹੈ। ਵਧਣ ਲਈ ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਰਲ ਅਤੇ ਮੇਨਟੇਨੇਬਲ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ।

ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਸਕੇਲ (scale) ਕਰਨ ਲਈ ਅਸੀਂ ਇਸ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

AI Agent ਰਣਨੀਤੀ Overengineer ਨਾ ਕਰੋ। AI ਫਾਲਤੂ ਕੋਡ ਦੀਆਂ ਹਜ਼ਾਰਾਂ ਲਾਈਨਾਂ ਜੋੜਨਾ ਆਸਾਨ ਬਣਾ ਦਿੰਦਾ ਹੈ।

• ਆਪਣੀਆਂ AGENTS.md ਜਾਂ CLAUDE.md ਫਾਈਲਾਂ ਨੂੰ ਛੋਟਾ ਰੱਖੋ।
• ਸਿਰਫ਼ ਉਹ ਪ੍ਰੋਜੈਕਟ ਨਿਯਮ ਸ਼ਾਮਲ ਕਰੋ ਜਿਨ੍ਹਾਂ ਵਿੱਚ agents ਅਕਸਰ ਗਲਤੀ ਕਰਦੇ ਹਨ।
• ਖਾਸ ਹੁਨਰ (skills) ਉਦੋਂ ਹੀ ਇੰਸਟਾਲ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੋਵੇ।
• ਕੰਟੈਕਸਟ (context) ਨੂੰ ਸਾਫ਼ ਰੱਖਣ ਲਈ ਗੱਲਬਾਤ ਖਤਮ ਹੋਣ 'ਤੇ skills ਨੂੰ ਹਟਾ ਦਿਓ।

Frontend ਅਤੇ UI

• Next.js: App Router ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਬਿਹਤਰ SEO ਅਤੇ ਤੇਜ਼ੀ ਲਈ server-side rendering ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
• React: ਫੀਚਰਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਜੋੜਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ecosystem।
• MUI (Material UI): ਅਸੀਂ Figma ਵਿੱਚ ਹਰ ਚੀਜ਼ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਡਿਜ਼ਾਈਨ ਕਰਨ ਤੋਂ ਬਚਣ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਇਹ ਮਹੀਨਿਆਂ ਦਾ ਕੰਮ ਬਚਾਉਂਦਾ ਹੈ।
• Zod ਅਤੇ React Hook Form: ਗੁੰਝਲਦਾਰ ਫਾਰਮਾਂ ਅਤੇ validation ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਸੁਮੇਲ।

Backend ਅਤੇ Data

• Firebase: ਅਸੀਂ ਇਸਦੀ ਵਰਤੋਂ authentication, storage, ਅਤੇ database (Firestore) ਲਈ ਕਰਦੇ ਹਾਂ।
• Firestore Rules: ਇਹ ਇੱਕ ਹੀ ਫਾਈਲ ਵਿੱਚ ਸਾਰੀਆਂ ਅਨੁਮਤੀਆਂ (permissions) ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਇਹ ਵਾਰ-ਵਾਰ ਸੁਰੱਖਿਆ ਕੋਡ ਲਿਖਣ ਦੀ ਲੋੜ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
• Firebase Functions: ਗੁੰਝਲਦਾਰ logic ਲਈ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਆਪਣੇ frontend ਨੂੰ 'dumb' ਅਤੇ backend ਨੂੰ 'smart' ਰੱਖੋ।
• Vercel AI SDK: ਆਪਣੇ ਐਪ ਵਿੱਚ ਵੱਖ-ਵੱਖ AI models ਨੂੰ ਜੋੜਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ।

Testing ਅਤੇ Deployment

• Integration Tests: ਅਸੀਂ backend service layer ਨੂੰ ਟੈਸਟ ਕਰਨ ਲਈ Jest ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਛੋਟੇ unit tests ਦੀ ਬਜਾਏ ਇਸ ਗੱਲ 'ਤੇ ਧਿਆਨ ਦਿੰਦੇ ਹਾਂ ਕਿ ਹਿੱਸੇ ਇਕੱਠੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
• TypeScript: ਸੁਰੱਖਿਅਤ refactoring ਲਈ ਇਹ ਜ਼ਰੂਰੀ ਹੈ।
• Vercel: ਇਹ ਤੁਰੰਤ production ਅਤੇ preview deployments ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ GitHub ਨਾਲ ਜੁੜਦਾ ਹੈ।
• PostHog: Analytics, session replays, ਅਤੇ error logs ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ।
• Resend ਅਤੇ react-email: ਇਹ ਤੁਹਾਨੂੰ React components ਵਜੋਂ ਈਮੇਲ ਲਿਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਇਸ ਢਾਂਚੇ ਵਾਲਾ ਇੱਕ 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