CNAPP Dashboard

This project is a dynamic dashboard application built with React, Redux Toolkit, and Tailwind CSS. It allows users to visualize and manage widgets within different categories.

Check Live Demo

You can check the live version of the project here : CNAPP Dashboard

Features

• Dynamic Widget Display: Displays widgets organized by categories.
• Add New Widgets: Users can add new widgets to specific categories.
• Widget Filtering: Search and filter widgets by name.
• Delete Widgets: Remove unwanted widgets from categories.
• Modal Interactions: Utilizes modals for adding widgets and confirming deletions.
• Responsive Design: Adapts to different screen sizes for optimal viewing.

Technologies Used

         

• React: JavaScript library for building user interfaces.

• Redux Toolkit: State management library for predictable state updates.

• Tailwind CSS: Utility-first CSS framework for rapid UI development.

• React Icons: Library for easily incorporating popular icons.

• chart.js: Library for builiding charts and graphs.

• React Chartjs-2: Library for creating components for chart.js

Setup Instructions

1. Clone the repository:

   git clone https://github.com/rd273001/CNAPP-Dashboard.git
   cd CNAPP-Dashboard

2. Install dependencies: Using npm: npm install OR Using yarn: yarn

3. Start the application: Using npm: npm run dev OR Using yarn: yarn dev This will start the development server and make the application available at http://localhost:3000 in your default web browser.

Usage

1. Adding Widgets:

   • Click the "Add Widget" button on a category card or the "Add Widget" button in the header.
   • Fill in the widget details in the modal and click "Add Widget".

2. Filtering Widgets:

   • Use the search bar in the header to filter widgets by name.

3. Deleting Widgets:

   • Click the "Delete" button on a widget card.
   • Confirm the deletion in the modal.

Future Enhancements

• Widget Customization: Allow users to customize widget appearance and data displayed.

• Data Persistence: Implement data storage to save dashboard configurations.

• User Authentication: Add user accounts and role-based access control.

• More Widget Types: Introduce a wider variety of widgets for different data visualizations.

Contribution

Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.