🔒 DataWipe Frontend

Smart India Hackathon 2025 - Problem Statement ID: 25070
Secure Data Wiping for Trustworthy IT Asset Recycling

A professional-grade React application for secure data wiping that ensures sensitive information is completely and permanently removed from IT assets before recycling or disposal.

🎯 Overview

DataWipe addresses the critical need for secure data disposal in IT asset recycling. When organizations dispose of or recycle IT equipment, residual data can pose significant security risks. This frontend application provides:

Hardware-level data destruction using industry-standard tools (hdparm, nvme-cli)
Multi-platform support for Windows, Linux, and Android devices
Compliance certificates for audit trails and regulatory requirements
User-friendly interface for both technical and non-technical users
Real-time monitoring of data wiping operations

Problem Statement

Organizations face challenges in ensuring complete data removal from IT assets before recycling. Traditional deletion methods leave recoverable data traces, creating security vulnerabilities and compliance issues. DataWipe solves this by implementing secure erase protocols at the hardware level.

✨ Features

🔐 Core Functionality

Multi-Platform Data Wiping
- Windows (NTFS, FAT32, BitLocker integration)
- Linux (ext4, xfs, btrfs, LUKS encryption support)
- Android (Factory reset enhancement, secure storage clearing)
Hardware-Level Security
- hdparm ATA Secure Erase for SATA/IDE drives
- NVMe Crypto Erase for NVMe SSDs
- CLI mock interface for testing and development
Certificate Generation
- Official compliance certificates for every wipe operation
- Detailed reports with timestamps and verification data
- Downloadable PDF certificates for audit trails

👤 User Features

Authentication System
- Secure user registration and login
- JWT-based authentication
- Protected routes and session management
Interactive Dashboard
- Real-time statistics (total wipes, success rate, data secured)
- Quick access to platform-specific solutions
- User profile management
History Tracking
- Complete log of all wipe operations
- Searchable and filterable history
- Export capabilities for reporting
Responsive Design
- Mobile-first approach
- Modern UI with TailwindCSS
- Smooth animations and transitions

🛠️ Tech Stack

Frontend Framework

React 19.1.0 - Modern UI library with latest features
React Router 7.6.3 - Client-side routing and navigation
Vite 7.1.7 - Lightning-fast build tool and dev server

Styling & UI

TailwindCSS 4.1.11 - Utility-first CSS framework
@tailwindcss/vite - Vite integration for Tailwind
Custom CSS - Additional styling and animations

State Management & HTTP

React Context API - Global state management (AuthContext)
Axios 1.12.0 - HTTP client for API requests
React Toastify 11.0.5 - Toast notifications for user feedback

Development Tools

ESLint 9.29.0 - Code linting and quality
Vite Plugin React 4.7.0 - React fast refresh support
Cookie Parser 1.4.7 - Cookie handling utilities

📁 Project Structure

Frontend/
├── public/                      # Static assets
├── src/
│   ├── assets/                  # Images, icons, and media files
│   ├── components/              # React components
│   │   ├── Auth/               # Authentication components
│   │   │   ├── Login.jsx
│   │   │   └── Register.jsx
│   │   ├── Certificates/       # Certificate generation & display
│   │   │   └── Certificates.jsx
│   │   ├── Dashboard/          # Main dashboard
│   │   │   ├── Dashboard.jsx
│   │   │   └── Navbar.jsx
│   │   ├── Footer/             # Footer component
│   │   │   └── Footer.jsx
│   │   ├── Header/             # Header component
│   │   │   └── Header.jsx
│   │   ├── History/            # Wipe history tracking
│   │   │   └── History.jsx
│   │   ├── Landing/            # Landing page
│   │   │   └── LandingPage.jsx
│   │   ├── Layout/             # Layout wrapper
│   │   │   └── Layout.jsx
│   │   ├── Solutions/          # Platform-specific solutions
│   │   │   ├── WindowsSolution.jsx
│   │   │   └── LinuxSolution.jsx
│   │   └── User/               # User profile management
│   │       └── User.jsx
│   ├── context/                # React Context providers
│   │   └── AuthContext.jsx    # Authentication context
│   ├── utils/                  # Utility functions
│   ├── App.css                 # Global styles
│   ├── App.jsx                 # Root component
│   ├── index.css               # Base CSS
│   ├── layout.jsx              # Layout configuration
│   └── main.jsx                # Application entry point
├── .env                        # Environment variables (not in git)
├── .gitignore                  # Git ignore rules
├── eslint.config.js            # ESLint configuration
├── index.html                  # HTML template
├── package.json                # Dependencies and scripts
├── package-lock.json           # Locked dependencies
├── README.md                   # This file
└── vite.config.js              # Vite configuration

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Node.js (v18.0.0 or higher)
npm (v9.0.0 or higher) or yarn (v1.22.0 or higher)
Git for version control

