Skip to content

sayedali11/Dashboard-Shop-by-Reactjs

Repository files navigation

Dashboard-Shop-by-Reactjs

Features:

Here's features included in this project

  • this dashboard application is fully mobile responsive and customizable you
  • can choose between six beautiful theme colors as well as toggle between the dark and light mode
  • admin panel includes one dashboard three pages four apps and seven fully functional charts
  • the first page is the orders table and it includes a pagination system
  • the employees page is the second table and it includes a completely functional search and filtering functionality
  • the customers page table is fully editable which means that you can select multiple rows and delete them as well as edit each field individually
  • calendar you can drag and drop events and edit the title location start and end date and you can even change the calendar's view from day week month and even an agenda list
  • editor you can make text bold you can add images and essentially modify the text
  • color picker app highly useful if you want to allow your users to choose specific colors
  • users can also collapse the sidebar to view the content in its entirety and will also cover some additional widgets like the shopping cart the chat notifications and a user profile

create seven different kinds of charts :

  • line chart :you can hover over the lines to get more information on these nice tooltips
  • area chart :you can click on a specific value to hide or unhide it from the graph
  • bar chart
  • pie chart
  • we have some more custom financial candle charts great for tracking stocks and we have a color mapping chart right here
  • pyramid chart

Technologies Used:

  • React js 18
  • tailwindcss
  • Context API
  • react-icons
  • @syncfusion/ej2
  • @syncfusion/ej2-react-calendars
  • @syncfusion/ej2-react-charts
  • @syncfusion/ej2-react-dropdowns
  • @syncfusion/ej2-react-grids
  • @syncfusion/ej2-react-inputs
  • @syncfusion/ej2-react-kanban
  • @syncfusion/ej2-react-popups
  • @syncfusion/ej2-react-richtexteditor
  • @syncfusion/ej2-react-schedule

How to start?


To start the project along with me just download the start-up file and run available script
// first install all necessary dependencies

npm i

// next run

npm start