/dashboard-application

It is a dashboard application built with React Js and Syncfusion.

Primary LanguageJavaScript

🎨 Dashboard Application

πŸ“ Introduction

This app is a multi-page project that incorporates various functionalities such as data visualization, theming, a Kanban board, and more. It’s designed to provide an interactive and feature-rich user experience.

πŸ› οΈ Tech Stack

  • Tailwind CSS: For creating modern and responsive UI designs.
  • React.js: To build the dynamic and interactive user interface.
  • Syncfusion: A robust component library that powers the features of this app.

✨ Features

🎨 Theming

  1. Theme Colors:

    • Choose from multiple theme colors to customize the app as per your preference.
  2. Light & Dark Mode:

    • Effortlessly toggle between light and dark themes for a comfortable viewing experience.

πŸ“„ Pages

πŸ›’ Ecommerce

  • Displays fake data like the products, orders, and more.

πŸ“¦ Orders

  • Sort orders data by various titles such as customer names.

πŸ‘₯ Employees

  • View data related to employees.
  • Search for employee details by typing their name.

πŸ§‘β€πŸ€β€πŸ§‘ Customers

  • Displays customer data with sorting options.

πŸ“… Calendar

  • Add, edit, and customize events in the calendar.

πŸ“‹ Kanban Board

  • Drag and drop tasks to organize them as per your needs.

πŸ“ Editor

  • A fully-functional text editor with features like formatting, highlighting, and more.

🎨 Color Picker

  • Use the pen tool to pick and apply your favorite color from the theme palette.

πŸ“Š Charts

  • View visually appealing charts and bars with smooth effects.

πŸš€ Running the App

  1. Clone the repository:
    git clone https://github.com/rumaisanaveed/dashboard-application.git  
  2. Navigate to the project directory:
    cd multi-page-app  
  3. Install dependencies:
    npm install  
  4. Start the development server:
    npm start  

πŸ“š How the Code is Implemented

  1. Syncfusion Library:

    • Utilized Syncfusion for implementing all the functionalities described above.
  2. State Management:

    • Managed using React’s Context API for a smooth and centralized state handling.
  3. Fake Data:

    • Used for populating the app's pages for demonstration purposes.
  4. React Icons:

    • Used for intuitive and visually appealing icons.

πŸ“Έ Snapshot of the App

color-picker editor dashboard


⭐ Note: Clone this repository to explore the project further, and don't forget to give this repo a star!