hk-travel-assistant

The idea for the Hong Kong Travel Assistant was sparked by my love for travel and my fascination with Hong Kong’s vibrant culture, stunning skyline, and diverse attractions. As someone who often plans trips, I found myself overwhelmed by the complexity of coordinating itineraries, especially with real-time data like MTR schedules or community feedback. I was inspired by the potential of AI to simplify this process, drawing from tools like Google Maps and travel blogs, but with a personalized, local twist. The vision was to create an intelligent assistant that not only plans trips but also learns from user feedback, making it a living travel companion.

This project was a deep dive into full-stack development, and I emerged with a wealth of knowledge:

TypeScript and React: Mastering TypeScript’s type safety transformed how I debugged, ensuring fewer runtime errors. React hooks like useEffect taught me about state management and dependency arrays. Database Integration: Working with PostgreSQL via Prisma exposed me to schema design, migrations, and real-time data persistence. I learned to handle nullable fields (e.g., mtrStation: string | null | undefined) to avoid type mismatches. API Development: Building RESTful APIs with Express and integrating them with a backend AI service (simulated via Bedrock) honed my skills in request handling and error management. Collaboration Tools: Using Kiro for code generation and debugging introduced me to AI-assisted development, teaching me to balance automation with manual oversight.

How I Built the Project The development process was a structured yet iterative journey: Planning and Setup

I started with a project structure using Node.js for the backend and React for the frontend, hosted on my Linux Mint system. Installed dependencies: npm install prisma @prisma/client typescript react-scripts @mui/material.

Backend Development

Designed a PostgreSQL database with models like Itinerary, Activity, and Feedback using Prisma. Built API routes (e.g., /api/itinerary/generate) in src/routes/ to handle CRUD operations, integrating with a mock AI service. Implemented services in src/db/services/ (e.g., itineraryService.ts) to manage database queries.

Frontend Development

Created components like Chat.tsx, ItineraryPreview.tsx, and Dashboard.tsx using Material-UI for responsive design. Added hooks to fetch data from /api/ endpoints and display it with loading states. Ensured TypeScript safety across all files, resolving conflicts with proper naming (e.g., updateItineraryInDb).

Integration and Testing

Connected frontend to backend APIs, testing with curl commands (e.g., POST /api/chat/message). Used Prisma Studio to verify data persistence and ran end-to-end tests with prompts like "Plan a 3-day business trip."

The build process involved $ n $ iterations, where $ n \approx 10 $, refining code with each feedback loop from compilation warnings or runtime errors. Challenges Faced The journey wasn’t without hurdles:

TypeScript Errors: Initial TS2322 errors due to mismatched types (e.g., mtrStation: string | null vs. string | undefined) required careful schema and interface alignment. This taught me the importance of type consistency. Port Conflicts: Multiple EADDRINUSE errors on ports 3000 and 3001 arose from unterminated processes, solved with kill -9, highlighting process management. Import Conflicts: Duplicate function names (e.g., updateItinerary) in routes/ files caused TS2440 errors, resolved by renaming and refactoring, emphasizing naming conventions. Dependency Management: ESLint warnings about unused variables and missing useEffect dependencies required code cleanup, reinforcing best practices in React.

Conclusion Building the Hong Kong Travel Assistant was a rewarding challenge that blended my passion for travel with technical growth. Despite the obstacles, the project now stands as a functional, database-integrated travel planner, ready for deployment. I’m excited to share it and continue enhancing it with features like analytics or multi-language support!