wootsbot / x-boilerplate

🪂 X-boilerplate a starting boilerplate with configuration and best practices for your Nextjs projects, so you can only focus on building your product.

Warning This boilerplate is a work in progress.

_{We spend time using good community practices to make your project scalable.}

Live Demo

Core Features

• ⚡️ React 18, Next 13, 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

• 🍍 State Management x-state or State Management TanStack Query

• 🔥 Mocking via msw

• 🛡️ Authentication for Next.js NextAuth

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

• 🐂 Internationalization with react-i18next (SSG)

• 💩 Tests with vitest and playwright

• 📑 Finite state machines

• 📄 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.

• Configure next 13 with new /app dir
• Integrate State Management x-state
• Integrate State Management TanStack Query
• Integrate react-hook-form
• Integrate Zod to schema validation
• Authentication (next-auth)
• Integrate linters, hooks to DX
• Integrate resend
• Integrate @react-email
• Internationalization with react-i18next (SSG)
• Setup tests with vitest
• Setup test with vitest and playwright
• Added test all components
• More examples with resend and @react-email
• Integrate ORM prisma
• Integrate supabase
• Integrate planetscale
• Mocking via msw
• Integrate SDK to Subscriptions
• Add MDX support for basic pages
• Add OG image for blog using @vercel/og
• Integrate https://tailwindcss.com/
• Integrate https://mui.com/
• Integrate https://www.radix-ui.com/
• Integrate https://chakra-ui.com/
• Dark mode
• Integrate graphql
• 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