Web X-Ray | 3D Website Architecture Analyzer

What is this tool about?

Web X-Ray is an advanced, interactive visualization tool designed to peel back the layers of any website. It "x-rays" a target URL and represents its underlying architecture—including the UI, components, scripts, external services, and trackers—as an interactive 3D model.

What is this project?

This project is a React-based web application powered by Vite, Tailwind CSS, shadcn/ui, and Three.js (via React Three Fiber/drei). It features a sleek, neon-infused "hacker" aesthetic and uses a custom Supabase Edge Function to securely analyze live websites on the fly. Designed by Parth Thukral, it transforms static HTML, CSS, and JS tags into a dynamic structural visualization.

How does it work?

1. Input: You provide a URL (e.g., example.com).
2. Analysis: The backend engine (running on Supabase) fetches the live webpage and parses its HTML DOM structure.
3. Detection: It scans for technology fingerprints (like React, Next.js, Tailwind, Google Analytics), extracts the DOM tree, and identifies network requests and trackers.
4. Visualization: The frontend categorizes these findings into architectural layers (UI, Components, Scripts, External APIs) and renders them in an interactive 3D scene using Three.js.
5. Insights: It calculates an overall performance and security score based on load times, script weights, and the presence of third-party trackers.

What can it do?

• 3D Tech Stack Visualization: See how different technologies stack upon each other.
• Dependency Tracking: Discover underlying CDN imports and external trackers.
• Performance Diagnostics: View load times, script heaviness, and network requests on a responsive timeline.
• DOM Tree Exploration: Inspect a simplified visual tree of the website's structure.
• API Access: Programmatically analyze websites via our Edge REST API.

How to use it?

Local Development:

1. Clone the repository and navigate to the project directory.
2. Install dependencies: npm install
3. Start the development server: npm run dev
4. Open the app in your browser, enter a URL on the dashboard, and click "Analyze"!

Production: Visit the live deployed version of the application, input any URL on the homepage, and wait a few seconds for the 3D generation to complete.

When to use it?

• Competitive Analysis: Reverse-engineer the tech stack of a competitor's website.
• Security Auditing: Quickly identify external scripts, mixed content risks, and hidden tracking pixels.
• Performance Optimization: Visualize how many heavy scripts or external APIs are bogging down a site's rendering pipeline.
• Education/Presentations: Visually explain web architecture concepts to non-technical stakeholders or students.

What does the API do?

The Web X-Ray API allows developers to bypass the UI and fetch raw architectural data programmatically.

By sending a POST request to the analysis endpoint with a given URL, the API responds with a structured JSON containing:

• Detected frontend frameworks, libraries, and content management systems.
• A simplified DOM tree representation.
• An array of critical network requests (scripts, stylesheets, images).
• Identified trackers and analytics pixels.
• Performance and security scores evaluating the target's web health.

How can developers get help?

• Source Code: Explore the repository structure, especially the src/components (frontend) and supabase/functions/analyze/ (backend logic) folders.
• Issue Tracker: Submit bug reports or feature requests via the project's GitHub Issues page.
• Creator Contact: Reach out directly via the author's portfolio: Parth Thukral
• Support: Consider supporting the project by purchasing a cup of Coffee for me😉.