A Next.js application designed to provide an interactive and visual explanation of the JavaScript Event Loop, helping developers understand how asynchronous code is handled.
This project showcases the flow of code from the Call Stack to (Macro)Task Queue and Microtask Queue.
Interactive Simulation: Step through different scenarios to see how JavaScript handles setTimeout, fetch, and other asynchronous operations.
Real-time Visualization: Watch the Call Stack, Microtask Queue and Task Queue update dynamically as animation for example codes.
To get a copy of this project up and running on your local machine, follow these steps.
- Node.js (npm comes bundled with Node.js)
git clone https://github.com/justtanwa/js-event-loop-visualizer.git
Navigate into the project directory:
cd js-event-loop-visualizer
npm install
Once the dependencies are installed, you can start the development server.
npm run dev
The application will now be running on your local machine. Open your web browser and navigate to:
The page will automatically reload as you make changes to the code.
Next.js: The React framework used for building the application.
React: For building the user interface.
TypeScript: The core language for the application logic.
Tailwind: For component-scoped styling.