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-grid
layout ofmaterial ui
... - path name become selected menu item, after refresh also...
- user input form validation
yup
checking... - phone number regex pattern from input string...
- usage of
react-pro-sidebar@0.7.1
with itscss
... - usage of
full-calendar
library... - usage of
nivo chart
system... - 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 react-pro-sidebar@0.7.1 |
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