Travel Planner

Travel Planner is a React application that allows a small group to plan, review, and update a shared travel itinerary. The project was built to consolidate core concepts from Modules 5–7, including React, React Router, Hooks, API-style data fetching, Material UI, and stateful user interactions.

The app is based on a real family trip to Paris and organizes trip details into an interactive multi-page interface with shared notes, day-by-day planning, and editable trip information.

Presentation

View Project Presentation Slides

Project Overview

The goal of Travel Planner is to give a small group a single place to view and manage travel plans. Instead of keeping notes, calendars, tickets, and schedules in different places, the application brings them together into one structured interface.

The app focuses on three key actions:

1. Review the overall trip plan
2. Explore the details of each day
3. Edit high-level trip information and shared notes

This project was designed as a practical example of how React can be used to organize real-world information into a more interactive and user-friendly experience.

Problem It Solves

Travel planning often becomes fragmented across messages, notes apps, screenshots, maps, and booking confirmations. Travel Planner helps solve that by presenting trip information in one place, making it easier for a group to stay organized.

The application allows users to:

• view an overall trip board with daily plans
• open a focused page for each specific day
• interact with a checklist of activities
• update the shared trip title and notes
• persist trip edits between sessions using LocalStorage

Target Use Case

Travel Planner is designed for small groups, families, or friends planning a shared trip who want a lightweight way to review trip details and daily activities.

Because the project is based on a real Paris itinerary, it reflects realistic planning needs such as:

• day-by-day organization
• shared trip notes
• itinerary visibility for multiple people
• simple editing for group-wide information

Features

• Multi-page React application using React Router
• Trip overview page with a summary of each day
• Dynamic route for individual day details
• Interactive checklist for daily events
• Edit page for updating trip title and notes
• LocalStorage persistence for saved trip info
• Material UI integration with a custom dark theme
• JSON-based data source structured like an API response

Routes / Pages

TripBoard (/)

The home page acts as the main trip overview.

It displays:

• trip title
• subtitle and basic travel information
• shared notes
• a grid of day cards with images and short event previews

Each day card links to a detailed route such as:

• /day/1
• /day/2
• /day/3

The page also includes a Material UI button linking to the Edit Trip page.

Day Detail (/day/:dayId)

This page provides a focused view of a single day in the itinerary.

It uses useParams() to read the dayId from the URL and load the correct day’s data. The page displays:

• trip title
• day label and location
• large location image
• list of planned events

Each day’s events are converted into local state with an added done flag, allowing the user to interact with the itinerary as a checklist.

Checklist features include:

• checkbox toggle for each event
• completed items shown with muted styling
• interactive state without mutating the source JSON

Edit Trip (/edit)

This page acts as a lightweight admin/editing screen for shared trip information.

Users can edit:

• trip title
• trip notes

When saved:

• data is stored in LocalStorage under trip-info
• a success message appears using Material UI Snackbar and Alert
• saved data is reloaded on refresh

The TripBoard reads the saved data and reflects the updated title and notes across the app.

Tech Stack

• React
• React Router
• JavaScript
• Material UI
• Vite
• LocalStorage
• JSON data fetching

Data Source

The application currently uses a local JSON file to simulate an API response:

public/trip-data.json

This file contains:

• trip — basic trip metadata
• days — an array of day entries, each containing:
  • id
  • label
  • location
  • imageUrl
  • events

Each event includes properties such as:

• time
• title

Although the current implementation uses a local JSON file, the app is structured to fetch and consume data as if it were coming from a real API, making it easy to replace with a backend in the future.

React Concepts Used

Functional Components

The project is built entirely with functional components.

React Router

Used to structure the app as a multi-page single-page application.

Includes:

• BrowserRouter
• Routes
• Route
• dynamic route params with useParams()

Hooks

useState

Used for:

• trip data
• day data
• checklist state
• form fields
• loading states
• error handling
• success feedback

useEffect

Used for:

• fetching trip-data.json
• loading saved trip info from LocalStorage
• synchronizing persisted state into the UI

State and Data Flow

Trip and day data are fetched, stored, and rendered in the appropriate views. The day event list is cloned into local component state so the checklist can be interactive without directly changing the original dataset.

UI and Styling

Travel Planner uses Material UI as its component library and includes a custom dark theme for a polished, consistent look.

Material UI components used

• ThemeProvider
• CssBaseline
• Container
• Typography
• TextField
• Button
• Snackbar
• Alert

UI design features

• dark mode palette
• responsive day card grid
• large hero image on day detail pages
• clean form layout on the edit page
• simple spacing and visual hierarchy for readability

The use of Material UI helped give the project a more complete single-page application feel while reinforcing reusable component-based design.

Design and Planning

The project was planned around the structure of a real family trip to Paris. Shared travel notes, locations, schedules, and other planning details were combined into a single interface concept.

The application was designed with three core components in mind:

• TripBoard for the overview and navigation
• DayDetail for focused daily planning
• EditTrip for updating shared trip information

A simple wireframe layout was planned first, then refined into the final three-page experience.

Feedback

Strengths highlighted in feedback included:

• strong use of modern React patterns
• effective React Router implementation
• successful use of dynamic routing with useParams()
• LocalStorage persistence for trip edits
• interactive checklist functionality on the Day Detail page
• polished Material UI integration with a custom theme
• well-structured SPA architecture
• strong design planning and README documentation

The project received a 10/10 and was recognized for going beyond a basic static React app by including persistent state, dynamic routes, and interactive features.

Work In Progress

The following are good next steps for improving the project further:

• extract the day card layout into a reusable DayCard component
• create a custom hook such as useTripData to centralize fetch, loading, and error logic
• add form validation to prevent empty titles
• expand editing features for trip days and events
• connect the app to a real backend or API
• allow users to add, remove, or reorder itinerary events
• improve group collaboration features for shared planning

Reflection

This project helped strengthen my understanding of:

• building a React single-page application with multiple routes
• using useState and useEffect for data and UI state
• working with dynamic routes in React Router
• structuring data-driven pages around fetched content
• persisting editable user data with LocalStorage
• integrating a component library into a React app

It also gave me more practice turning a real-life planning scenario into a structured front-end application.

Repository Notes

This public repository is a portfolio version of the project and preserves the development history of the original work.

Setup Instructions

1. Clone the repository
2. Open the project folder
3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open the local Vite development URL in the browser