https://github.com/karpolan/react-mui-vite-ts

Starter project for Vite with React + MUI using TypeScript
https://github.com/karpolan/react-mui-vite-ts

components jest jsx material-ui mui react reactjs testing-library ts typescript vite vitejs vitest

Last synced: 9 days ago
JSON representation

Starter project for Vite with React + MUI using TypeScript

• Host: GitHub
• URL: https://github.com/karpolan/react-mui-vite-ts
• Owner: karpolan
• Created: 2024-04-30T16:34:21.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-12-09T12:47:47.000Z (about 1 month ago)
• Last Synced: 2025-01-09T22:33:18.542Z (12 days ago)
• Topics: components, jest, jsx, material-ui, mui, react, reactjs, testing-library, ts, typescript, vite, vitejs, vitest
• Language: TypeScript
• Homepage: https://react-mui-vite-ts.netlify.app/
• Size: 605 KB
• Stars: 31
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Starter project for Vite with React + MUI using TypeScript

Mix of [npm create vite](https://vitejs.dev/guide/) and [MUI](https://mui.com) with set of reusable components

and utilities to build professional React application faster.

- [Source Code](https://github.com/karpolan/react-mui-vite-ts)

- [Online Demo](https://react-mui-vite-ts.netlify.app)

Includes:

- **Prettier** for code formatting

- **Eslint** for error checking

- **Vitest** (or **Jest**) with **Testing Library** for testing components and hooks

- Set of common **components**, useful **hooks**, and essential **utilities**

- State management using **Context API**

- Different and customized **Public** and **Private** layouts

- Basic **authentication** hooks and events

- **Dark** and **Light** mode with a toggle

- FavIcon and Manifest for **PWA**

## How to use

1. Clone or download the repo from: https://github.com/karpolan/react-mui-vite-ts

2. Copy `.env.example` file into `.env` file

3. Replace `_TITLE_` and `_DESCRIPTION_` in all files with own texts

4. Check and resolve all `// TODO: ` directives

5. Add your own code :)

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.

### `npm run lint`

Checks the code for errors and missing things

### `npm run format`

Formats the code according to `./prettier.config.mjs` config

### `npm test`

Launches the test runner in the interactive watch mode.


### `npm run build`

Builds the app for production or local development to the `dist` folder.