TripSmart AI

Travel planning is notoriously fragmented. Users typically juggle 3-4 different tabs: Google Maps for routes, Excel for budgets, and TripAdvisor for recommendations. This context switching leads to decision fatigue, lost data, and budget overruns.

I built a centralized Single Page Application (SPA) that aggregates itinerary generation, budget tracking, and route visualization into one cohesive flow

Architectural Decision: I chose a NoSQL database (MongoDB) over SQL because itinerary structures vary wildly (e.g., a "beach day" vs. "city tour") and required a flexible document schema to adapt without rigid migrations.

• React + TypeScript: For robust, type-safe state management of complex itinerary objects.
• Node.js: To maintain a unified JavaScript environment across the full stack.
• Tailwind CSS: For rapid, responsive UI development without context switching to CSS files.

• AI Itinerary Generator: Creates day-by-day plans based on user constraints (budget, dates, interests).
• Dynamic Budget Tracker: Real-time deduction of estimated costs from the total budget as activities are added.
• Interactive Map Integration: Visualizes daily routes to verify logistical feasibility.

Challenge: Complex State Management
Managing the nested state of a multi-day itinerary (Days > Activities > Details) caused "prop drilling" and render performance issues.

Solution: I implemented Context API with useReducer to centralize state logic, which simplified component updates and improved maintainability.

Challenge: Map API Quotas
Frequent re-rendering of the map component was rapidly consuming API quotas.

Solution: I implemented Debouncing on map update triggers and cached common route data, reducing API calls by ~40%.

The final MVP successfully unified the planning workflow, allowing users to create a complete 3-day itinerary in under 5 minutes. This project sharpened my skills in handling complex nested data structures and optimizing frontend performance in interaction-heavy applications.