React App showcasing SyncFusions components library created following a JS Mastery tutorial.
Link to the Deployed Site »
JS Mastery
·
SyncFusion
·
My Portfolio
Table of Contents
Dashboard application designed to showcase often-used functionalities wtihin dashboards, explore different tools for styling in React, and showcase to employers my ability to work on large scale, complex applications that are mobile friendly.
Whats cool about it:
- SyncFusion is awesome! Creating Kanban boards, drag and drop calendars, or complex data visualization usually takes forever, but SyncFusion let me utilize their cleverly built UI components to make show stopping components in a matter of moments instead of days.
- Most companies use some sort of internal tool with a dashboard functionality. This project allowed me to gain experience in quickly reaching MVP on a large scale projects.
- The dashboard is only front-end at the moment but its clean code will make adding a backend simple.
Thanks for taking a look at the readme, if you have any questions please feel free to reach out through my portfolio!
This project was built using base code provided by JS Mastery - mainly placeholder content since there isn't a backend yet. SyncFusion is used as a component library with Material UI for styling.
- React.js
- SyncFusion
- Material UI
| Component | Description |
|---|---|
| ----- src ------- | :----------------------------------------------------------------------------: |
| App | This will render the react components |
| components | Houses all components in application for streamlined architecture |
| data and contexts | Holds often called snippets such as the API call, images, and placeholder URLS |
| Pages | Holds page structures |
| -- components --- | :----------------------------------------------------------------------------: |
| components/charts | Folder containing charts that are only called inside other components |
| charts/LineChart | SyncFusion linechart component rendered in eccomerce page |
| charts/Pie | SyncFusion pie chart component rendered in pages/charts/pie page |
| charts/SparkLine | SyncFusion chart component rendered in pages/charts/pie page |
| charts/Stacked | SyncFusion chart component rendered in eccomerce page |
| Button | Reusable button component |
| Cart | Cart dropdown menu called in the navbar (Display Only) |
| ChartsHeader | Reusable header for all charts in pages folder |
| Chat | Chat dropdown menu called in the navbar (Display Only) |
| Footer | Simple footer component called below browserrouter in App.js |
| Header | Reusable header used on all pages except chart pages |
| Index.jsx | holds shorthand of all files in components folder for quick exports |
| NavBar | logo link to eccomerce, renders chat, userprofile, cart, and notification |
| Notification | Notification dropdown, displays quickview of new activity (Display Only) |
| SideBar | Displays navigation menu as quarter overlay on left side of screen |
| ThemeSettings | Displays settings menu to change theme to dark/light mode and color |
| UserProfile | UserProfile dropdown menu called in the navbar (Display Only) |
| ---- pages ----- | :----------------------------------------------------------------------------: |
| pages/charts | Folder containing charts that make up the body of one page |
| charts/Area | SyncFusion Area chart component inflation rate percentage |
| charts/Bar | SyncFusion bar graph component displays Olympic medal counts |
| charts/ColorMapping | SyncFusion line chart component rendered in as a heat average |
| charts/Financial | SyncFusion data plot component rendered as stock ticker |
| charts/Line | SyncFusion line graph component for inflation rate |
| charts/Pie | SyncFusion bar graph component project cost breakdown |
| charts/Pyramid | SyncFusion bar graph component Food calorie breakdown |
| charts/Stacked | SyncFusion bar graph component revenue breakdown(also called in ecommerce) |
| Calendar | Fully editable calendar with drag-and-drop functionality |
| ColorPicker | Two color swatches when a color is selected it changes color of pen |
| Customers | Sortable, editable(with delete or change) table of customer info |
| Ecommerce | Main dashboard page, displays quickreference info to most tables |
| Editor | Fully usable text editor |
| Employees | Searchable, sortable, editable(with delete or change) table of employee info |
| Index.jsx | holds shorthand of all files in pages folder for quick exports |
| Kanban | Jira clone kanban board. drag and drop (lacks addition or deletion as of now) |
| Orders | Sortable, editable(with delete or change) table of orders info |
| URL | HTTP Verb | Action | Description |
|---|---|---|---|
| / | GET | read | view dashboard |
| /ecommerce | GET | read | view dashboard |
| /file name | GET | read | view file in question |
Robert Neyrinck - LinkedIn