A React-based frontend for the OWASP Top 10 Vulnerability Scanner. This application provides a user-friendly interface to initiate scans, view detailed results, browse scan history, and monitor logs in real-time.

• Dashboard: Get a quick overview of recent scan activities and key statistics.
• New Scan: Easily start a new vulnerability scan on a target URL.
• Scan History: Access a comprehensive list of all previously executed scans.
• Detailed Results: Dive deep into scan results with detailed vulnerability reports.
• Live Logs: Monitor the progress and output of ongoing scans in real-time.
• Dark/Light Mode: Switch between visual themes for optimal user experience.

• Framework: React
• Build Tool: Vite
• Styling: Tailwind CSS
• Language: JavaScript (JSX)

The project follows a standard React application structure for maintainability and scalability.

owasp-scanner-frontend/
├── public/
│   └── index.html         # Main HTML file
├── src/
│   ├── api/
│   │   └── scannerApi.js  # API call simulations
│   ├── components/
│   │   ├── layout/
│   │   │   └── Sidebar.jsx
│   │   └── ui/
│   │       ├── Button.jsx
│   │       ├── Card.jsx
│   │       └── ...
│   ├── contexts/
│   │   └── ThemeContext.jsx # Dark/light mode logic
│   ├── pages/
│   │   ├── Dashboard.jsx
│   │   ├── History.jsx
│   │   ├── Logs.jsx
│   │   ├── NewScan.jsx
│   │   └── ScanResult.jsx
│   ├── App.jsx              # Main component with routing
│   ├── index.css            # Global styles and Tailwind directives
│   └── main.jsx             # Application entry point
└── README.md

Follow these instructions to set up and run the project locally.

• Node.js (v18.x or higher) and npm
• Visual Studio Code (or any other code editor)

1. Create the Vite Project: Open your terminal and run the following command to create a new React project with Vite.

   npm create vite@latest owasp-scanner-frontend -- --template react
   cd owasp-scanner-frontend

2. Replace Default Files: Replace the default public and src folders generated by Vite with the ones from this project.

3. Install Dependencies: Install Tailwind CSS and other project dependencies.

   npm install -D tailwindcss postcss autoprefixer
   npm install

4. Initialize Tailwind CSS: Generate the tailwind.config.js and postcss.config.js files.

   npx tailwindcss init -p

5. Configure Tailwind: Update tailwind.config.js to include your source files and enable dark mode.

   // filepath: tailwind.config.js
   /** @type {import('tailwindcss').Config} */
   export default {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     darkMode: 'class', // Enable class-based dark mode
     theme: {
       extend: {},
     },
     plugins: [],
   }

6. Add Tailwind Directives: Add the following lines to the top of your src/index.css file.

   // filepath: src/index.css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

1. Start the Server: Run the following command to start the local development server.

   npm run dev

2. Open in Browser: Open your web browser and navigate to the URL provided in the terminal (e.g., http://localhost:5173).

The frontend is designed to communicate with a Django backend for scanning functionality.

1. Navigate to src/api/scannerApi.js.
2. This file currently uses setTimeout to simulate asynchronous API calls with mock data.
3. To connect to your live backend, replace the mock logic in each function with fetch or axios calls to your actual Django API endpoints.

Example:

// filepath: src/api/scannerApi.js
// ...existing code...
// export const startScan = async (url) => {
//   console.log(`Starting scan for: ${url}`);
//   return new Promise(resolve => {
//     setTimeout(() => {
//       const scanId = `scan_${Date.now()}`;
//       mockScans.unshift({
//         id: scanId,
//         url: url,
//         status: 'In Progress',
//         date: new Date().toISOString(),
//         summary: { total: 0, high: 0, medium: 0, low: 0 }
//       });
//       resolve({ id: scanId, status: 'Scan initiated' });
//     }, 1000);
//   });
// };

// Replace with your actual API call
export const startScan = async (url) => {
  const response = await fetch('http://your-django-backend/api/scans/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ url }),
  });
  return response.json();
};
// ...existing