Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/karpolan/react-mui-pro-starter

[IMPORTANT] - better use Vite starter https://github.com/karpolan/react-mui-vite-ts instead of this "Create React App + Material UI" starter
https://github.com/karpolan/react-mui-pro-starter

create-react-app dark-mode material-design material-ui night-mode no-redux react react-project react-starter reactjs state-management

Last synced: 12 days ago
JSON representation

[IMPORTANT] - better use Vite starter https://github.com/karpolan/react-mui-vite-ts instead of this "Create React App + Material UI" starter

Awesome Lists containing this project

README

        

# IMPORTANT UPDATE 2024-05-01

Better use [Vite + React + MUI starter](https://github.com/karpolan/react-mui-vite-ts) instead of this one.

Reasons:
- [Create React App](https://create-react-app.dev/) is **not popular** anymore.
- **TypeScript** is more predictable than JavaScript for React application development and maintenance.
- Development and debugging using **[Vite](https://vitejs.dev/)** is 10x faster than with Webpack.

# React + Material UI Professional starter

Mix of [Create React App](https://github.com/facebook/create-react-app) and [Material UI](https://mui.com) with set of reusable components and utilities to build professional React Application faster.

- [Source Code](https://github.com/karpolan/react-mui-pro-starter)
- [Online Demo](https://react-mui-pro-starter.netlify.app/)

## How to use

1. Clone or download the repo from: https://github.com/karpolan/react-mui-pro-starter
2. Copy `env.sample` to `.env`, or at least set `env.REACT_APP_LOG_LEVEL` = `DEBUG` | `INFO` | `WARN` | `ERROR` variable
3. Replace `_TITLE_` and `_DESCRIPTION_` in all files with own texts
4. Create **Favorite Icon** images and put them into `/public/img/favicon`, the **favicon.ico** file should be paced into root of `/public` folder.
5. Add your own code :)

## Available Scripts

In the project directory, you can run:

### `npm start` or `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 `./prettierrc.js` config

### `npm test`

Launches the test runner in the interactive watch mode.

See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

## Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

### `npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify