| Technology | Version | Context7 Library ID |
|---|---|---|
| Next.js | v15 | /vercel/next.js |
| React | v19 | /reactjs/react.dev |
| TypeScript | v5 | /microsoft/typescript |
| Tailwind CSS | v4 | /tailwindlabs/tailwindcss.com |
| Material UI | v7.1.1 | /mui/material-ui |
| ESLint (flat config) | v9 |
- Everything inside the
/approute is the main WebApp and will be rendered on the client-side. - Use API routes for server-side logic, such as database queries, authentication, and other backend operations. These routes are located in the
/app/apidirectory. - All routes are unprotected by default. The first line of every API route should check if the user is authenticated.
-
🚦 Simplicity First:
Always prefer the simplest, most direct solution—even if it means not following advanced best practices or patterns. Avoid “fancy” or “industry-standard” patterns if a simpler, more readable approach exists. Prioritize code that is easy to read, easy to change, and minimal—even if it’s not the most robust or “correct” for all edge cases. Emphasize approaches that suit solo developers and MVPs, where speed, clarity, and maintainability matter most. -
Prioritize clarity and maintainability over abstractions or optimizations. Keep the code simple, readable, and easy to iterate on — avoid overengineering and squeezing performance. Stick to conventional patterns.
-
When in doubt, choose the most straightforward and minimal approach, even if it means not following advanced best practices.
-
Use MUI components as the primary building blocks for UI and layout. Do not use HTML elements or create custom components when MUI provides a suitable alternative.
-
Use a Tailwind-first approach for styling. Rely on Tailwind utility classes for layout, spacing, responsiveness and colour. Do not use hard-coded Tailwind color classes for text as MUI used Contrast Threshold to ensure the text is visible. To colourize text use the Typography component with MUI’s
colorprop. Use MUI’ssxprop only when necessary, such as when styling components withoutclassNamesupport or when applying styles that cannot be expressed with Tailwind utilities. -
Do not install or use any additional libraries or packages unless explicitly instructed. Try to implement features using the existing tech stack and libraries. If you believe a new library is necessary, discuss it with the developer first.
-
Don’t manually format file or try to run the code with
npm run dev. The developer will handle it and there is always a server running on http://localhost:3000 -
If a file is corrupted or has syntax errors, do not try to delete it. Instead try to fix it within the file. If it cannot be fixed, restore it to the last known good state.
-
Make sure every edit you make is valid and viewable in the browser. Do not leave any broken code or syntax errors in the files. Fix it or restore it to the last known good state before moving on to the next task.
-
Use double quotes for quotes, 4 spaces for indentation and stroustrup style for braces.
-
For simple queries that dont involve joins or complex logic, use the
drizzle-ormquery builder directly. For more complex queries, use thesqltag fromdrizzle-ormto write raw SQL queries. Avoid using thedrizzle-ormquery builder for complex queries as it can lead to performance issues and make the code harder to read.
-
The goal is to build beautiful, minimal SaaS web apps with a clean, premium feel.
-
Use a monochromatic color system based on the app’s MUI primary theme color. Build visual hierarchy with tonal variations of this hue and neutral grays for inactive or secondary elements. Avoid multicolor palettes or primary/secondary schemes.
-
Use Solar Bold Dualtone icons from Iconify as the primary icon set. The icon names will be like
solar:<icon_type>-bold-duotone
-
To move files, use and execute the powershell command:
Move-Item -LiteralPath <oldpath> -Destination <newpath> -
To rename files, use and execute the powershell command:
Rename-Item -LiteralPath <oldname> -NewName <newname> -
To delete files, use and execute the powershell command:
Remove-Item -LiteralPath <path> -
Use npm commands instead of npx for running scripts. For example, use
npm run lintinstead ofnpx eslint .. If there is no corresponding npm script, create it before running the command. This ensures consistency and allows for easier debugging and maintenance.
This project is maintained by a solo developer focused on building small-scale, form-heavy SaaS applications. These apps are not enterprise-scale or performance-critical — the focus is on shipping quickly, looking great, and being easy to maintain long-term.