DEV Community

Cover image for ๐Ÿš€ React Boilerplate with TypeScript and Tailwind CSS for 2021
Remi W.
Remi W.

Posted on

11 5

๐Ÿš€ React Boilerplate with TypeScript and Tailwind CSS for 2021

Recently, I've built several projects in React with Next JS. For each projects, I was setting up the same dependencies again and again. So, I thought it could be great a boilerplate for 2021 and share it to the community.

Built with developer-first in mind with tools to improve productivity like ESLint linter, Prettier code formatter and VSCode configuration. Built for 2021 with Next JS and Tailwind CSS. Finally, build for production with one-click deployment and with SEO-ready.

You can check a live demo at this url : React Boilerplate with TypeScript and Tailwind CSS

You can also check the source code on GitHub: React Boilerplate GitHub

Already more than 400+ โญ stars on Github...

GitHub logo ixartz / Next-js-Boilerplate

๐Ÿš€๐ŸŽ‰๐Ÿ“š Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.4 and TypeScript โšก๏ธ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Drizzle ORM + Husky + Lint-Staged + Vitest + Testing Library + Playwright + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS โœจ

Boilerplate and Starter for Next.js 14+, Tailwind CSS 3.4, and TypeScript.

Next js starter banner

๐Ÿš€ Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript โšก๏ธ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with Sentry, Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more. Ready for Next.js 15.

Clone this project and use it to create your own Next.js project. You can check out the live demo at Next.js Boilerplate, which includes a working authentication system.

Sponsors

Demo

Live demo: Next.js Boilerplate














Sign Up Sign In
Next.js Boilerplate SaaS Sign Up Next.js Boilerplate SaaS Sign In

Features

Developer experience first, extremely flexible code structure and only keep what you need:

Here is the features:

  • ๐Ÿ”ฅ Instant feedback with Next JS

  • ๐Ÿš€ Routing with Next JS

  • ๐Ÿ’… Styled with Tailwind CSS

  • โœ๏ธ Linter with ESLint and Code formatter with Prettier

  • ๐ŸŽ‰ Type checking with Typescript

  • โœ… One-click deploy on Vercel or Netlify

  • ๐Ÿค– SEO friendly

  • ๐Ÿš€ Production-ready

GitHub logo ixartz / Next-js-Boilerplate

๐Ÿš€๐ŸŽ‰๐Ÿ“š Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.4 and TypeScript โšก๏ธ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Drizzle ORM + Husky + Lint-Staged + Vitest + Testing Library + Playwright + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS โœจ

Boilerplate and Starter for Next.js 14+, Tailwind CSS 3.4, and TypeScript.

Next js starter banner

๐Ÿš€ Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript โšก๏ธ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with Sentry, Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more. Ready for Next.js 15.

Clone this project and use it to create your own Next.js project. You can check out the live demo at Next.js Boilerplate, which includes a working authentication system.

Sponsors

Demo

Live demo: Next.js Boilerplate














Sign Up Sign In
Next.js Boilerplate SaaS Sign Up Next.js Boilerplate SaaS Sign In

Features

Developer experience first, extremely flexible code structure and only keep what you need:





Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools canโ€™t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay