𝗧𝗵𝗲 𝗧𝗲𝗰𝗵-𝗦𝘁𝗮𝗰𝗸 𝗳𝗼𝗿 𝗔𝗜-𝗡𝗮𝘁𝗶𝘃𝗲 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁
AI agents like Claude Code change how you build software. You can move faster than ever. But speed can lead to messy code. You must keep your project simple and maintainable to grow.
Here is the stack we use to build fast and scale easily.
𝗔𝗜 𝗔𝗴𝗲𝗻𝘁 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 Do not overengineer. AI makes it easy to add thousands of lines of useless code.
- Keep your AGENTS.md or CLAUDE.md files small.
- Only include project rules that agents often get wrong.
- Install specific skills only when you need them.
- Remove skills when the conversation ends to keep the context clean.
𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗮𝗻𝗱 𝗨𝗜
- Next.js: Use the App Router. It handles server-side rendering for better SEO and speed.
- React: The best ecosystem for adding features quickly.
- MUI (Material UI): We use this to avoid designing everything from scratch in Figma. It saves months of work.
- Zod and React Hook Form: The best combo for handling complex forms and validation.
𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗮𝗻𝗱 𝗗𝗮𝘁𝗮
- Firebase: We use this for authentication, storage, and the database (Firestore).
- Firestore Rules: This handles all permissions in one file. It removes the need for repetitive security code.
- Firebase Functions: Use these for complex logic. Keep your frontend dumb and your backend smart.
- Vercel AI SDK: The easiest way to integrate different AI models into your app.
𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗮𝗻𝗱 𝗗𝗲𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁
- Integration Tests: We use Jest to test the backend service layer. We focus on how parts work together rather than tiny unit tests.
- TypeScript: This is essential for safe refactoring.
- Vercel: It connects to GitHub to provide instant production and preview deployments.
- PostHog: Use this for analytics, session replays, and error logs.
- Resend and react-email: This allows you to write emails as React components.
A template project with this structure is on 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