Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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!
https://github.com/sonht113/react-boilerplate-for-starter

axios eslint husky material-ui prettier react react-router-dom tailwindcss tanstack-react-query typescript vite

Last synced: 3 days ago
JSON representation

๐Ÿš€โšกโšก๐Ÿ‘ฝ 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!

Awesome Lists containing this project

README

        

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


React js starter banner

๐Ÿš€๐Ÿš€๐Ÿš€ 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](https://nextjs.org) project.

### Features

- โšก [React.js](https://react.dev/)
- โšก [Material-UI](https://mui.com/)
- ๐Ÿ”ฅ Type checking [TypeScript](https://www.typescriptlang.org)
- ๐Ÿ’Ž Integrate with [Tailwind CSS](https://tailwindcss.com)
- โœ… Strict Mode for TypeScript and React 18
- ๐Ÿ“ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
- ๐Ÿ’– Code Formatter with [Prettier](https://prettier.io)
- ๐ŸฆŠ 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:

```shell
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:

```shell
pnpm run dev
```

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

```shell
.
โ”œโ”€โ”€ 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](https://www.facebook.com/profile.php?id=100032736788526&locale=vi_VN)