{"id":20036463,"url":"https://github.com/taiseen/react-admin-dashboard-material-ui","last_synced_at":"2025-05-05T05:31:52.487Z","repository":{"id":63405630,"uuid":"567016834","full_name":"taiseen/react-admin-dashboard-material-ui","owner":"taiseen","description":"React Material UI Admin Dashboard - Static | EdRoh","archived":false,"fork":false,"pushed_at":"2022-12-13T20:13:30.000Z","size":403,"stargazers_count":12,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T18:38:47.801Z","etag":null,"topics":["admin-dashboard","edroh","formik","full-calendar","material-ui","netlify","netlify-deployment","nivo-charts","react-js","react-pro-sidebar","react-router-dom","redirects","vite","yup-validation"],"latest_commit_sha":null,"homepage":"https://react-adb-mui.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taiseen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-16T22:26:26.000Z","updated_at":"2024-12-09T22:01:18.000Z","dependencies_parsed_at":"2023-01-28T14:47:10.143Z","dependency_job_id":null,"html_url":"https://github.com/taiseen/react-admin-dashboard-material-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-admin-dashboard-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-admin-dashboard-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-admin-dashboard-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-admin-dashboard-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taiseen","download_url":"https://codeload.github.com/taiseen/react-admin-dashboard-material-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252446459,"owners_count":21749239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","edroh","formik","full-calendar","material-ui","netlify","netlify-deployment","nivo-charts","react-js","react-pro-sidebar","react-router-dom","redirects","vite","yup-validation"],"created_at":"2024-11-13T10:12:41.728Z","updated_at":"2025-05-05T05:31:51.182Z","avatar_url":"https://github.com/taiseen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 17 Nov 2022\n\n# React Admin Dashboard | [Live Link][hostedLink]\n\n\n## Technology used\n1. React\n2. Material UI \n3. Formik\n4. Yup\n5. Nivo chart\n6. Full-calendar\n7. React-Pro-Sidebar\n\n\n\n### This application consists of \n* Light \u0026 Dark Mode\n* Dashboard Summary\n* 3 Different Data Table Pages\n* User Input Form Page  \n* Calendar Integration\n* FAQ Page\n* 4 Different Charts\n\n\n\n## Learning Context\n* ...spread operator + conditional base object property loading at theme level\n* introduce with css tool ==\u003e [Pesticide][link]\n* by array of object{text,icon}, construct side-menu\n* row-column material-ui layout data display...\n* usage of `data-grid` layout of `material ui`...\n* path name become selected menu item, after refresh also...\n* user input form validation `yup` checking...\n* phone number regex pattern from input string...\n* usage of `react-pro-sidebar@0.7.1` with its `css`...\n* usage of `full-calendar` library...\n* usage of `nivo chart` system...\n* migrate experience from Vite to React, \n    * because Vite have some issus with full-calendar lib...\n\n\n\n## Yarn base packages/lib...\n|No | Packages Name                    | Description      |\n|---|----------------------------------|------------------|\n|01 |yarn add `react-router-dom`       | URL Navigation   |\n|02 |yarn add `react-pro-sidebar@0.7.1`| React Pro Sidebar|\n|03 |yarn add `formik`                 | Form Elements    |\n|04 |yarn add `yup`                    | Form Validations |\n|05 |yarn add `@mui/material`          | [Material UI][mui] |\n|06 |yarn add `@emotion/react`         | [Material UI][mui] |\n|07 |yarn add `@emotion/styled`        | [Material UI][mui] |\n|08 |yarn add `@emotion/styled`        | [Material UI][mui] |\n|09 |yarn add `@mui/x-data-grid`       | [Material UI][mui] |\n|10 |yarn add `@mui/icons-material`    | [Material UI][mui] |\n|11 |yarn add `@fullcalendar/core`       | [Full Calendar][📆] 📆 |\n|12 |yarn add `@fullcalendar/daygrid`    | [Full Calendar][📆] 📆 |\n|13 |yarn add `@fullcalendar/timegrid`   | [Full Calendar][📆] 📆 |\n|14 |yarn add `@fullcalendar/list`       | [Full Calendar][📆] 📆 |\n|15 |yarn add `@fullcalendar/interaction`| [Full Calendar][📆] 📆 |\n|16 |yarn add `@fullcalendar/react`      | [Full Calendar][📆] 📆 |\n|17 |yarn add `@nivo/core`             | [Nivo Chart][📈] 📈 |\n|18 |yarn add `@nivo/pie`              | [Nivo Chart][📈] 📈 |\n|19 |yarn add `@nivo/bar`              | [Nivo Chart][📈] 📈 |\n|20 |yarn add `@nivo/line`             | [Nivo Chart][📈] 📈 |\n|21 |yarn add `@nivo/geo`              | [Nivo Chart][📈] 📈 |\n\n\u003cbr /\u003e\n\n## File \u0026 Folder Hierarchy\n\n```\n🟨\nsrc\n├── components\n|   ├── BarChart.jsx\n|   ├── GeographyChart.jsx\n|   ├── Header.jsx\n|   ├── index.js\n|   ├── LineChart.jsx\n|   ├── PieChart.jsx\n|   ├── ProgressCircle.jsx\n|   └── StatBox.jsx\n|\n├── constants\n|   ├── contactsColumns.js\n|   ├── faq.js\n|   ├── inputFormFields.js\n|   ├── inputFormValues.js\n|   ├── invoicesColumns.js\n|   ├── mockData.js\n|   ├── mockGeoFeatures.js\n|   ├── sidebarMenu.js\n|   └── teamColumns.js\n|\n├── pages\n|   |   Dashboard.jsx\n|   |   index.js\n|   |\n|   ├── charts\n|   |   ├── Bar.jsx\n|   |   ├── Geography.jsx\n|   |   ├── Line.jsx\n|   |   └── Pie.jsx\n|   |\n|   ├── global\n|   |   ├── SidebarMenu.jsx\n|   |   ├── SidebarMenuItem.jsx\n|   |   └── Topbar.jsx\n|   |\n|   ├── info\n|   |   ├── Contacts.jsx\n|   |   ├── Invoices.jsx\n|   |   └── Team.jsx\n|   |\n|   └── inputs\n|       ├── Calendars.jsx\n|       ├── FAQ.jsx\n|       └── InputForm.jsx\n|\n├── styles\n|   ├── index.css\n|   └── theme.js\n|\n├── App.jsx\n└── index.js\n🟨\n```\n\n```\ntree /f\n```\n\n\n[📈]: https://nivo.rocks\n[📆]: https://fullcalendar.io\n[hostedLink]: https://react-adb-mui.netlify.app\n[mui]: https://mui.com/material-ui/getting-started/installation\n[link]: https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi\n\n\u003c!-- \nhttps://youtu.be/EBCdyQ_HFMo \n--\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiseen%2Freact-admin-dashboard-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaiseen%2Freact-admin-dashboard-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiseen%2Freact-admin-dashboard-material-ui/lists"}