Enterprise Grade React Stack & Design Philosophy, For Building Great Apps On Cutting Edge Tech
Note: The technologies used in this stack are just as is and can change as the indurstry evolves, and herein their peer dependencies are not included here. Also the stack might be opinionated and might not fit every situation, no one size fits all, it's better you evaluate per your use case, otherwise I have used it and many people are using it to build great apps, just they might be calling it differently or not branding it at all.
- Frontend: Next Js, Typescript, Tailwind CSS (Shadcn UI)
- Backend: Supabase (Postgres Database, File Storage, Auth)
- Package Manager: Pnpm
- Prototyping: Figma
- Axios -- API Requests
- Next PWA -- Progressive Web App
- Open Props -- CSS Variable Tokens
- Orama -- search
- Zod -- form validations
- React Hands -- state management
- Headless UI -- for building custom accesible components
- Auto Animate -- animating dynamic views
- React Hook Form -- form state
- Recharts, Tremor -- data visualization
- React Toastify -- toasts & alerts ???
- Next SEO -- seo package
- Nanoid -- unique id generation
- React Icons -- icons (hero icons,box icons)
- React Query -- data fetching
- React Hook Libraries (react use, react recipes, usehooks)
- Tailwind Plugins (aspect-ratio, forms, typography and line clamp)
- Tailwind CSS -- CSS framework
- Shadcn UI -- main ui guideline (tailwind animate, clsx, cva, tailwind merge, radix ui)
- Eslint (Next js Defaults)
- Prettier (With Tailwind Plugin To Auto Sort Classes)
- Husky, Commit Lint, Lint Staged (Conventional Commits)
- change of components classes hover-settings, icon-interaction to new ones used in global.css as hover-styles and icon-hover