Skip to content

README.md

Latest commit

 

History

History
171 lines (113 loc) · 4.06 KB

README.md

File metadata and controls

171 lines (113 loc) · 4.06 KB

🛡️ Scam Protection Demo (Educational Project)

An educational React project that demonstrates how scam and phishing flows work — built to help developers and users understand, detect, and prevent scam attempts.

🚀 Overview

This project is a frontend educational demo built using React + TypeScript + Vite.

It simulates common patterns used in scam calls, phishing pages, and fake verification flows so developers can:

  • Understand how scammers technically operate
  • Learn how browser permissions can be misused
  • Design safer, scam-resistant user experiences
  • Build awareness against online fraud

⚠️ This project is NOT intended for real-world use.

🎯 Why I Built This

Scam calls and phishing attacks are increasing rapidly.
Many users fall victim because they don’t understand how scams work behind the scenes.

I built this project to:

  • Study permission-based attack patterns (camera, location, fake verification)
  • Understand frontend-only scam workflows
  • Learn how scammers create urgency and fake errors
  • Help developers build better protection systems
  • Raise awareness about online scams and fraud prevention

Understanding the attack is the first step to preventing it.

🚫 Important Disclaimer (READ THIS)

🚨 This project is created strictly for EDUCATIONAL PURPOSES ONLY.

  • ❌ Not for commercial use
  • ❌ Not for real user data collection
  • ❌ Not for deceptive or malicious activity
  • ❌ Not intended to exploit or track users

The author does not support or encourage misuse of this code.
Any resemblance to real scam systems is purely for learning and defense.

🧠 What This Project Demonstrates

  • How fake verification flows are structured
  • How scam pages request browser permissions
  • Why users should be cautious with:
    • Camera access
    • Location access
    • Urgent error messages
  • How React StrictMode affects side-effects
  • Why frontend-only systems can be risky

🧱 Tech Stack

  • ⚛️ React 18
  • 🟦 TypeScript
  • ⚡ Vite
  • 🗄️ Supabase (demo database)
  • 🎨 Custom CSS animations
  • 🧩 Component-based architecture

📂 Project Structure

src/ ├─ components/ │ ├─ Payment.tsx │ ├─ BookLoader.tsx ├─ App.tsx ├─ main.tsx ├─ index.css

⚙️ How to Run the Project

1️⃣ Clone the repository

git clone https://github.com/your-username/scam-protection-demo.git
cd scam-protection-demo

2️⃣ Install Dependencies

npm install

3️⃣ Configure Environment Variables

Create a .env file using .env.example:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

ℹ️ Note: Supabase keys used here are public anon keys, suitable only for demos and educational projects.

4️⃣ Start the Development Server

npm run dev

🧪 Notes for Developers

  • React StrictMode is enabled
    → Side effects may run twice in development (intentional behavior)
  • Supabase is used only as a demo data store
  • No sensitive or personal data should ever be used
  • This project is not production-grade security

🔐 Security & Ethics

  • This project promotes ethical learning
  • Designed to help protect users from scams
  • Encourages awareness, not exploitation

Real-world applications must implement:

  • Backend validation
  • Strong authentication
  • Legal compliance

📚 What You’ll Learn From This Project

  • JavaScript event loop & async behavior
  • Browser permission pitfalls
  • React side-effect management
  • Frontend security awareness
  • Ethical hacking mindset (defensive)

👨‍💻 Author

Arsh
Computer Science Engineering Student
Focused on Cybersecurity, Scam Prevention & Ethical Hacking Awareness

✅ Final Note

If this project helps you understand how scams work and how to avoid them,
then it has successfully served its purpose.

Education is the strongest defense against scams.