ASMR Coding - Refactoring Challenge Spinner Part 4 - HTML to Vue 3 + TypeScript - No Talking
Welcome to another session of deep work and relaxation. In today's Refactoring video, I’m taking a legacy Challenge Spinner built with basic HTML/CSS/JS and transforming it into a modern, scalable application using Vue 3 and TypeScript.
Continuing from part 3, which created the timer logic, in the fourth and final part, I'll deploy the application to Google App Script from build with single file html to testing.
No talking, just the satisfying sounds of typing and the rhythmic process of cleaning up code. Whether you're here to study, relax, or see how to migrate to a modern tech stack, I hope you enjoy the vibes.
⌨️ The Challenge
Objective: Refactor Challenge Spinner (Legacy to Modern)
The Goal: Migrate logic to Vue 3 (Composition API) and implement strict Typing with TypeScript.
Rules: Copy the design directly to the component, converting the script to TypeScript with strict type checking.
Tech Stack Evolution:
From: HTML, CSS, Vanilla JS
To: Vue 3 (Vite), TypeScript, CSS
🎧 Experience the ASMR
For the best experience, I recommend using headphones.
Keyboard Sound: Mechanical Topre (Enhanced by Mechvibes)
Ambient: Bird chirping in the forest + Flowing river water
🚀 Timestamps:
00:00 Intro
02:06 Finishing App (labels & typo checking)
06:00 The Forgotten Part : Fetching on load
16:13 Testing : Fetch with fake process
20:07 Build : Check build output (with css color-scheme problem)
29:29 Build : Make it single file output
44:55 Build : Solving css color-scheme problem
48:45 Testing : pre-deploy Google App Script (test development)
57:49 Deploy : Google App Script
59:23 Testing : Deployment
1:00:58 Closing : Refactoring completed
📂 About Me
I'm a developer who loves the art of clean code and minimalist aesthetics. This channel is dedicated to the "Coding ASMR" series, where I take on various AI-driven challenges to sharpen my skills and provide a calming space for the dev community.
Don't forget to Like, Comment, and Subscribe if you enjoy this kind of content!
#ASMR #vuejs #refactoring #Coding #AIChallenge #WebDevelopment #Programming #NoTalking ##html #htmlcss #css #htmlcssjavascript #javascript