Building a Festival Schedule in React is a practical project for learners who already know React fundamentals. Turn a prepared festival catalogue into a personal day plan: filter events, keep your choices, and explain why a proposed event conflicts with something already selected.
Two Guided Labs begin with two normal, non-conflicting choices before introducing a conflicting candidate. You then connect derived schedule data, time checks, and local persistence. An independent Challenge transfers the same mechanisms to another festival day with different events, stages, and IDs. Each lab provides its own starting project and data.
What You Will Learn
After completing this course, you will be able to:
- keep selected event IDs as the source of truth and derive current event records, selection count, and total duration from the current catalogue;
- filter the visible catalogue without deleting existing choices, and distinguish events with the same title by stable IDs;
- check half-open time intervals so exactly adjacent events are allowed, genuine overlaps are refused with the specific conflicting event identified, and removing a choice makes it available to add again;
- store only an ID list under a course-specific
localStoragekey, restore still-valid choices, and explain missing old IDs without losing valid ones; - recover from malformed JSON and use the minimum necessary
useEffectlogic to remember choices across refresh in the same browser and origin while the lab remains available.
Who This Course Is For
This course is for learners ready to coordinate React components around a useful personal schedule rather than a collection of unrelated lists.
Prerequisites: Basic terminal and path use, file editing, HTML/CSS, and JavaScript arrays, objects, and functions; React components, JSX, props, state with useState, events, conditional rendering, map/filter, stable list keys, and controlled forms. The Guided Labs teach derived state, ID-based selection, simple interval comparisons, and the necessary useEffect and localStorage concepts before the Challenge. This is not a first introduction to React.
Learning environment: LabEx provides a prepared browser-based React project, its dependencies, a preview, and synthetic festival data. You work on the frontend. Website labels and runtime output remain in English; translated lessons do not imply a translated interface.
Frequently Asked Questions
What counts as a time conflict?
All events use local minutes on the same date. One event may begin exactly when another ends; a genuine overlap is rejected. The course does not handle overnight or cross-time-zone schedules or calculate travel time between stages.
Will my schedule follow me to another device or lab?
No. Recovery is limited to the same browser, the same actual origin, and the still-available lab scene, with browser storage allowed. If browser policy denies storage, choices remain usable only for an in-memory visit; refresh restoration is not promised. localStorage is not an account, a server backup, or a promise of permanent or cross-VM storage.
Will I build a complete festival booking service?
No. You build a personal plan from prepared synthetic data. Backend services, accounts, maps, drag and drop, itinerary optimization, and dynamic server synchronization are outside the course.