Installation

Clone the repository

git clone https://github.com/Poonam146/DataWipe.git
cd DataWipe/Frontend

Install dependencies
```
npm install
```
or
```
yarn install
```

Set up environment variables

Create a .env file in the root directory:

VITE_API_BASE_URL=http://localhost:5000/api
VITE_APP_NAME=DataWipe
VITE_APP_VERSION=1.0.0

Start the development server
```
npm run dev
```
The application will be available at http://localhost:5173

🔧 Environment Variables

Create a .env file in the root directory with the following variables:

# API Configuration
VITE_API_BASE_URL=http://localhost:5000/api

# Application Configuration
VITE_APP_NAME=DataWipe
VITE_APP_VERSION=1.0.0

# Optional: Feature Flags
VITE_ENABLE_ANALYTICS=false
VITE_ENABLE_DEBUG=true

Note: All environment variables must be prefixed with VITE_ to be accessible in the application.

📜 Available Scripts

Development

npm run dev          # Start development server with hot reload

Production

npm run build        # Build for production
npm run preview      # Preview production build locally

Code Quality

npm run lint         # Run ESLint to check code quality

📖 Usage Guide

1. Registration & Login

Navigate to the landing page at http://localhost:5173
Click "Register" to create a new account
Fill in your details (name, email, password)
After registration, log in with your credentials

2. Dashboard Overview

After logging in, you'll see:

Welcome message with your name and email
Quick stats showing total wipes, success rate, and data secured
Quick actions to access Windows or Linux solutions

3. Performing a Data Wipe

Windows Solution

Click "Windows Solution" from the dashboard
Select the drive or folder to wipe
Choose the wiping method (Quick, DoD 5220.22-M, Gutmann)
Click "Start Wipe" and confirm
Monitor progress in real-time
Download the certificate upon completion

Linux Solution

Click "Linux Solution" from the dashboard
Select the device or partition
Choose the wiping algorithm (shred, dd, hdparm)
Execute the wipe operation
Verify completion and download certificate

4. Viewing History

Navigate to "History" from the navbar
View all past wipe operations
Filter by date, platform, or status
Export reports for compliance

5. Certificates

Access "Certificates" from the navbar
View all generated certificates
Download individual certificates as PDF
Share certificates for audit purposes

🔒 Security Features

Authentication

JWT-based authentication with secure token storage
Password hashing on the backend (bcrypt)
Protected routes requiring authentication
Session management with automatic logout on token expiry

Data Wiping Security

Hardware-level erasure using industry-standard tools
Multiple wiping algorithms (DoD 5220.22-M, Gutmann, etc.)
Verification mechanisms to ensure complete data removal
Audit trails for compliance and accountability

Frontend Security

Input validation on all forms
XSS protection through React's built-in escaping
CSRF protection via token-based authentication
Secure cookie handling for session management

🔌 API Integration

The frontend communicates with a backend API for all operations. Key endpoints include:

Authentication

POST /api/auth/register    // User registration
POST /api/auth/login       // User login
GET  /api/auth/profile     // Get user profile
POST /api/auth/logout      // User logout

Data Wiping

POST /api/wipe/windows     // Initiate Windows wipe
POST /api/wipe/linux       // Initiate Linux wipe
GET  /api/wipe/status/:id  // Check wipe status
POST /api/wipe/cancel/:id  // Cancel ongoing wipe

