Building “Tanaya”: A Next.Js Travel Planner — From Concept to Code

Intro

Your next adventure starts here. The main interface invites users to begin their journey with a few simple details. 🥰

The Vision Behind Tanaya

• Discover Recommendations: Input their budget, origin, travel dates and number of travelers to receive tailored trip suggestions.

• Filter and Sort: Refine recommendations by specific interests (tags) and sort them by price.

• Manage Trips: (Future-proofed) Simulate booking and saving trips for easy access.

• Personalized Experience: The Long-term vision includes integrating with advanced AI API (like Google’s Gemini API) to generate highly personalized and dynamic travel itineraries.

Diving into the tech Stack

• Next.js (React Framework): The backbone of Tripper. Next.js provides powerful features like server-side logic and external API integration.

• React: For building the interactive and component-driven user interface. React’s declarative nature made it efficient to manage UI state and create reusable components.

• Tailwind CSS: A utility-first CSS framework that allowed for rapid UI development and ensured a consistent design system. Its responsive utilities were invaluable for adapting the layout across different screen sizes.

• Shadn/ui: A collection of beautifully designed, accessible, and customizable UI components built on top of Radix UI and Tailwind CSS. This significantly accelerated development by providing ready-to-use elements like Button, Input, Select, Card and DatePicker.

• Next.js API calls (e.g., to a future Gemini integration) and for handling sensitive operations like simulated reservations and saved trips.

Key Development Challenges & Solutions

1. Crafting a Responsive User Experience

2. Managing Asynchronous Data Flow and UI State Consistency

• Loading States: A loading state variable is set to true before an API call and false afterwards, allowing for visual indicators (like skeleton loaders) to inform the user.

• Data synchronization: The recommendations state is updated only upon successful data retrieval.

• Error Handling: try…catch blocks are used to gracefully handle API errors, preventing crashes and allowing for user-friendly error messages.

• URL-Driven Data Fetching: By linking the data fetching process to the URL’s query parameters (using useSearchParams and useEffect), the applications ensures that the displayed recommendations are always synchronized with the user’s current search criteria, even after navigation or page refreshes. This pattern provides a robust and predictable data flow.

  useEffect(() => {
    const fetchRecommendations = async () => {
      const budgetParam = getParam("budget");
      const originParam = getParam("origin");
      const fromParam = getParam("from");
      const toParam = getParam("to");
      const tagsParam = getParam("tags");
      const travelersParam = getParam("travelers");

      if (!originParam || !fromParam || !toParam) {
        setRecommendations([]);
        setLoading(false);
        return;
      }

      setLoading(true);
      try {
        const response = await fetch(
          `/api/recommendations?budget=${budgetParam || 0}&origin=${originParam}&from=${fromParam}&to=${toParam}&tags=${tagsParam || ''}&travelers=${travelersParam || 1}`
        );
        const data = await response.json();
        setRecommendations(data);
      } catch (error) {
        console.error("Failed to fetch recommendations:", error);
        setRecommendations([]);
      } finally {
        setLoading(false);
      }
    };

    if (showRecommendations) {
      fetchRecommendations();
    }
  }, [searchParams, showRecommendations, getParam]);

  useEffect(() => {
    if (status === "authenticated") {
      const fetchData = async () => {
        setLoading(true);
        try {
          // Fetch saved trips
          const savedTripsResponse = await fetch("/api/saved-trips");
          const savedTripsData = await savedTripsResponse.json();
          setSavedTrips(savedTripsData);

          // Fetch reservations
          const reservationsResponse = await fetch("/api/reservations");
          const reservationsData = await reservationsResponse.json();
          setReservations(reservationsData);
        } catch (error) {
          console.error("Error fetching dashboard data:", error);
        } finally {
          setLoading(false);
        }
      };

      fetchData();
    } else if (status === "unauthenticated") {
      setLoading(false);
    }
  }, [status]);

3. Integrating with External APIs (and the Road to AI)

• Security: Crucially, API keys for external services (like Gemini) are stored as environment variables on the server and are never exposed to the client. All calls to these external APIs are proxied through Tripper’s own API routes.

• Abstraction & Control: API Routes allow me to abstract away the complexities of external API calls. I can define custom endpoints (e.g., /api/recommendations) that handle the logic of constructing requests to the Gemini API, processing its responses, and then returning a simplified, application-specific data format to the frontend.

• Error Handling: Centralizing API calls in API Routes makes error handling more robust. I can catch network errors, handle API rate limits, and return user-friendly error messages to the client without exposing sensitive backend details.

• Future-Proofing: This architecture makes it straightforward to swap out or add new external APIs in the future. The frontend only needs to know about Tripper’s internal API routes, not the specifics of the external services they interact with.

import { NextResponse } from "next/server";
import { getRecommendations } from "@/lib/recommendations";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const budget = Number(searchParams.get("budget")) || 0;
  const origin = searchParams.get("origin") || "";
  const from = searchParams.get("from");
  const to = searchParams.get("to");
  const tags = searchParams.get("tags");
  const travelers = Number(searchParams.get("travelers")) || 1;

  if (!from || !to) {
    return NextResponse.json(
      { error: "Date range parameters are missing" },
      { status: 400 }
    );
  }

  const recommendations = await getRecommendations(
    budget,
    origin,
    {
      from: new Date(from),
      to: new Date(to),
    },
    tags ? tags.split(",") : [],
    travelers
  );
  return NextResponse.json(recommendations);
}

4. Securing API Integrations (Beyond Just External APIs)

import { NextResponse } from "next/server";
import { getServerSession } from "next-auth/next";
import { addMockReservation, Reservation } from "@/lib/mock-reservations";

// ... (GET function is here) ...

export async function POST(request: Request) {
  const session = await getServerSession();
  if (!session || !session.user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  try {
    const reservationData: Reservation = await request.json();

    // Basic validation
    if (!reservationData.tripId || !reservationData.price) {
      return NextResponse.json(
        { error: "Missing required reservation data" },
        { status: 400 }
      );
    }

    // Generate a simple reservation ID
    reservationData.reservationId = `RES-${Date.now()}`;
    reservationData.status = "confirmed"; // Mocking immediate confirmation
    reservationData.date = new Date().toISOString();
    reservationData.userId = session.user.id;

    const newReservation = addMockReservation(reservationData);

    return NextResponse.json(newReservation, { status: 201 });
  } catch (error) {
    console.error("Error creating mock reservation:", error);
    return NextResponse.json(
      { error: "Failed to create reservation" },
      { status: 500 }
    );
  }
}

Future Enhancements

• Advanced AI Integration: Fully integrating the Gemini API to provide more intelligent, context-aware, and personalized travel recommendations. This will involve fine-tuning prompts, handling diverse AI responses, and potentially implementing more sophisticated data parsing.

• Robust Input Validation: Implementing comprehensive frontend and backend validation to ensure data integrity and enhance security.

• Enhanced User Feedback: Replacing basic alert() messages with a more sophisticated and non-intrusive notification system (e.g., toast messages).

• Full Authentication System: Implementing a proper user authentication system (e.g., NextAuth.js) to enable personalized user profiles, persistent saved trips, and secure booking functionalities.

• Optimized Data Fetching: Exploring libraries like SWR or React Query for advanced caching, revalidation, and streamlined data management.

Conclusion