Syncfusion Dashboard

Overview 👓

Source code of the Syncfusion Dashboard An all-in-one dashboard with functionality only for the frontend.

Features ✨✨✨

The features of Syncfusion Dashboard are -
⭐ Display User Dashboard based pages:
👨‍🏫 Ecommerce/Homepage: Overview of financial expenses and earnings
👨‍🏫 Orders: keep track of clients' orders
👨‍🏫 Employees: keep track of employees statuses
👨‍🏫 Customers: user is able to keep track of clients' information
👨‍🏫 Navbar for managing carts, messages, notifications, and user information

⭐ Display various interactive applications (non-backend):
📆 Calendar
✅ Kanban
📃 Word Editor
🎨 Color Picker

⭐ Display various interactive demos of charts and graphs:
📊 Line
📊 Area
📊 Bar
📊 Pie
📊 Financial
📊 Color-Mapping

Optimizations 🔧🔧🔧

⚙ If scaling the application, and implementing more global contexts, it is best to provide different Providers and memoize them in order to improve performance and reduce the rerendering of data with every interaction of the webpage. ex) closing and opening sidebar and rerendering the entire global context state.

⚙ Although this is a front-end demo application, it can be a CRUD when adding a backend server and database

⚙ Earnings section and theme settings can not sync with switch between light and dark modes.

If you like to contribute any features, fix bugs, or optimize a current feature, my contact information is listed bellow the readme.md 😃

Dependencies 📦📦📦

The list of dependencies used in the frontend are :

'@syncfusion/ej2': version : '^19.4.48'
'@syncfusion/ej2-react-calendars': version : '^19.4.48'
'@syncfusion/ej2-react-charts': version : '^19.4.50'
'@syncfusion/ej2-react-dropdowns': version : "'19.4.52'
'@syncfusion/ej2-react-grids': version : '^19.4.50'
'@syncfusion/ej2-react-inputs': version : '^19.4.52'
'@syncfusion/ej2-react-kanban': version : '^19.4.48'
'@syncfusion/ej2-react-popups': version : '^19.4.52'
'@syncfusion/ej2-react-richtexteditor': version : '^19.4.50'
'@syncfusion/ej2-react-schedule': version : '^19.4.50'
'react-icons'
'react-router-dom'
'typescript'

The list of dependencies used for code quality and test are :

'@typescript-eslint/eslint-plugin'
'@typescript-eslint/parser'
'autoprefixer'
'eslint'
'eslint-config-airbnb'
'eslint-config-airbnb-typescript'
'eslint-config-prettier'
'eslint-plugin-import'
'eslint-plugin-jsx-a11y'
'eslint-plugin-react'
'eslint-plugin-react-hooks'
'lint-staged'
'postcss'
'prettier'
'tailwindcss'

How to run 🚀🚀🚀

First, copy the url of this project
Then open your terminal on your local computer and -
- navigate to the location you want to create the project in (eg - home or c:/)
- enter the command git clone <url-of-this-project>. Alternatively, you can provide the name of the folder you want git to clone the project to with git clone <url-of-this-project> <name-of-folder>
- cd into the project folder


npm install
npm start

Lessons Learned 🏫🏫🏫

✅ exporting import defaults using index.tsx @pages & @components
✅ ctrl/cmd + w => to close current tabs on VS Code
✅ ctrl + ▶ => move to next whitespace
✅ resolving ts module errors using index.d.ts
✅ Context TS Types => PropsWithChildren
✅ The object passed as the value prop to the Context provider (at line 29) changes every render. To fix this consider wrapping it in a useMemo hook. => useMemo to avoid rerender when the values haven't been changed
✅ using eventListeners to determine mobile resizing or if browser resizes ('resize', window.innerWidth)

Where to find more 📞💻📧

Personal Website: https://markrasavong.com/
Syncfusion Dashboard Repository: https://github.com/MarkRasavong/syncfusionDash
My Github Repositories: https://github.com/MarkRasavong?tab=repositories
Email: rasavong.mark@gmail.com
Mobile / WhatsApp: +34 666 996 519

drazomo / syncfusionDash