Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
A Blueprint for Production-Ready Web Applications

You're reading from   A Blueprint for Production-Ready Web Applications Leverage industry best practices to create complete web apps with Python, TypeScript, and AWS

Arrow left icon
Product type Paperback
Published in Sep 2022
Publisher Packt
ISBN-13 9781803248509
Length 284 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Philip Jones Philip Jones
Author Profile Icon Philip Jones
Philip Jones
Arrow right icon
View More author details
Toc

Table of Contents (13) Chapters Close

Preface 1. Part 1 Setting Up Our System
2. Chapter 1: Setting Up Our System for Development FREE CHAPTER 3. Part 2 Building a To-Do App
4. Chapter 2: Creating a Reusable Backend with Quart 5. Chapter 3: Building the API 6. Chapter 4: Creating a Reusable Frontend with React 7. Chapter 5: Building the Single-Page App 8. Part 3 Releasing a Production-Ready App
9. Chapter 6: Deploying and Monitoring Your Application 10. Chapter 7: Securing and Packaging the App 11. Index 12. Other Books You May Enjoy

Supporting toast feedback

Toasts (called Snackbar in MUI) can be used to show feedback to the user that doesn’t relate to a direct element on the page. Good usage of a toast is showing an error message if a request to the backend fails, as shown in Figure 4.5, or showing a success message after the user changes their password, as there is no direct confirmation via the page content. A bad usage would be to report that the entered email is invalid as, in this case, the email field should show an error.

Figure 4.5: An example of a toast error

To support toasts, we need to be able to add a toast from any component in the app and have that toast displayed. Crucially, if there are multiple toasts, they should be displayed one after another so that there is never more than one toast displayed. This is another React context use case, much like the authentication context added earlier. So, let’s start by adding the following toast context to frontend...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image