But as a seasoned frontend engineer, it is important to understand the different frontend states so that you can make a decision whether you need to really need a library for this.

In my frontend system design YouTube series, I have added 4 state management videos. SUBSCRIBE TODAY!.

The first covers the different types of frontend states:

The next three cover the state management architectures and popular libraries in React, and when to use which.

Apart from the videos, I have also added 2 new frontend system design questions on the course alpha.learnersbucket.com

Designing a FeatureFlag and Experimentation web platform.

And designing a Ride-booking web app like Uber, Ola, & Lyft.

This takes the tally to 34 frontend system design articles, which is the most on any platform.

Save your time, utilize your learning budget, and enroll in the course to get access to the curated frontend resources to upskill yourself.

Until the next time, keep learning, keep hustling!

I have asked myself this question often too, and my conclusion is that the “usual day-to-day” engineer is already solved, which is why companies have started to look for another skill in engineers apart from problem-solving: product sense.

“Product-sense AI-driven software engineer” is the new definition of a software engineer who can stand out. You use AI tools to do the engineering work better and faster, but at the same time think like a product manager + designer to make the customer experience better.

You don’t just jump to the implementation; you now question: do we really need to build this? If so, why? Are customers asking for it? Did we do any surveys or receive any feedback? How are we going to track the success metrics of what we are building?

When you are asked to build something, you take a step back, put yourself in the customer's shoes, and try to see from their lens whether what you are building will improve the customer experience or degrade it.

This is called product-sense, and this is a habit that we form gradually.

I have recently shared a video on this; watch it to understand how you can improve your product-sense sprint-by-sprint.

This is your time; start developing product sense from today.

Until next time, keep learning, keep hustling!

Once you know how you can fetch the data, the next comes how we can do real-time communication.

And then, finally, how to optimize the data fetching, and this I have explained with Apple’s full-stack engineer interview question.

”In JS, if we fetch huge data, e.g., 10M records, through an API and render it in the UI inside a table, what will break on the UI, and how can we resolve it?”

Watching these videos in sequence helps to build the foundation.

So subscribe to the channel and keep watching the new videos!

Until next time, keep learning and keep hustling!

There are many more interesting videos in the pipeline.

In addition to these, I have added 2 new frontend system design questions to the course.

• Design a PDF search box that loops through every matching text in the documents - Asked at Adobe recently.

• Designing a (Video / Textual) Testimonial collector JavaScript SDK.

This brings the tally to 32 frontend system design questions.

Use your learning and development budget and upskill your frontend knowledge.

Until next time. Keep learning, keep hustling!.

Birthday sale is live on my frontend system design course. Use coupon code NEW_10 to get additional 10% discount.

Companies are looking for higher productivity, and using AI tools with a product-first mindset has helped me survive the wave.

All this was possible because I used AI tools correctly to speed up my deliverables by 5x.

I don’t wait for PRD or Designs anymore. Once the problem statement is ready and it is clear (I analyze and summarize this based on the customer feedback from the Enterpret).

I create a plan to solve it using Claude Code and then design using Claude Design, get those reviewed, and execute the plan using Claude Code.

Using AI tools, features that used to take weeks can now be coded out in a day.

What helps me to execute this problem are:

• My frontend system design fundamentals

• Understanding of the existing codebase

• Improved orchestration of AI tools with practice

That is why I have been saying that to do your job as a software engineer, your role has to be shifted from programmer to orchestrator who has deep knowledge of the system and fundamentals and can use the AI tools correctly to get things done.

I am trying to cover the entire frontend system design concepts in my series on YouTube.

It has 13 videos now.

These are a few from the series where I have talked about every frontend rendering technique, frontend architectures, and every way to host a frontend application.

Subscribe to the channel; new videos are uploaded twice a week.

Until next time, Upskill your frontend knowledge to become an AI-Native product-first frontend engineer.

Along with rendering, hydration is equally important as this decides how the what will be the role of JavaScript in making the app alive.

In this video, I have discussed all the rendering & hydration techniques that you need to know as a frontend developer. (Watch at 1.25x).

After you have finalized the rendering and hydration technique, you need to check the performance of the webpage of your app to decide if it is functioning as required.

Only then can you find the gaps and then do the optimization.

