DataProtect Nexus Dashboard

Project Overview

DataProtect Nexus Dashboard is a comprehensive data protection and privacy management platform built for Zoop.one. It provides a centralized solution for managing GDPR/data protection compliance, consent management, and privacy-related operations.

Features

• Consent Management: Track and manage user consents, including minors and guardian consents
• Cookie Compliance: Website management, cookie banner designer, and auto-scanning capabilities
• Notice & Purpose Registry: Manage purposes, notices, and policy version history
• Data Subject Requests: Handle access, correction, and erasure requests with SLA tracking
• Grievance Redressal: Manage grievances with resolution tracking and escalation
• Incident & Breach Response: Log incidents, track responses, and manage regulatory notifications
• Processors & Flow: Visualize data flows and manage processor relationships
• Audit & Compliance: Role permissions, audit reports, and DPIA management

Technologies Used

This project is built with:

• Framework: React 18.3.1 with TypeScript
• Build Tool: Vite 5.4.1
• UI Components: shadcn/ui (Radix UI primitives)
• Styling: Tailwind CSS 3.4.11
• State Management: React Hook Form, TanStack Query
• Routing: React Router DOM 6.26.2
• Validation: Zod schema validation
• Charts: Recharts

Getting Started

Prerequisites

• Node.js & npm installed - install with nvm

Installation

# Clone the repository
git clone <repository-url>

# Navigate to the project directory
cd dataprotect-nexus-dashboard

# Install dependencies
npm install

# Start the development server
npm run dev

The application will be available at http://localhost:8080

Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run build:dev - Build for development
• npm run lint - Run ESLint
• npm run preview - Preview the production build

Project Structure

dataprotect-nexus-dashboard/
├── src/
│   ├── components/     # React components organized by feature
│   ├── ui/            # Reusable UI components
│   ├── pages/         # Page-level components
│   ├── data/          # Mock data and configurations
│   ├── hooks/         # Custom React hooks
│   ├── types/         # TypeScript type definitions
│   └── lib/           # Utility functions
├── public/            # Static assets
└── ...config files

Development

The project uses:

• TypeScript for type safety
• ESLint for code linting
• Tailwind CSS for styling
• Path aliases (@/ maps to ./src/)

License

Copyright © 2024 Zoop.one. All rights reserved.