This project using Next.js, MUI, and TailwindCSS.
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3001 with your browser to see the result.
CSS TailwindCSS V3: A utility-first CSS framework you can use className to create your UI as much as you can.
- More info: https://tailwindcss.com/
Components MUI V5: React UI framework
- More info: https://mui.com/
-
Folder components Pascal case ex. Layout
-
Folder Pages Kebab case ex. process
-
Page files Kebab case ex. dashboard.tsx
-
File Typescript Kebab case ex. endpoint.ts
-
Constant name Uppercase ex. RESOLVER, LANGUAGES
AMP(Application Message Platform) prefix use for the component that already has in MUI but you need to custom(for reuseable with the same style). The purpose is to avoid confusion when developers use or import it. Example Button => AMPButton
If you want to custom style of MUI components you can try to customize MUI by using createTheme() src: \src\styles\theme\index.ts
More info: https://mui.com/customization/theming/
-
@tanstack/react-query React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
-
@tanstack/react-table TanStack Table is a Headless UI library for building powerful tables & datagrids.
-
formik Getting values in and out of form state, validation and error messages, handling form submission
-
yup Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformation.
To help lint your code you can use these extensions:
- (ESLint) dbaeumer.vscode-eslint
- (Prettier - Code formatter) esbenp.prettier-vscode
In VSC Press: ctrl + shift + p Open setting file by typing: Open Preference: Open User Setting (JSON) Add configs below to setting file
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true },
- ESlint not working with this project.
npm i eslint
- Line sequence problem : Files got error with CRLF because in Windows set file CRLF by default.
Set autocrlf to fault in your machine.
-
In cmd, run git config --global core.autocrlf false
-
Remove this repo from your local machine, then clone again. It sets LF by default.