These are the important concepts that every frontend developer should master, as these lay the foundation, and any discussion that you will have during your frontend system design round will be based on this.

So watch the video and subscribe to the channel if you haven’t already.

Apart from this, a new frontend system design article was also published on the alpha.learnersbucket.com course.

Designing the frontend of the high-frequency trading platform (web app) like a stock exchange.

This is the 28th FSD article out of 31. Enroll today and get lifetime access to the best frontend interview preparation resource.

Until next time, keep learning, and keep hustling!.

I started the course solely for the frontend system design, but students asked to migrate the JavaScript-based and machine coding interview questions to the same platform so that they could do the consolidated learning, which I did.

Now, with the help of AI, I can create explainer animations faster, which gives voice to my thoughts and approach; thus, I decided to start the YouTube series for each frontend interview round:

• JavaScript-based questions

• Machine coding (in React.js and VanillaJs both)

• Frontend system design concepts (frontend system designs of 30 different web applications remain in the course).

I have started with the frontend system design as this is most in demand and is heavily focused on in this AI era during the interviews.

I have covered 3 main topics on it.

3rd video - Every frontend rendering technique you need to know will be published tomorrow.

New videos will be published every Saturday and Sunday.

Subscribe to the channel and master the FSD.

I will come with the new updates, by that time, keep learning and keep hustlling!.

This was a machine coding question (LLD). This question is also asked in the system design (HLD) round often, and thus, I had written a detailed 10k-word article on how to design it.

One of the core features that I have discussed in this article is how to handle nested fields and conditional validations on different fields.

This becomes the 26th frontend system design article on alpha.learnersbucket.com. If you want to upskill yourself, do check out my course.

Enroll today and get lifetime access to it.

Until next time with the new frontend system design article. Keep learning, Keep Hustling!

This is just a one piece; there are 100s of other nuances that we need to take care of while designing such a complex web app.

Enroll today and learn in depth about how to design such web apps and 30 other common yet complex web applications.

Get lifetime access to the best frontend interview preparation resource.

Until next time! keep learning, keep hustling!.

Features like showing upload progress or retrying failed uploads look simple in the UI, where you just click a button, but behind the scenes, there is complex engineering involved to handle them.

Here are some of the key features discussed in the article:

Here are the key features discussed in the article:

1. Chunked, resumable uploads — Files larger than 5 MB are split into chunks and uploaded in parallel batches of 3, with session IDs persisted to IndexedDB so interrupted uploads can resume after a page refresh.

2. Sharing and permission system — Four-role model (Owner, Editor, Commenter, Viewer) with inherited permissions cascading from parent folders to children, including UI handling for inherited vs. direct collaborators.

3. Real-time sync — WebSocket connections push file change events to active tabs, while backgrounded tabs fall back to 60-second delta polling and catch up on reconnection.

4. Virtualized file list — Only rows visible in the viewport are rendered in the DOM, making folders with thousands of items performant using TanStack Virtual.

5. Shared link management — Two distinct link types (view and edit) per item, each with independent password protection, expiry dates, and download toggle controls.

6. File preview system — Inline previews for images, PDFs, videos, text, and Office documents, with progressive loading (blurred thumbnail → full resolution) and a parallel-route overlay panel.

7. Optimistic updates and rollback — Every mutation (rename, move, delete, role change) updates the UI immediately and rolls back with an error toast if the API call fails.

8. Offline PWA support — Service workers cache folder listings and thumbnails, while an IndexedDB-backed mutation queue replays pending changes when connectivity is restored.

9. Drag-and-drop upload — Canvas-level drag handling with an enter counter to prevent flicker, plus recursive folder tree reading via webkitGetAsEntry() for full directory uploads.

10. Version history — Previous file versions are stored and browsable, with restore creating a new version at the top of the history rather than overwriting the record.

This is the 24th system design article. I have added 6 articles in May, and 5 are planned for June.

If you are preparing for the interviews, do check out my course on alpha.learnersbucket.com. Enroll today to get lifetime access to the best frontend interview preparation resource.

Until next time, keep learning, keep hustling!.

• Seat lock flow: How do you make sure no 2 people book the same seat

• Handling flash sale traffic (high traffic): How to handle the seat lock in high traffic

• The "ghost selection" problem and how to avoid it: How to handle it if, due to latency, a seat is locked for a longer time

