sonht113 / react-boilerplate-for-starter

🚀⚡⚡👽 React boilerplate for starter with React18, Tailwind CSS v3.3.3, Material-UI and Typescript. ⚡ Made with developer experience first: Vite + React + Typescript + Eslint + Prettier + Husky + Lint-Staged + React-Router-Dom + Axios. It helps you use tanstack-react-query + axios to call api. I think it will be usefull for you!

Boilerplate and Starter for React JS 18+, Material-UI, Tailwind CSS v3.3 and Typescript

🚀🚀🚀 Boilerplate and Starter for React.js, Material-UI, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: React.js, TypeScript, Axios, ESLint, Prettier, Husky, Lint-Staged, VSCode, PostCSS, Tailwind CSS.

Clone this project and use it to create your own React.js project.

Features

• ⚡ React.js
• ⚡ Material-UI)
• 🔥 Type checking TypeScript
• 💎 Integrate with Tailwind CSS
• ✅ Strict Mode for TypeScript and React 18
• 📏 Linter with ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest

Requirements

• Node.js 16+ and pnpm

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/sonht113/react-boilerplate-for-starter.git
cd my-project-name
pnpm install

Then, you can run locally in development mode with live reload:

pnpm run dev

Open http://localhost:5173 with your favorite browser to see your project.

.
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── public                          # Public assets folder
├── src
│   ├── apis                        # Common apis folder
│   ├── components                  # Component folder
│   ├── data                        # Data constants JS Pages
│   └── features                    # Features folder
│   ├── hooks                       # Hooks customs folder
│   ├── layout                      # Layout Pages
│   └── pages                       # React JS Pages
│   ├── provider                    # Provider folder
│   └── routes                      # Routes folder
│   ├── ts                          # Type and Enum folder
│   ├── utils                       # Utility functions
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

Customization

• src/index.css: your CSS file using Tailwind CSS
• src/main.tsx: default theme

You have access to the whole code source if you need further customization. The provided code is only example for you to start your project. The sky is the limit 🚀.

---

Made with ♥ by TrongSon