Skip to content

taiseen/react-admin-dashboard-material-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

17 Nov 2022

React Admin Dashboard | Live Link

Technology used

  1. React
  2. Material UI
  3. Formik
  4. Yup
  5. Nivo chart
  6. Full-calendar
  7. React-Pro-Sidebar

This application consists of

  • Light & Dark Mode
  • Dashboard Summary
  • 3 Different Data Table Pages
  • User Input Form Page
  • Calendar Integration
  • FAQ Page
  • 4 Different Charts

Learning Context

  • ...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 of material 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 its css...
  • 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...

Yarn base packages/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 πŸ“ˆ

File & Folder Hierarchy

🟨
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