X-boilerplate

X-boilerplate copied to clipboard

Warning This boilerplate is a work in progress.

Live Demo

📚 Documentation (WIP) - 🚀 Getting Started (WIP) - 🎉 Development (WIP)

Core Features

• ⚡️ React 18, Next 15, pnpm - born with fastness

• 🗂 Structure with paths and alias

• 💅 Code formatter with prettier and Find and fix problems via eslint

• 🪝 husky

• 🦾 TypeScript, of course

• 💄 Unstyled - The frontend contains minimal css styling just the demo.

• ⚙️ Adjustable to your preferences - Designed to be modular so you can fine-tune it to your preferences

Optional Features

• 🍍 Asynchronous state management - TanStack Query and State Management zustand

• 🛡️ Authentication authjs

• 💸 Payments stripe

• ✉️ Send emails with Resend and @react-email

• 🐂 Internationalization with next-intl

• 💩 Tests unit with vitest and Tests e2e with playwright

• 📄 react-hook-form - Forms with easy-to-use validation

• 💎 Zod - TypeScript-first schema validation with static type inference.

• ❤️ Lint commit messages via commitlint

Roadmap

Many of this boilerplate features are based on the philosophy of being optional. We understand that every project or product is unique and, therefore, requires different settings and functionalities. We provide you with the freedom to choose the features that best fit your needs so you can only focus on building your product.

• [x] ~Configure next 14 with new /app dir~
• [x] ~Integrate State Management TanStack Query~
• [x] ~Integrate react-hook-form~
• [x] ~Integrate Zod to schema validation~
• [x] ~Authentication (next-auth)~
• [x] ~Integrate linters, hooks to DX~
• [x] ~Integrate resend~
• [x] ~Integrate @react-email~
• [x] ~Setup tests with vitest~
• [x] Setup test with vitest and playwright
• [x] Added test all components
• [x] ~More examples with resend and @react-email~
• [x] Integrate ORM prisma
• [x] Integrate supabase
• [x] Integrate planetscale
• [x] Mocking via msw
• [x] ~Integrate stripe to payments~
• [x] Add MDX support for basic pages
• [x] Add OG image for blog using @vercel/og
• [x] ~Integrate https://tailwindcss.com/~
• [x] ~Integrate https://www.radix-ui.com/~
• [x] Dark mode
• [x] Integrate graphql
• [x] Do cli to configure all functions

Dev tools

• TypeScript

• pnpm- fast, disk space efficient package manager.

• msw - API mocking of the next generation.

• commitlint - Lint commit messages.

• husky - Husky improves your commits and more 🐶 woof!.

• VS Code Extensions

  • Prettier - Code formatter using prettier.
  • Formatting Toggle - You to toggle formatting settings ON and OFF.
  • ESLint