What I Learned Building a JavaScript Framework from Scratch at 18!

#webdev #javascript #opensource #architecture

Whenever I used JavaScript frameworks like React, Next.js, or SvelteKit to build e-commerce sites and web applications, one question always stuck in my mind: "How does it actually work under the hood?"

During my recent Eid vacation, I decided to stop just using them and try building one myself. Here is the story of how Levelo JS was born.

The Spark of Curiosity

I started by asking Gemini to explain the core mechanics of modern JavaScript frameworks. That is when I learned about how compilers work—specifically, how they transform JSX-like syntax into pure, optimized vanilla JavaScript DOM operations.

To dig deeper, I spent days reading through the open-source compiler code of SolidJS and React. The fine-grained reactivity architecture of SolidJS fascinated me the most.

Armed with this knowledge, I teamed up with Gemini to brainstorm and research the architecture. After intense experimentation, we successfully built Levelo JS — a lightweight, zero-runtime, Virtual-DOM-free JavaScript framework built entirely from scratch.

Coding on a Mobile Phone 📱

The journey was extra challenging and interesting because I was at my village for the holidays and didn't have access to my laptop or PC.

Driven by pure passion, I coded the entire core framework (up to v1.0.4) on my Android phone using Termux and the Acode editor. Because I had already thoroughly studied the documentation of React, SolidJS, and Svelte, I managed to build the initial core architecture in just 15 days.

The Hardest Challenge: Building a Client-Side Router

Since Levelo JS is designed for Single Page Applications (SPA), it absolutely needed a client-side routing mechanism.

Building this routing system from scratch was the hardest part of the project. It took me 2 entire days of continuous debugging just to get the basic routing features stable. While there might still be minor edge-case bugs, I am actively identifying and fixing them as the framework evolves.

My Biggest Takeaway

Building Levelo JS taught me that as developers, we shouldn't just blindly memorize how to use tools like Next.js or React. We need to look deeper and understand how they work under the hood.

Understanding the internals makes you a better software engineer and helps you write significantly faster, more optimized code for production.

I would love to get your feedback on the architecture!