History & Certificates

GET  /api/history          // Get wipe history
GET  /api/certificates     // Get all certificates
GET  /api/certificates/:id // Download specific certificate
DELETE /api/history/:id    // Delete history entry

Example API Call:

import axios from 'axios';

const initiateWipe = async (data) => {
  try {
    const response = await axios.post(
      `${import.meta.env.VITE_API_BASE_URL}/wipe/windows`,
      data,
      {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      }
    );
    return response.data;
  } catch (error) {
    console.error('Wipe failed:', error);
    throw error;
  }
};

🤝 Contributing

We welcome contributions to improve DataWipe! Here's how you can help:

Development Workflow

Fork the repository

git clone https://github.com/YOUR_USERNAME/DataWipe.git

Create a feature branch

git checkout -b feature/your-feature-name

Make your changes
- Follow the existing code style
- Add comments for complex logic
- Update documentation if needed
Test your changes
```
npm run lint
npm run build
```

Commit your changes

git commit -m "feat: add your feature description"

Push to your fork

git push origin feature/your-feature-name

Create a Pull Request
- Provide a clear description of changes
- Reference any related issues
- Wait for review and approval

Code Style Guidelines

Use functional components with hooks
Follow React best practices
Use TailwindCSS for styling (avoid inline styles)
Write meaningful commit messages (conventional commits)
Add comments for complex logic
Keep components small and focused

🗺️ Roadmap

Phase 1 (Current) ✅

✅ User authentication and authorization
✅ Windows and Linux data wiping solutions
✅ Certificate generation and management
✅ History tracking and reporting
✅ Responsive UI with TailwindCSS

Phase 2 (Upcoming) 🔄

🔄 Android solution implementation
🔄 Advanced reporting and analytics
🔄 Bulk operations support
🔄 Real-time progress tracking with WebSockets
🔄 Multi-language support (i18n)

Phase 3 (Future) 📅

📅 Enterprise features (multi-user, roles, permissions)
📅 Integration with asset management systems
📅 Mobile application (React Native)
📅 Advanced compliance reporting (GDPR, HIPAA)
📅 Cloud storage integration
📅 Scheduled wiping operations

👥 Team

Problem Statement ID: 25070
Theme: Secure Data Wiping for Trustworthy IT Asset Recycling
Organization: Smart India Hackathon 2025

📞 Support & Contact

For questions, issues, or suggestions:

GitHub Issues: Create an issue
Email: support@datawipe.com
Documentation: Wiki

🙏 Acknowledgments

Smart India Hackathon for the opportunity to solve real-world problems
React Team for the amazing framework and ecosystem
Vite Team for the blazing-fast build tool
TailwindCSS for the utility-first CSS framework
Open Source Community for inspiration and support

📄 License

This project is developed for Smart India Hackathon 2025 and is subject to the competition's terms and conditions.

Built with ❤️ for Smart India Hackathon 2025

⭐ Star this repository if you find it helpful!

Report Bug · Request Feature · Documentation

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Poonam146/DataWipe

Folders and files

Latest commit

History

Repository files navigation

🔒 DataWipe Frontend

📋 Table of Contents

🎯 Overview

Problem Statement

✨ Features

🔐 Core Functionality

👤 User Features

🛠️ Tech Stack

Frontend Framework

Styling & UI

State Management & HTTP

Development Tools

📁 Project Structure

🚀 Getting Started

Prerequisites

Installation

🔧 Environment Variables

📜 Available Scripts

Development

Production

Code Quality

📖 Usage Guide

1. Registration & Login

2. Dashboard Overview

3. Performing a Data Wipe

Windows Solution

Linux Solution

4. Viewing History

5. Certificates

🔒 Security Features

Authentication

Data Wiping Security

Frontend Security

🔌 API Integration

Authentication

Data Wiping

History & Certificates

🤝 Contributing

Development Workflow

Code Style Guidelines

🗺️ Roadmap

Phase 1 (Current) ✅

Phase 2 (Upcoming) 🔄

Phase 3 (Future) 📅

👥 Team

📞 Support & Contact

🙏 Acknowledgments

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages