I Built 10 JavaScript Developer Tools in One Place — Here's How

Raja Abbas Affandi — Thu, 16 Jul 2026 10:14:49 +0000

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.

I Built a Full-Stack E-Commerce App with Admin Dashboard Using Next.js

Raja Abbas Affandi — Mon, 02 Feb 2026 10:05:05 +0000

Recently, I built a full-stack e-commerce application from scratch with a powerful admin dashboard — and I documented the entire project in this video: https://www.youtube.com/watch?v=235k7QA-Jjs.

This project was an opportunity to combine modern web technologies and build something real-world developers can learn from.

Key Features

User authentication & authorization for secure login/signup
Product listing & management for both users and admin
Secure checkout flow integrated with Paystack
Admin dashboard to manage products, orders, and users
Scalable full-stack architecture using Next.js & Supabase
Clean, modern UI for a smooth user experience

Tech Stack

Next.js – frontend & backend
Supabase – database & authentication
Kinde – authentication
Paystack – payment gateway
Uploadthing – image uploads
Optimized APIs – for performance and scalability

Why This Project Matters

This project is a hands-on example for developers who want to understand:

How to build a secure e-commerce flow
How to manage products and orders efficiently
How to integrate modern tools like Supabase and Paystack

Get the Code

The full source code is available here: https://github.com/WebDev-Insider/dustin-tech-hub-youtube
For direct questions or support, you can reach me on Telegram: https://t.me/webdev_insider

DEV Community: Raja Abbas Affandi

I Built 10 JavaScript Developer Tools in One Place — Here's How

What It Does

Tech Stack

Why I Built It

The Event Loop Visualizer

Open Source

What's Next

Lessons Learned

I Built a Full-Stack E-Commerce App with Admin Dashboard Using Next.js

Key Features

Tech Stack

Why This Project Matters

Get the Code