Japan Itinerary React App

A React application that displays a travel itinerary for Japan with a reusable Day component structure.

Features

• Reusable Day Component: A modular component that can handle complex nested itinerary data
• Structured Data: All itinerary information is organized in a clean, maintainable data structure
• Responsive Design: Maintains the original styling with responsive behavior
• Nested Lists: Supports multiple levels of nested bullet points and sections

Project Structure

src/
├── components/
│   └── Day.js              # Reusable day component
├── data/
│   └── itineraryData.js    # Structured itinerary data
├── App.js                  # Main application component
├── index.js                # React entry point
└── index.css               # Styles (same as original)

Day Component Structure

The Day component accepts the following props:

• dayNumber: Number for CSS class naming
• title: Main day title (e.g., "Day 1")
• date: Date string
• subtitle: Optional subtitle
• activities: Array of main activities (can be strings or objects with nested items)
• sections: Array of sections with their own titles and activities

Data Structure Example

{
  dayNumber: 1,
  title: "Day 1",
  date: "Monday March 18",
  subtitle: "Chuo City",
  activities: [
    "Simple activity",
    {
      text: "Activity with sub-items",
      subItems: [
        "Sub-item 1",
        "Sub-item 2"
      ]
    }
  ],
  sections: [
    {
      title: "Section Title",
      activities: [
        // Same structure as main activities
      ]
    }
  ]
}

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Open http://localhost:3000 to view it in the browser.

Adding New Days

To add a new day to the itinerary:

1. Open src/data/itineraryData.js
2. Find the appropriate city in the cities array
3. Add a new day object to the days array following the structure above
4. The app will automatically render the new day

Styling

The app uses the same CSS as the original HTML version, maintaining the visual design while providing the benefits of React's component structure.

Benefits of This Structure

• Maintainable: Easy to add, remove, or modify days
• Reusable: The Day component can be used for other itineraries
• Scalable: Can easily add new features like filtering, search, or interactive elements
• Type Safe: Can be easily converted to TypeScript for better development experience