Bo-admin-starter NPM

bo-admin-starter

:smiley: 블록오디세이를 위한 React 관리자 Boilerplate v3입니다. :smiley:
:bangbang: 프로젝트 설치 방법 & 사용 설명서 :bangbang:

Project Main Features

UI COMPONENT : MUI
HTTP CLIENT : axios
SERVER STATE DATA MANAGEMENT : react-query
ROUTING AND NAVIGATION : react-router-dom
STATE MANAGEMENT : @reduxjs/toolkit
FORM : react-hook-form
FORM VALIDATION : yup
TYPE CHECK : prop-types
DEVELOPMENT : @redux-devtools/extension

Project Extra Features

Cookie : react-cookie
Chart : react-chartjs-2
Editor : @toast-ui/react-editor
CSV : react-csv
Select : react-select
Fake JSON Data : jsonplaceholder

Menu / Page

404
Login
Change Password
Change Info
Dashboard
- Dashboard Detail
- Dashboard Upload
- Dashboard Edit
CSV
- React CSV 데모 + Fake Json Data from https://jsonplaceholder.typicode.com
Editor
- Toast UI Editor 데모
Chart
- LineChart
- PieChart
- BubbleChart
- Doughnut Chart
- Stacked Bar Chart
- Vertical Bar Chart

데모 확인하기

Project Installation

:fire: npm i bo-admin-starter 명령어를 사용하면 프로젝트가 정상적으로 설치되지 않습니다. :fire:

Getting Started

Install Dependencies

Project Run

사용방법

notion 페이지를 참고해주세요.

Project Structure

.
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── api
    │   └── index.js
    ├── app
    │   ├── App.js
    │   ├── rootReducer.js
    │   └── store.js
    ├── components
    │   ├── Buttons
    │   │   ├── DefaultButton.js
    │   │   ├── LinkButton.js
    │   │   ├── SubmitButton.js
    │   │   └── index.js
    │   ├── Carousels
    │   │   ├── Image.js
    │   │   ├── UploadImage.js
    │   │   └── index.js
    │   ├── Charts
    │   │   ├── BarChart.js
    │   │   ├── BubbleChart.js
    │   │   ├── DoughnutChart.js
    │   │   ├── LineChart.js
    │   │   ├── PieChart.js
    │   │   ├── StackedBarChart.js
    │   │   └── index.js
    │   ├── FormInputs
    │   │   ├── CheckBox.js
    │   │   ├── DatePicker.js
    │   │   ├── ErrorMessage.js
    │   │   ├── Input.js
    │   │   ├── RadioButton.js
    │   │   ├── Select.js
    │   │   └── index.js
    │   ├── Modals
    │   │   ├── ConfirmModal.js
    │   │   ├── DetailModal.js
    │   │   ├── ImageModal.js
    │   │   ├── MessageModal.js
    │   │   ├── ProgressModal.js
    │   │   └── index.js
    │   ├── Pagination
    │   │   └── index.js
    │   ├── ScrollToTop
    │   │   └── index.js
    │   ├── Search
    │   │   └── index.js
    │   ├── SearchInputs
    │   │   ├── DatePicker.js
    │   │   ├── DateTermButton.js
    │   │   ├── SearchCheckbox.js
    │   │   ├── SearchField.js
    │   │   ├── SearchRadio.js
    │   │   ├── SearchSelect.js
    │   │   └── index.js
    │   ├── Skeletons
    │   │   ├── Table.js
    │   │   └── index.js
    │   ├── Table
    │   │   └── index.js
    │   ├── TableLoader
    │   │   └── index.js
    │   ├── ToastUIEditor
    │   │   └── index.js
    │   ├── UploadImage
    │   │   └── index.js
    │   └── index.js
    ├── configs
    │   ├── form.js
    │   ├── menu.js
    │   ├── search.js
    │   └── table.js
    ├── constants
    │   └── messages.js
    ├── dummy
    │   └── index.js
    ├── hooks
    │   ├── index.js
    │   ├── useGetById.js
    │   ├── useGetList.js
    │   ├── useGetRouteInfo.js
    │   ├── useMenu.js
    │   ├── useMessage.js
    │   ├── usePageExit.js
    │   ├── useSearch.js
    │   ├── useSearchParams.js
    │   └── useTimeout.js
    ├── index.js
    ├── layouts
    │   ├── Header
    │   │   └── index.js
    │   ├── Layout.js
    │   ├── PageButton
    │   │   └── index.js
    │   ├── PageHeader
    │   │   └── index.js
    │   ├── PageHeading
    │   │   └── index.js
    │   ├── ScrollTop
    │   │   └── index.js
    │   └── SideBar
    │       ├── components
    │       │   ├── Copyright.js
    │       │   ├── MenuItem.js
    │       │   ├── MenuList.js
    │       │   └── index.js
    │       └── index.js
    ├── pages
    │   ├── 404
    │   │   └── index.js
    │   ├── Admin
    │   │   ├── ChangeInfo.js
    │   │   └── ChangePassword.js
    │   ├── CSV
    │   │   └── index.js
    │   ├── Chart
    │   │   ├── components
    │   │   │   ├── ChartSearch.js
    │   │   │   └── Charts.js
    │   │   └── index.js
    │   ├── Dashboard
    │   │   ├── Detail.js
    │   │   ├── Edit.js
    │   │   ├── List.js
    │   │   ├── Upload.js
    │   │   └── components
    │   │       ├── DetailTable.js
    │   │       ├── Form.js
    │   │       ├── ListTable.js
    │   │       └── QuantityTable.js
    │   ├── Editor
    │   │   └── index.js
    │   └── Login
    │       ├── components
    │       │   └── LoginForm.js
    │       └── index.js
    ├── routes
    │   ├── PublicRouter.js
    │   ├── RouteWrapper.js
    │   └── Router.js
    ├── slices
    │   ├── loginSlice.js
    │   ├── menuSlice.js
    │   ├── modalSlice.js
    │   └── searchSlice.js
    ├── styles
    │   ├── customize
    │   │   ├── form
    │   │   │   └── index.js
    │   │   ├── page
    │   │   │   └── index.js
    │   │   ├── search
    │   │   │   └── index.js
    │   │   ├── select
    │   │   │   └── index.js
    │   │   └── table
    │   │       └── index.js
    │   └── theme
    │       ├── form.js
    │       ├── palette.js
    │       ├── search.js
    │       ├── textfield.js
    │       ├── theme.js
    │       └── typography.js
    └── utils
        └── common.js