Code Health Scanner

• 

  Visual layout and interface of the Code Health Scanner web app

• 

  Demonstration of the Code Health Scanner analyzing a sample code snippet

• 

  Code Health Scanner displaying results for modern features, risky patterns, and unused variables.”

Inspiration

Modern web development is fast-paced, and developers often struggle to safely adopt new features. I wanted a tool that helps quickly identify modern APIs, risky patterns, and unused code.

What it does

• Scan JS/TS/HTML code via paste or file upload.
• Detect modern features and show browser support (Baseline data).
• Highlight risky patterns like eval() and innerHTML.
• List unused variables for cleaner, safer code.

How we built it

• Backend: Node.js + Express, Multer for uploads, CORS enabled.
• Analysis: Regex + AST parsing with Acorn/Acorn-Walk.
• Frontend: Lightweight HTML/CSS/JS UI.
• Data Integration: Baseline Web Features for real-world browser support insights.

Challenges

Parsing inline scripts in HTML and mapping Baseline feature IDs to readable names was tricky. Also, creating a clean, usable UI without a framework took careful design.

Accomplishments

• Full-stack web app working across browsers.
• Combined Baseline data with AST-based analysis for accurate detection.
• Ready for extensions like IDE integration and real-time linting.

What we learned

• AST-based JS/TS analysis.
• Mapping developer-relevant metrics from real-world data.
• Building simple yet functional full-stack apps.

Next steps

• Better UI/UX and syntax highlighting.
• IDE and linter integration.
• Support more file types and features.
• Suggest fixes for risky patterns automatically.

Built With

• acorn
• css3
• express.js
• git
• github
• html5
• https://github.com/w3c/web-platform-tests
• multer
• node.js
• vs