GitHub Issue Tracker Frontend App Built with JavaScript

I got tired of print-debugging. So I built something different. CodeReplay🔂 lets you rewind your JavaScript execution like a video — scrub through every variable change, function call, and return value step by step. No breakpoints. No console.log spam. Just a timeline you can drag. No install. No signup. Open the link and paste your code. Here's what's under the hood: ▸ Custom Babel AST plugin that instruments your code before it runs ▸ Sandboxed iframe execution — untrusted code runs in complete isolation ▸ Immutable timeline engine — scrubbing reconstructs state via left fold ▸ Monaco Editor (VS Code's engine) with real-time line highlighting ▸ Claude AI explains each step in plain English ▸ 25 unit tests on the core engine ▸ Fully client-side The hardest part wasn't the UI. It was writing a Babel plugin that walks an AST and injects trace hooks without breaking the code. That's the kind of problem I enjoy. 🔗 Try it live: https://lnkd.in/gakdz3Up 🔗 GitHub: https://lnkd.in/gM-VmJq4 Built with React, Vite, Babel, Monaco Editor, and Claude API. #javascript #react #opensource #buildinpublic #frontend #webdevelopment

🚀 Just Built a Random Advice Generator using JavaScript & API! I recently built a small project to practice JavaScript API integration. This project fetches random advice using the Advice Slip API and displays it in a simple responsive UI. 🔹 Features • Fetches advice using Fetch API • Uses Async / Await for API handling • Button loading state while fetching data • Random background color change 🎨 • Fully responsive design 📱 🛠 Tech Stack HTML • CSS • JavaScript • Fetch API 📡 API Used https://lnkd.in/dhQVZzs9 🌐 Live Demo 👉 https://lnkd.in/dPePU2n5 💻 GitHub Repository 👉 https://lnkd.in/dJ7nNPCe This project helped me improve my understanding of JavaScript API calls, async programming, and DOM manipulation. I’ll continue building more projects to strengthen my frontend development skills. #javascript #webdevelopment #frontenddevelopment #api #100DaysOfCode #coding

💻 I Built a Browser-Based Code Editor I recently built a web code editor that runs completely in the browser. The idea was to create a simple environment where users can write and test HTML, CSS, and JavaScript instantly without installing anything. ⚙️ Key features 📝 Multi-language editing (HTML, CSS, JavaScript tabs) ▶️ Run code instantly inside the browser 👀 Live preview window to see the output in real time 💾 Save & Load projects to continue work later 📥 Download your code as a file 🧪 Run tests for assignments (JavaScript validation support) 📜 Console / Output panel to track logs and execution 🧠 Task / assignment panel for coding practice Everything runs locally in the browser sandbox, so there’s no backend required. This project helped me explore: Building developer tools in the browser Managing live code execution and preview rendering Designing a clean UI for coding environments 🔗 GitHub Repository https://lnkd.in/eduJwJn5 Would love feedback from developers 👇 What feature would you add to a browser-based code editor? #BuildInPublic #WebDevelopment #JavaScript #DeveloperTools #OpenSource #GitHub

💰 Built an Expense Tracker using JavaScript As part of strengthening my JavaScript fundamentals through projects, I built an Expense Tracker that lets users add and delete transactions, track balance, and manage income and expenses dynamically. This project helped me practice core concepts like: • DOM Manipulation • Event Handling • Form Validation • Array Methods (map, filter, reduce) • Dynamic UI Rendering • localStorage • State Management in Vanilla JavaScript Features of the app: ✅ Add new transactions ✅ Delete transactions ✅ Automatically update balance, income, and expense ✅ Store data in localStorage so data remains after refresh ✅ Show an empty state when no transactions are available ✅ Clean and responsive UI Tech Stack: HTML • CSS • JavaScript • localStorage API What I liked about this project is that it was not just about building a UI — it also made me think about data flow, calculations, and keeping the interface in sync with application state. This is part of my journey of revisiting JavaScript fundamentals by building projects before moving deeper into TypeScript, React, and full-stack development. Live Link:https://lnkd.in/gEwcBaqn GitHub Repo:https://lnkd.in/g5Pvvdyg #javascript #webdevelopment #frontenddevelopment #learninginpublic #coding

It's a frontend project built with vanilla HTML, CSS, and JavaScript that lets you search and track GitHub issues in real time using the GitHub API. But honestly? The project itself isn't the whole story. Building it forced me to actually understand things I'd been glossing over: → The difference between var, let, and const (and why it actually matters) → How the spread operator (...) makes copying and merging data cleaner → When to use map() vs filter() vs forEach() — not just memorizing them, but feeling when each one fits → Why arrow functions aren't just "shorter" — they change how `this` behaves → How template literals make string handling so much more readable Every concept clicked differently once I had a real problem to solve. That's the thing about building projects — documentation teaches you the words, but shipping teaches you the language. Live site → https://lnkd.in/emgkz-EC Code → https://lnkd.in/eRsba7vK If you're also learning in public, let's connect. What project helped things finally click for you? #JavaScript #WebDevelopment #BuildingInPublic #Frontend #OpenSource #100DaysOfCode

The day JavaScript finally clicked wasn't when I wrote more code. It was when I understood how it *thinks*. Most beginners start at the surface: → Click → do something → Call API → get data That works. Until it doesn't. Here's what changed when I went deeper 👇 Events aren't just triggers — they're journeys A click doesn't just fire. It travels — bubbling up from child to parent, or capturing down from parent to child. Once I understood delegation and the event object, I stopped fighting the DOM and started working with it. JavaScript doesn't wait — it schedules setTimeout, setInterval, and their clear functions aren't workarounds. They're JavaScript managing time deliberately. It's not pausing — it's prioritizing. Async isn't complexity — it's design Callbacks → Promises → async/await → Fetch API. Each step wasn't a new concept. It was the same concept, refined. JavaScript isn't slow. It's non-blocking by architecture. --- The real shift wasn't technical. It was mental. From "why isn't this working?" To "I know exactly why this behaves this way." That's the difference between writing code and understanding it. What concept recently changed how you think about JavaScript? 👇 #JavaScript #WebDevelopment #AsyncJS #Frontend #CodingJourney

🧠 Why does some JavaScript run instantly… and some runs later? Because JavaScript can be synchronous and asynchronous. 🔹 Synchronous JavaScript - JavaScript runs one line at a time. - Each task waits for the previous one to finish. Example: console.log("Start"); console.log("Middle"); console.log("End"); Output: Start → Middle → End ✅ Simple ❌ Can block execution 🔹 Asynchronous JavaScript - Some tasks don’t block execution. - They run in the background and return later. Example: console.log("Start"); setTimeout(() => { console.log("Async Task"); }, 2000); console.log("End"); Output: Start → End → Async Task 🔹 Why Async Exists Without async: - APIs would freeze the app - Timers would block everything - UI would become unresponsive 💡 Key Idea JavaScript is single-threaded, but it handles async using Web APIs + Call Stack + Event Loop (We’ll cover this next 👀) 🚀 Takeaway - Sync = step-by-step execution - Async = non-blocking execution Both are essential for real-world apps Next post: Event Loop Explained Simply 🔥 #JavaScript #AsyncJS #Frontend #WebDevelopment #LearnJS #Programming #LearningInPublic

Boost Your Productivity with These 3 VS Code Extensions As a developer, having the right tools can make a huge difference. Here are 3 VS Code extensions I use daily to stay efficient and write clean code: ⚡ Live Server Instantly launches your project on localhost with auto-reload — perfect for quick frontend development with Vanilla JS. 🔍 GitLens Supercharges Git inside VS Code. Track changes, view commit history, and understand who modified what — all without leaving your editor. 🎨 Prettier Automatically formats your code on save, keeping everything clean, consistent, and easy to read. 💡 Simple setup, powerful workflow: Code → Save → Auto format → Auto reload → Track changes Sometimes, you don’t need heavy frameworks — just the right tools. #VSCode #WebDevelopment #JavaScript #DeveloperTools #Productivity #CodingLife

⚡ Day 7 — JavaScript Event Loop (Explained Simply) Ever wondered how JavaScript handles async tasks while being single-threaded? 🤔 That’s where the Event Loop comes in. --- 🧠 What is the Event Loop? 👉 The Event Loop manages execution of code, async tasks, and callbacks. --- 🔄 How it works: 1. Call Stack → Executes synchronous code 2. Web APIs → Handle async tasks (setTimeout, fetch, etc.) 3. Callback Queue / Microtask Queue → Stores callbacks 4. Event Loop → Moves tasks to the stack when it’s empty --- 🔍 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); --- 📌 Output: Start End Promise Timeout --- 🧠 Why? 👉 Microtasks (Promises) run before macrotasks (setTimeout) --- 🔥 One-line takeaway: 👉 “Event Loop decides what runs next in async JavaScript.” --- If you're learning async JS, understanding this will change how you debug forever. #JavaScript #EventLoop #WebDevelopment #Frontend #100DaysOfCode 🚀

I recently worked on a feature where I used URL parameters to display a specific product and track its delivery status on a separate page. In this video, I walked through how I implemented it from passing orderId and productId through the URL, to retrieving them on the tracking page and using them to render the correct product and delivery progress. This task pushed me to better understand: -How URL parameters work in real applications -Handling bugs like missing or incorrect parameters -Managing data flow between pages -Updating the UI dynamically based on real-time calculations (like delivery progress) It wasn’t just about getting it to work, but understanding why it works and fixing the issues that came up along the way. Still learning and improving every day 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #BeginnerDeveloper