Short project description
- Clone/download repo
yarn install
(ornpm install
for npm)
- React (18.x)
- Webpack (5.x)
- Typescript (5.x)
- Hot Module Replacement (HMR) + Fast Refresh
- MUI (5.x) Material UI is an open-source React component library that implements Google's Material Design.
- Image support
- Fonts support
- SASS support
- Production build script
- Code linting (ESLint) and formatting (Prettier)
Development
npm run dev
- Build app continuously (HMR enabled)
- App served @
http://localhost:3000
Production
npm run prod
- Build app once (HMR disabled) to
/build/
All commands
Command | Description |
---|---|
npm run dev |
Build app continuously (HMR enabled) and serve @ http://localhost:3000 |
npm run build:prod |
Build app once (HMR disabled) to /build/ |
npm run build:dev |
Build app to /build/ |
npm run lint |
Run linter |
npm run lint:fix |
Run linter and fix issues |
npm run prettier |
Run prettier |
npm run prettier:fix |
Run prettier and fix issues |
Note: replace npm
with yarn
in package.json
if you use yarn.
The project structure looks like this:
-
public/
: This directory containsindex.html
file that serves as the entry point for the application. -
build/
: This directory contains built project -
config
: This directory contains configuration file for Webpack -
src/
: This directory is the main source code directory.assets/
: This directory contains static assets such as images, fonts, icons, and the global styles.components/
: This directory contains React components used in the application.atomic/
: This directory contains tiny React components, like inputs, buttons, ets.base/
: This directory contains more complex React components, like forms, group of buttons, ets.
contexts/
: This directory typically contains context providers and related utility functions that manage global state or provide specific data and functionalities to components throughout the application.hooks/
: This directory is used for custom hooks, which are reusable functions that encapsulate common logic and can be shared across multiple components. Hooks enable code reuse and help simplify complex logic within functional components.layouts/
: This directory houses layout components that define the overall structure and composition of different pages or sections of your application. Layout components often include headers, footers, sidebars, or any other consistent elements across multiple pages.router/
: This directory typically contains the routing configuration and related components for client-side navigation within your application. It includes the setup of routes, route components, and any necessary navigation logic or utility functions. The router components handle rendering specific pages based on the defined routes and provide a seamless navigation experience for users.pages/
: This directory contains React components that represent components that render specific pages of your application.utils/
: This directory contains utility functions or modules that can be used across the application.App.tsx
: This file is the main application component that serves as the root of the component tree.index.tsx
: This file is the entry point for rendering the application and setting up the React DOM.
-
.eslintignore
: This file specifies the files and directories that should be ignored by ESLint -
.eslintrc.js
: This file specifies the configurations of ESLint -
.gitignore
: This file specifies the files and directories that should be ignored by Git version control. -
.prettierignore
: This file specifies the rules that should be ignored by Prettier -
.prettierrc
: This file specifies the rules of Prettier -
.gitignore
: This file specifies the files and directories that should be ignored by Git version control. -
tsconfig.json
: This file specifies the configs of Typescript -
webpack.config.ts
: Entry point for webpack config -
package.json
: This file lists the Node.js dependencies and includes scripts for various tasks such as starting the development server or building the application. -
README.md
: This file is the project documentation that provides information about the project, its structure, and instructions for getting started.