Features  •  Installation  •  Usage  •  Contributing

---

Overview

ClickShield is a modern, user-friendly web application that helps users identify potentially malicious websites and phishing attempts. Built with React and TypeScript, it leverages Google's Safe Browsing API to provide real-time threat analysis and comprehensive security reports.

Features

Core Features

• Real-time Threat Detection: Instant analysis using Google's Safe Browsing API
• Comprehensive Reports: Detailed security analysis with threat intelligence
• Scan History: Track and review previous security scans
• SSL Verification: Check website certificate validity
• PDF Reports: Export professional security reports
• Dark Mode: Modern UI with dark/light theme support

User Experience

• Lightning Fast: Instant results with optimized performance
• Responsive Design: Works perfectly on all devices
• Accessibility: WCAG compliant with screen reader support

Tech Stack

Frontend

• React 18 - Modern React with hooks and concurrent features
• TypeScript - Type-safe JavaScript development
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Smooth animations and transitions

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• Google Safe Browsing API - Threat intelligence

Development Tools

• ESLint - Code linting
• Git - Version control
• NPM - Package management

Installation

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 18 or higher)
• npm or yarn package manager
• Google Safe Browsing API Key

Setup Instructions

1. Clone the repository

git clone https://github.com/tbhvishal/ClickShield.git
cd ClickShield

2. Start the application in development mode

npm start

This will install all dependencies, build the project, and start both frontend and backend servers for local development.

---

Production & Cloud Deployment

Deploying to Cloud Providers

1. Install all dependencies (in CI/CD or cloud build step):

npm run install:all

2. Build the project for production:

npm run build

• This builds the frontend (Vite) to frontend/dist/ and the backend (TypeScript) to backend/dist/.

3. Serve the built frontend and backend:

• Serve frontend/dist/ as static files using your cloud provider's static hosting solution.
• Run the backend from backend/dist/ as a Node.js server or deploy as serverless functions, depending on your cloud provider's capabilities.

Do not use npm start for production or cloud deployment.

• npm start is for local development only.
• Always use npm run build for production builds.

Google Safe Browsing API Setup

• Visit Google Cloud Console
• Create a new project or select existing one
• Enable the Safe Browsing API
• Create credentials (API Key)
• Add your API key to the root .env file:

  GOOGLE_SAFE_BROWSING_API_KEY=your_api_key_here
  

Usage

Getting Started

1. Open your browser and navigate to http://localhost:5173
2. Enter a URL in the input field
3. Click "Scan Website" to analyze
4. Review results and security recommendations

How It Works

1. URL Submission: User enters a website URL
2. API Query: Backend queries Google Safe Browsing API
3. Analysis: Advanced threat analysis and classification
4. Report Generation: Comprehensive security report
5. PDF Export: Optional professional PDF report

API Reference

For API implementation details (endpoints, request/response shapes and error handling), see backend/src/api/checkUrl.ts.

---

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

How to Contribute

1. Fork the repository

2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

git commit -m 'Add amazing feature'

4. Push to the branch

git push origin feature/amazing-feature

5. Open a Pull Request

Reporting Issues

• Bug Reports: GitHub Issues
• Feature Requests: GitHub Issues

Support

If you find ClickShield helpful, please consider:

• Following the developer: @tbhvishal)
• Starring the repository
• Sharing with others
• Contributing to the project

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with by Vishal Sharma

 

---

🛡️ Stay Safe Online with ClickShield 🛡️

Advanced threat detection for a safer internet experience