Welcome to another session of deep work and relaxation. In this video I continue the challenge of refactoring HTML design to Vue 3 with TailwindCSS, especially in the Sticky Notes view section.
No talking, just the satisfying sounds of typing and the process of turning logic into reality. Whether you're here to study, relax, or learn some tips, I hope you enjoy the vibes.
⌨️ The Mission
Project: Sticky Notes + Bookmarks App
Design Source: Stitch With Google (Palette & Typography)
Objective: Refactor legacy structures into a scalable Vue 3 Composition API setup with strict TypeScript typing.
🛠️ Tech Stack
Framework: Vue 3 (Vite)
Language: TypeScript
Styling: TailwindCSS (Implementing Stitch UI Guidelines)
Editor: VS Code
🎧 Experience the ASMR
For the best experience, I recommend using headphones.
Keyboard Sound: Mechanical Topre (Enhanced by Mechvibes)
Ambient: Calming ocean waves + Gentle rainfall
🚀 Timestamps:
00:00 Intro & Preview Project
00:59 Notes View Header
12:06 Dropdown view Sort By
33:20 Card Component
34:38 Notes Grid Cards
43:55 Note Card Color Variant
1:04:54 Tailwind class for Color Variant
1:09:08 Pinned Note Icons
1:12:14 What's Next?
Don't forget to subscribe to Webcraft ID for more relaxed and inspiring coding sessions. If you enjoyed this video, please give it a like and share your thoughts in the comments!
#ASMR #Coding #VueJS #TypeScript #WebDevelopment #StitchUI #NoTalking #DeepWork #WebcraftID #Refactoring