I have started working on this article, and it will be finished this week.

This will be the 23rd frontend system design article on alpha.learnersbucket.com

Last week, I published “Designing the frontend of the collaborative whiteboarding web app like Excalidraw. “

Enroll today and get lifetime access to the best frontend interview preparation resource.

By the next time, keep learning, keep hustling!.

When I had the opportunity to interview for the staff frontend engineer role at Okta, the first round was a system design round.

And the problem statement read as:

Design a CMS with more than 10k pages, content will be stored in Markdown, and only a few people will edit it. How to make sure the updated/new content is available to everyone throughout the globe within 1 hour.

Handle 10rps on average, 40rps on max, 100rps burst for bots.

The website should be SEO friendly, and the content should be accessible to the LLMs for training on its data. Design frontend, backend, and infrastructure-level architecture. Follow-up — How to set up monitoring for page crash, DDoS, error handling, how the severity is decided, and how configuration is done? How do you triage for the impacted user base? How to invalidate cache, explain different approaches.

The interviewer told me that, as a staff engineer, I should also have some knowledge of backend systems and how to handle alerting and monitoring.

I was given two conditions while designing the system:

• I cannot contradict my claims, which means I can explain one approach for something and then cannot change it to a different approach.

• The system should be designed from the frontend perspective while directing the backend and infra for their level stuff as well.

This application is similar to the new publishing websites like Financial Times, CNN, Wikipedia, and NDTV.

Designing the frontend was easy because that was my expertise, but I failed to answer the monitoring and error escalation things.

Even though I knew about the concepts, I had never done the setups, and I did not know how to decide the severity of a bug and mark it as SEV1, SEV2, or so.

But a failure is an opportunity to learn, thus I learned about those things and created a complete article so that you can learn too.

This is the 20th frontend system design question in the course, max on any platform out there.

Enroll today in alpha.learnersbucket.com and get lifetime access to the best frontend preparation resource.

I have also been working on 2 new system design questions

• Design a real-time collaborative whiteboarding web app like Excalidraw or Miro - Asked in Rippling

• Design a high-performance analytical dashboard like Grafana - Asked at Apple.

Utilize your learning budget and start upskilling yourself.

By the next time, keep learning and keep hustling!.

Implement list virtualization in JavaScript/React, with options to filter row values and sort column values.

There are 2 ways to implement virtualization

- Scroll event

- Intersection observer

This is one of the few questions that evaluate your frontend skills, along with problem-solving to the core:

- Efficient DOM manipulation

- Windowing of list (DSA concept)

- Event handling

- How does it optimize the performance?

That is why it has been asked by multiple companies in their interviews, like Tekion, Arctic Wolf, UI Path, and Service Now.

Enroll in alpha.learnersbucket.com and get lifetime access to the best frontend preparation resource.

The next few companies’ questions in Pipeline:

- Pay Pay Japan

- Google L5 frontend

- JioHotstar

So utilize your learning budget and upskill yourself.

In the interview, I was asked to code the chat UI interface of ChatGPT/Claude, where multiple chats can be queued, and each chat can run multiple sub-operations (async). Only when the sub-operations are completed do we have to mark the parent chat as completed and move to the next chat.

The problem statement reads as:

• A chat will go through multiple sub asynchronous operations, and only when all sub operations are finished, will we move to the next chat in the queue.

• Multiple chats can be added, but they will be queued and executed in sequence, one after the other.

• We can abort any ongoing chat operation (all its sub-operations will be aborted too).

• We can retry any failed or completed chat operation.

To solve this question, I first created the high-level design of it and then coded the design into functionality.

This is a large problem statement, and to implement, we break it down into three different parts:

• Add chat flow (core) – When we type a prompt and submit it, it gets added to the chat state and to the queue; from there, it moves to processing. Any subsequent chat/prompt will be added to the state and to the queue.

• After a chat is added to the queue, we trigger the processing. This is an asynchronous method and executes each chat one by one in sequence using a while loop as long as there are chats in the queue. We add a safety guard to start the processing only when it is not ongoing.

• In each processing, we create a parent promise representing chat and 3 child promises representing its sub-operations, these will be mocked promises that randomly resolve or reject between 1 and 10s representing a network call. We will pass a single Abort controller to the parent promise that will forward it to the child promises, and we will use it to abort all the ongoing promises.

