CNAPP Dashboard

This project is a versatile dashboard platform crafted using React, Redux Toolkit, and Tailwind CSS. It enables users to visualize and manage various widgets categorized into different sections for a seamless experience.

Check Live Demo

Explore the live demo of the CNAPP Dashboard: 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/dveersingh000/CNAPP-Dashboard.git
   cd CNAPP-Dashboard

2. Install dependencies: Using npm: npm install

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

Usage Instructions

1. Adding New Widgets:

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

2. Filtering Widgets:

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

3. Deleting Widgets:

   • Press the "Delete" button on any widget card.
   • Confirm the deletion action through the modal.

Future Enhancements

• Widget Customization: Introduce features to customize the look and data of widgets.

• Data Persistence: Implement storage to save and retrieve dashboard configurations.

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

• More Widget Types: Introduce additional widget types for diverse data visualization needs.

Contribution

We welcome contributions! Feel free to open an issue or submit a pull request with your ideas or improvements.