Efficient use of loading and error states using Tanstack Query

ยท

2 min read

As I am open to work and actively applying to jobs and performing job tasks, I am taking a challenge of doing something new in every of these projects in the pursuit of learning something unique.

This is a recent project I did for a job application. It's called Bookling ๐Ÿ“š !

๐Ÿ’ช What did I learn?

๐Ÿ“Œ Framer Motion

๐Ÿ“Œ Improved architecture to maintain API services.

๐Ÿ†• What's unique?

๐Ÿ“Œ The Bento-Grid inspired Hero Section! As a designer too, I came up with this uniquely crafted layout in the hero section which speaks to the user a lot.

๐Ÿ“Œ An error handling approach I talked about earlier! This won't break the application or disrupt any form of User Experience.

๐Ÿ‘‰ If you visit the app, you will see all the dynamic list items won't appear as now the API is facing an Internal Server Error (500). This is because I used MockBin, a tool to generate Mock APIs. APIs generated by MockBin has an expiry date. So, if you go though the following sections

โœ… Landing Page -> Top Authors, Best Sellers

โœ… Find Books Page

๐Ÿค– You will see the data is loading, and then a meaningful message is shown, instead of the UI/page/app breaking.

๐Ÿ’ฃ Loading Skeletons! Just look at how beautiful the whole app looks, even though, the backend is compromised!

ย