Travel Planner
Single Page Application built with React and Material UI
Helps a small group plan and review a shared Paris itinerary
Focus on making the trip info easy to browse (overview → per-day → edits) in one place
user interaction
Overview Scan each day’s plan through visual cards with key events
Day Detail Open a focused daily view with a full schedule
Checklist Mark items complete with interactive feedback
Edit Trip Update trip details with instant save confirmation
DATA FLOW
Structure Trip data is loaded from a JSON file and organized into a trip object and daily plans
Flow Users move from overview → day detail → edits through a single-page experience powered by React Router
Persistence Trip title and notes are stored in localStorage, allowing updates to persist across sessions
Architecture
Routing Defined in App.jsx for overview, day detail, and edit views
TripBoard Loads trip data and renders the main overview
DayDetail Uses route parameters to display a single day’s schedule
EditTrip Manages editable trip information and persistence
hooks
useState Manages trip data, checklist state, and form inputs
useEffect Fetches data and loads saved trip info on mount
useParams Reads the selected day from the URL to render the correct view
tools & libraries
React + Vite
React Router
Material UI (MUI)
Browser APIs
For full implementation details, view the project on GitHub.