A cybersecurity research project demonstrating social engineering techniques through a pixel-perfect clone of the popular NGL (Not Gonna Lie) anonymous messaging platform. Built with React, TypeScript, and Tailwind CSS.
This project serves as a cybersecurity demonstration showing how easily malicious actors can:
- Create convincing clones of popular platforms
- Harvest user data through social engineering
- Exploit user trust in "anonymous" platforms
- Demonstrate the importance of URL verification and digital literacy
- Visual Deception: Identical UI/UX to the legitimate NGL platform
- Domain Spoofing: Could be deployed with a deceptive domain name
- Data Collection: Captures messages users believe are anonymous
- Trust Exploitation: Users share sensitive information believing in false anonymity
- Social Engineering: Leverages psychological trust in familiar interfaces
- 🎯 Perfect UI Replication: Pixel-perfect clone of NGL's interface
- �️ Data Collection: Captures and stores user messages with metadata
- ⏱️ Rate Limiting: Mimics original platform behavior to avoid suspicion
- 📱 Mobile Responsive: Identical user experience across devices
- 🎨 Authentic Design: Maintains original color schemes and animations
- 🔐 Backend Integration: Stores data for analysis and demonstration
- 💾 Database Storage: Messages stored for cybersecurity research
- ⚡ Fast Performance: Optimized to feel like the real platform
| Technology | Purpose |
|---|---|
| React 18 | Modern frontend with hooks and router |
| TypeScript | Type safety and better developer experience |
| Tailwind CSS | Precise styling to match original design |
| Vite | Lightning-fast development and builds |
| Express.js | Modern REST API backend |
| SQLite | Lightweight database for demo data |
| React Router | Navigation between demo and dashboard |
| Lucide Icons | Consistent icon system |
- 🎯 Perfect UI Replication: Pixel-perfect clone of NGL's interface
- 🕵️ Advanced Fingerprinting: Browser, canvas, audio, and WebGL fingerprinting
- 📊 Real-time Dashboard: Live view of collected data and analytics
- 🔒 Modern Backend: RESTful API with proper validation and error handling
- 📱 Responsive Design: Works perfectly on all device sizes
- ⚡ Performance Optimized: Fast loading and smooth interactions
- 🎨 Professional UI: Clean, modern interface for both demo and dashboard
- 🛡️ Security Headers: Demonstrates both attack and defense techniques
- Clone the repository:
git clone https://github.com/deepan-alve/NGL-HACKED.git
- Navigate to the project directory:
cd NGL-HACKED - Install dependencies:
npm install
- Create a
.envfile:cp .env.example .env
- Start the development server:
npm run dev
- Navigate to the server directory:
cd server - Install backend dependencies:
npm install
- Start the backend server:
npm run dev
- Main Demo:
http://localhost:5173/- The NGL clone interface - Security Dashboard:
http://localhost:5173/dashboard- View collected data - Backend API:
http://localhost:3001/api- REST API endpoints
- Admin Key:
demo123(for dashboard access) - Purpose: View what attackers would see from data collection
.
├── src/
│ ├── components/ # UI components cloning NGL interface
│ ├── store/ # Data management and API integration
│ └── App.tsx # Main application logic
├── api/ # Backend API for data collection
├── .env.example # Environment variables template
└── README.md # Project documentation
- Security Awareness Training: Demonstrate phishing techniques to educate users
- Penetration Testing: Test organization susceptibility to social engineering
- Academic Research: Study user behavior and trust patterns online
- Digital Literacy Education: Show importance of URL verification
- Cybersecurity Demonstrations: Live demos for conferences and workshops
- Informed Consent: Always inform participants this is a demonstration
- No Malicious Use: Never deploy to actually deceive or harm users
- Educational Context: Use only in controlled, educational environments
- Data Protection: Securely handle any collected demonstration data
- Responsible Disclosure: Share findings to improve overall security awareness
- This project is for educational/research purposes only
- Unauthorized deployment to deceive users may violate laws
- Always obtain proper permissions before conducting security research
- Consider privacy laws when collecting demonstration data
- Use responsibly and ethically in all scenarios
Contributions are welcome for improving this educational demonstration!
- Fork the repository
- Create a feature branch:
git checkout -b feature/security-improvement
- Commit your changes:
git commit -m "Add security research feature" - Push to the branch:
git push origin feature/security-improvement
- Open a pull request
Please ensure all contributions maintain the educational/research focus and include appropriate disclaimers.
This project is licensed under the MIT License.
- This application demonstrates how "anonymous" platforms can collect user data
- All messages are captured and stored for research/demonstration purposes
- Users should never share sensitive personal information on ANY anonymous platform
- This project highlights the importance of verifying platform authenticity
🎓 Educational Project by Deepan
Purpose: Cybersecurity awareness and social engineering demonstration
Built with: React, TypeScript, and security research principles