17 Nov 2022
React Admin Dashboard | Live Link
- React
- Material UI
- Formik
- Yup
- Nivo chart
- Full-calendar
- React-Pro-Sidebar
- Light & Dark Mode
- Dashboard Summary
- 3 Different Data Table Pages
- User Input Form Page
- Calendar Integration
- FAQ Page
- 4 Different Charts
- ...spread operator + conditional base object property loading at theme level
- introduce with css tool ==> Pesticide
- by array of object{text,icon}, construct side-menu
- row-column material-ui layout data display...
- usage of
data-gridlayout ofmaterial ui... - path name become selected menu item, after refresh also...
- user input form validation
yupchecking... - phone number regex pattern from input string...
- usage of
[email protected]with itscss... - usage of
full-calendarlibrary... - usage of
nivo chartsystem... - migrate experience from Vite to React,
- because Vite have some issus with full-calendar lib...
| No | Packages Name | Description |
|---|---|---|
| 01 | yarn add react-router-dom |
URL Navigation |
| 02 | yarn add [email protected] |
React Pro Sidebar |
| 03 | yarn add formik |
Form Elements |
| 04 | yarn add yup |
Form Validations |
| 05 | yarn add @mui/material |
Material UI |
| 06 | yarn add @emotion/react |
Material UI |
| 07 | yarn add @emotion/styled |
Material UI |
| 08 | yarn add @emotion/styled |
Material UI |
| 09 | yarn add @mui/x-data-grid |
Material UI |
| 10 | yarn add @mui/icons-material |
Material UI |
| 11 | yarn add @fullcalendar/core |
Full Calendar 📆 |
| 12 | yarn add @fullcalendar/daygrid |
Full Calendar 📆 |
| 13 | yarn add @fullcalendar/timegrid |
Full Calendar 📆 |
| 14 | yarn add @fullcalendar/list |
Full Calendar 📆 |
| 15 | yarn add @fullcalendar/interaction |
Full Calendar 📆 |
| 16 | yarn add @fullcalendar/react |
Full Calendar 📆 |
| 17 | yarn add @nivo/core |
Nivo Chart 📈 |
| 18 | yarn add @nivo/pie |
Nivo Chart 📈 |
| 19 | yarn add @nivo/bar |
Nivo Chart 📈 |
| 20 | yarn add @nivo/line |
Nivo Chart 📈 |
| 21 | yarn add @nivo/geo |
Nivo Chart 📈 |
🟨
src
├── components
| ├── BarChart.jsx
| ├── GeographyChart.jsx
| ├── Header.jsx
| ├── index.js
| ├── LineChart.jsx
| ├── PieChart.jsx
| ├── ProgressCircle.jsx
| └── StatBox.jsx
|
├── constants
| ├── contactsColumns.js
| ├── faq.js
| ├── inputFormFields.js
| ├── inputFormValues.js
| ├── invoicesColumns.js
| ├── mockData.js
| ├── mockGeoFeatures.js
| ├── sidebarMenu.js
| └── teamColumns.js
|
├── pages
| | Dashboard.jsx
| | index.js
| |
| ├── charts
| | ├── Bar.jsx
| | ├── Geography.jsx
| | ├── Line.jsx
| | └── Pie.jsx
| |
| ├── global
| | ├── SidebarMenu.jsx
| | ├── SidebarMenuItem.jsx
| | └── Topbar.jsx
| |
| ├── info
| | ├── Contacts.jsx
| | ├── Invoices.jsx
| | └── Team.jsx
| |
| └── inputs
| ├── Calendars.jsx
| ├── FAQ.jsx
| └── InputForm.jsx
|
├── styles
| ├── index.css
| └── theme.js
|
├── App.jsx
└── index.js
🟨
tree /f
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent