I was tired of switching between linters, formatters, analyzers, and visualizers just to review my JavaScript code. So I built JSCodeCraft — a collection of 10 developer tools in one place.
What It Does
- Code Analysis — Scores your code quality across 10 dimensions
- Structure Mapping — Visualizes your code as an interactive tree
- Refactoring Engine — Suggests improvements with before/after previews
- Pattern Detection — Catches anti-patterns and common mistakes
- Event Loop Visualizer — Shows async execution step by step
- And 5 more tools
Tech Stack
- Next.js 16 with App Router
- TypeScript strict mode
- Tailwind CSS v4
- Recharts for visualizations
Why I Built It
Every code review I did had the same issues:
- Nested callbacks that could be flattened
- Unused variables scattered across files
- Functions that were too long
- Missing error handling
I wanted a tool that catches all of this before anyone else sees my code.
The Event Loop Visualizer
This was the hardest part to build. I wanted it to show the call stack, task queue, and microtask queue moving in real time.
Most people learn async by reading articles. Actually seeing the execution order click by click makes it stick.
// What the visualizer shows:
console.log("1"); // Call stack
setTimeout(() => { // Task queue
console.log("2");
}, 0);
Promise.resolve().then(() => { // Microtask queue
console.log("3");
});
console.log("4");
// Output: 1, 4, 3, 2
// The visualizer shows WHY
Open Source
The whole thing is free and open source. No signup required.
Try it: https://jscodecraft-next.netlify.app
Source: https://github.com/Raja-Abbas/JSCodeCraft
Product Hunt: https://www.producthunt.com/products/jscodecraft?utm_source=other&utm_medium=social
What's Next
I'm building more tools:
- AI chatbot builder
- Knowledge base with RAG
- SaaS analytics dashboard
- Freelance finance tracker
Each one solves a real problem. Each one built with the same stack.
Lessons Learned
- Start with your own pain. I built this because I needed it.
- Make it visual. Code is abstract. Visualizations make it concrete.
- Ship fast, iterate. MVP 1 is enough to get feedback.
- Open source builds trust. People try tools they can inspect.
If you try it, let me know what you think. Feedback welcome.
This is project 1 of 8. More coming soon.
Top comments (1)
How did you handle integration with existing linters like ESLint, I'm curious about your approach. I'd love to swap ideas on this, following for more content on dev tooling.