• We will also pass a callback method to the promises that will help us to update the chat status of all the children as well as their status immediately.

• On the retry, we push the existing chat back to the queue, and execution continues in the normal flow from step 2.

This is the high-level flow diagram of the app (I have used mock promises to represent the network calls.)

This question covers different interview questions that we have on the platform:

• Queue promises (Asked in Meta, Tekion, Uber, Flipkart) and execute them in sequence (Asked in Phonepe) – Whole queue processing logic.

• Retry promises (Asked in Google, Impact Analytics).

• Accordion group (Asked in Tekion) – Each chat card can be collapsed or expanded.

Check out the low-level design implementation of it in my course, along with 60+ machine coding questions from 33 different companies.

People think frontend is easy, and I think these are the people who have not done frontend enough. Enroll today at alpha.learnersbucket.com and start the journey of real frontend engineering.

Utilize your learning budget and upskill yourself.

By the next time, keep learning and keep hustling!

Apart from this I have also added a Frontend machine coding question asked in Microsoft’s SDE2 interview.

This question was asked in Zepto’s SDE3 interview as well and in Flipkart’s UI-3 interview a extended version of it was asked that clubs a component asked in Airbnb’s machine coding interview.

Practicing question really help to be prepared for the interviews as your mind is trained to solve similar questions.

Enroll today into alpha.learnersbucket.com and get lifetime access to the best frontend interview preparation resource.

By that time, keep learning, keep hustling!

On the alpha.learnersbucket.com, I have frontend interview questions from 31 product-based tech companies, ranging from SDE1 to Staff level.

500+ real interview questions solved and available for practice using the built-in coding playground.

Solving different types of questions helps you prepare better and train your mind to think and create logic, and convert logic to code.

Enroll today and get lifetime access to the best frontend interview preparation resource.

Start practicing today!.

In this AI era, where the market for freshers is shrinking, having the right skills and keeping yourself interview-ready helps you to crack interviews faster.

Practice beats luck.

With that, I have added a new question set for the Tekion SSE frontend.

Enroll today and get lifetime access to the best frontend interview preparation resource.

By the next time, keep learning, keep hustling!.

Luckily, one of my colleagues from Razorpay has joined Rippling as an SDE2 and has shared the interview questions asked of him, so that I can solve them.

I also got my hands on some interview questions from the leetcode discussion forum, which I have solved on priority.

JavaScript promise-based - memoised function for async callback-based tasks

Machine coding - React custom hook for infinite scroll with cursor-based pagination

The other two interview questions (Machine-coding and system-design) will be added in the coming weeks.

Also, if you notice, there are other companies question sets added as well.

2026 is the year, the job market for software engineers has improved, and there is high demand for skilled engineers who can use to 10X the work and take the business to the next level.

Enroll today in alpha.learnersbucket.com and get lifetime access to the best front-end interview preparation resource.

By the next time, keep learning, keep hustling!.

Here is the advice I gave,

• Work on your Resume the most; you should be getting noticed to get a call for an interview (Resume guide is present in the course)

• Master JavaScript and React, if you are lacking in any current focus on them, in the next 3 - 4 months. (Professional JavaScript for Web developers, 2nd edition, is the best book.)

A typical SDE2 frontend interview is composed of 4 to 5 rounds

1. Online Assessment (DSA, DOM manipulation, JS-based questions) to be solved in 60 - 90 minutes.

2. JavaScript-based questions, at least one question will be based on async programming / Promises.

3. Machine coding, Framework independent, but sometimes you are asked to code in Vanilla JS, thus prepare for both.

4. System design, from small features to the whole website, you could be asked to design anything, sometimes to code some features as well. If you have only worked on SPA, get yourself familiar with SEO and server-side rendering

5. Buggy code fix, code review, this is usually for the senior level; you should be able to read and understand others’ code.

And no need to worry about NextJS and React Native, as they are built on React, and if you know React well, you can learn them in no time.

On alpha.learnersbucket.com, you can prepare round-by-round, company-wise for your upcoming interview. Enroll today and get lifetime access.

Until the next time, keep learning, keep hustling!

Get access to company wise question set, practicing question asked in past interviews helps to be prepared upfront and face the interview with confidence.

New question is added on the platform every week.

Enroll today and start learning!.