- Name: Laptech UI Administrator System
- Author: Nhật Phi Võ
- Collaborator: Quang Sang Nguyễn
- Main tech: Webpack, ReactJS, Redux, Bootstrap, React-table
- Install this project in zip and unzip it, or just clone with git
- Open project with your IDE (I recommend Visual Studio Code)
- Open Terminal in root folder and run
npm install - Run project with command
npm start
NOTE: This project need to run with api in server. You can find here
OPTION: You can build with npm run build and use file in folder build
- public
- resources
- src
apisassetscomponentsconfighookspagesroutesservicesstorestylesutilsApp.jsxindex.js
.editorconfig.gitignore.package.json
| package | type | description |
|---|---|---|
| react | main - ui |
main ui build and control |
| react-dom | main - ui |
render ui in browser |
| react-router-dom | main - router |
navigate and routing |
| react-redux | main - manager |
state managerment instead of React |
| @reduxjs/toolkit | support - manager | create slide for redux |
| bootstrap | main - ui - css |
css library of bootstrap |
| react-bootstrap | main - ui - framework |
using Component of bootstrap in React |
| bootstrap-icons | main - ui - icon |
using icons of bootstrap |
| @popperjs/core | main - support |
using bootstrap js bundle |
| lodash | option - support | a lots of function deal with array and object |
| react-hook-form | option - system | create validation for form |
| react-day-picker | option - support | select date-time Component |
| react-bootstrap-typeahead | option - support | select Component with bootstrap base |
| react-select | option - support | Select Component with multiple choice and more features |
| react-quill | option - system | build basic text editor |
| react-table | option - system | support build table with filter, sort, paging and more... |
| react-toastify | option - system | create notification |
| chart.js | option - system | build figures with image |
| react-chartjs-2 | option - system | support Chart Component in React |
| classnames | option - system | make string form multiple objects for option className |
| jwt-decode | option - system | decode jwt token to handle information |
| package | type | description |
|---|---|---|
| @babel/core | main - convert | |
| @babel/preset-env | main - build | |
| @babel/preset-react | main - build | |
| babel-loader | main - build | |
| html-webpack-plugin | webpack - build |
|
| css-loader | webpack - build |
|
| sass-loader | webpack - build |
|
| style-loader | webpack - build |
|
| webpack | webpack - main |
|
| webpack-cli | webpack - support |
|
| webpack-dev-server | webpack - support |
|
| prettier | main - format | |
| eslint-config-prettier | support - format | |
| eslint-plugin-prettier | support - inspect | |
| jest | test - main | |
| babel-jest | test - build | |
| react-test-renderer | test - React |
