Advanced level · Module 6: Web Development Capstone · Lesson 3 of 5
Building the Front End
Build the customer booking flow and the staff dashboard in React, accessible and responsive.
In this lesson you will
- Implement the booking flow and staff dashboard
- Meet accessibility and responsive design requirements
Key concepts
booking flowstaff dashboardprotected routesaccessible forms
The lesson
Build the customer flow first: choose a service, pick an available time, enter details and confirm. Handle every state — loading slots, none available, conflict, success.
Build the staff dashboard behind login with views per role. Protected routes in the front end improve the experience, but the API remains the real protection.
Test on phones and with the keyboard throughout, not only at the end.
Step by step
- Build the booking flow with all states.
- Build the login page and staff dashboard.
- Add role-specific views.
- Test on a phone and with the keyboard only.
Practice activity
Complete milestone 3: the front end connected to the API.
Expected result: Customers can book and staff can manage bookings by role, on phones and with the keyboard.
Check your understanding
-
Do protected routes in React secure the data?
Show answer
No; they improve the experience, but the API must enforce access.
-
Which states must the booking flow handle?
Show answer
Loading, no availability, conflict and success (plus errors).
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.