profile

Diary Of A Dev

Become better F.E developer in 10 minutes a week.

I am building one complex frontend feature or solving a complex frontend interview question every week. And breakdown the exact steps, thought process, and system design behind it. Join the newsletter to learn with me.

PostsLinksRecommendations
Featured Post

#5: JavaScript interview task - Build an interactive pie chart.

Hello Devs! Welcome back to another Tuesday of building a frontend feature. Today we are solving a very commonly asked Interactive JS feature in an interview setup. [An interactive pie chart]. This one is going to be a quick issue as there isn't many moving parts to this question. What are we building? Live preview with code: https://stackblitz.com/edit/vitejs-vite-psytzb?file=index.html Philosophy Here the task is to create a range slider and a pie chart and bind the `pie chart` value with...

26 days ago • 1 min read

Hello Devs, The feature we are building today is frequently asked in React interviews. But it doesn't test only your React skills, it test your overall JavaScript and basic logic building skills. So, let's dive into building our fourth frontend feature: [Folder/File explorer UI] What are we building? Live preview with code: https://stackblitz.com/edit/vitejs-vite-4bqecn?file=src%2FApp.jsx Philosophy The basic philosophy behind building a "Folder/File explorer UI" is as following: List all the...

about 1 month ago • 3 min read

Hello Devs, Nowadays, one feature that you will see in almost all sites specially in blogs is theme switching specifically dark mode. And that's what we are building today. [Dark Mode in NextJs page with Tailwind and Shadcn-UI] So, let's dive in to build our third frontend feature. What are we building? Live preview with code: https://stackblitz.com/edit/stackblitz-starters-adalin?file=app%2Fpage.tsx Philosophy. First, let's understand the philosophy and basic system design behind adding dark...

about 1 month ago • 4 min read
password strength indicator screenshot

Howdy Devs, Las week we built an `Adaptive progress bar text`. Despite the complexity of that feature, I am thrilled to see the response from you all on my first issue. Thanks a lot for that. Today we are building a simple "Password Strength Indicator" in React. So, let's dive in to build our second frontend feature. [Password Strength Indicator] What are we building? Live Preview: https://stackblitz.com/edit/vitejs-vite-usrrut?file=src%2FApp.jsx Let the coding began. If you have built...

about 2 months ago • 2 min read
Adaptive progress bar text

Howdy Devs, Recently I got a task to build a progress bar with % of progress to show at right end of the bar. Haha, that's fairly straight forward. Turns out it was not. Once I started to code the solution, a major challenge came up which I couldn't for-see earlier. And it turned out to be pretty tough than what I initially thought. So, let's dive in to build our first complex frontend feature. [Adaptive progress bar text] What are we building? Live Preview:...

about 2 months ago • 4 min read
Share this page