HCI

React Lab $1$

This project combines React, Vite, React Router, and TypeScript.

Let$$s build a Travel Destination Explorer App.

Objectives:

$-$ Learn essential React concepts

$-$ Learn how to integrate routing, TypeScript, and Vite

Project Overview: Travel Destination Explorer

Project Goals:

$-$ Use React to build components and manage state

$-$ Set up Vite $$ fast development environment

$-$ Implement React Router for multi$-$page navigation

$-$ Integrate TypeScript to learn type safety in React projects

Description: $($Make this very simple to start$)$

$1.$ Create a Multi$-$Page App

$-$ Homepage:

Introduces the app and lists a few featured destinations.

$-$ Destinations Page:

Displays a list of destinations $($cities$,$ national parks, or countries$)$ with an image, short

description, and $$Learn More$$ button for each.

$-$ Destination Details Page:

Shows details for a specific destination, including history, popular attractions, and travel tips.

$2.$ Routing with React Router

$-$ Set up routes for the homepage, destinations page, and individual destination details page.

$-$ Use dynamic routing for destination details, where clicking on a destination in the list routes to a URL

like $/$destination$/$:id$.$

$3.$ TypeScript Integration

$-$ Define types for destination data, including fields like name, image, description, and id$.$

$-$ Ensure type safety when passing data to components.

$4.$ Data Handling

$-$ Mock data: Provide an array of destination objects as mock data for simplicity.

$-$ Optional Challenge $->$ use a JSON file or fetch mock data from a public API to give students

experience with useEffect and async$/$await$.$

$5.$ Component Structure

$-$ Break down the UI into reusable components, such as DestinationList, DestinationCard, and

DestinationDetails.

$-$ Use props to pass data between components and practice TypeScript$$s interface or type keyword to

define prop types.

$6.$ Styling

$-$ Basic styling to give the app a simple, user$-$friendly interface.

$-$ Optionally introduce a CSS framework like Tailwind or Bootstrap to focus on component functionality

over complex styling

send me all parts of the code and output when running