CodeFlux

CodeFlux – The Ultimate React Codebase Analyzer & Visualizer 🚀

CodeFlux is a lightweight yet powerful CLI tool designed for React developers and frontend engineers to gain instant insights into their projects. It scans your React codebase, detects unused components, maps dependencies, and generates visualizations that make complex projects easy to understand.

Why CodeFlux?

React projects grow fast. As your codebase scales:

• Components get orphaned.
• Dependencies become hard to track.
• Refactoring feels risky.

CodeFlux solves this by giving you a clear, visual, and actionable overview of your React app’s structure — helping you clean, optimize, and improve maintainability.

Features

• 🔍 Deep File Scan: Recursively analyzes your .js, .jsx, .ts, and .tsx files.
• 🧩 Dependency Graph: Maps which components import/consume others.
• ⚠️ Unused Component Detection: Quickly identify orphaned files or components.
• 🗻 CLI Visualization: Clear, readable tree view of your component hierarchy.
• 💡 Future-ready: Modular design allows integration with HTML visualization and performance profiling.

Installation

Install CodeFlux globally or use npx directly.

Option 1: Global Installation

npm install -g codeflux

Then run from anywhere:

codeflux scan ./path-to-your-react-project

Option 2: NPX (No Install Needed)

npx codeflux scan ./path-to-your-react-project

Usage

Scan your React project:

npx codeflux scan ./path-to-your-react-project

Example output:

🔍 Scanning project...
📦 Found 42 files
🧩 Unused files/components:
  - src/components/OldCard.tsx
  - src/hooks/useLegacyAuth.ts
  - src/pages/tempPage.jsx

Optional: export report to JSON:

npx codeflux scan ./src --output report.json

How It Works

1. Scanner: Parses your project files, detects imports, exports, and JSX usage.
2. Graph Builder: Builds a dependency graph linking components and files.
3. Analyzer: Identifies unused components or orphaned files.
4. Visualizer: Presents results in an intuitive CLI table/tree (future HTML dashboards).

Why Developers Love CodeFlux

• Save time during refactoring and cleanup.
• Identify unused or dead code instantly.
• Gain visual insights into project structure for better maintainability.
• Perfect for teams, code reviews, and LinkedIn demos.

Future Roadmap

• Interactive HTML dashboard with component graph visualization.
• Integration with React Profiler for render and performance insights.
• Support for Vue, Svelte, and other frontend frameworks.
• CI/CD integration to detect unused code on pull requests.

Contributing

CodeFlux is open-source and welcomes contributions. Fork, create a branch, and send a PR!

License

MIT License © 2025 CodeFlux