High-level workflow in MERN apps

I started to learn full-stack development using the MERN stack and only then did I fully understand the constant data exchange between the user and the server. This short article highlights the workflow in a simple MERN app.
Suppose you have ever seen a tutorial video on APIs. In that case, I bet this common analogy that APIs act as waiters in a restaurant bridging the gap between customers and kitchen staff, would not be strange to you.
The React frontend can be likened to diners in a restaurant who interact with the waiters to send and receive food. Mongodb database, the pantry where food recipes and ingredients are stored while the Express backend serves as the kitchen where dishes are prepared. The kitchen pulls from the pantry to prepare dishes for the diners.
The API Endpoints, the waiters, are responsible for carrying requests to the kitchen and delivering responses back to the diners. Each waiter handles a specific task which could be any of a GET, POST, PUT, OR DELETE request.
This analogy has helped paint a brighter picture of how the web works. I look forward to sharing more as I go through this learning curve.