Vibe Coding my first HERE App – Part 2

In the recent blog post, I shared my experience building a HERE-powered app from scratch. Since then, I’ve made several improvements to the GitHub project and explored some interesting features of the Vite framework and TanStack Query. This post walks through those updates and what I learned along the way.

GitHub Improvements and Project Structure

Let’s start with the changes I made to the GitHub repo. The source folder now reflects a cleaner structure, and I’ve added routing support using Vite’s built-in integration with TanStack Query.

One of the coolest discoveries was that Vite provides routing out of the box. In the `routes` folder, you’ll find a dummy route file named `aj.tsx`. If you navigate to `localhost:3000/aj`, it routes directly to this component. It was fun to test, and it worked seamlessly. If you’re looking for a framework that simplifies routing, Vite and TanStack Router is a solid choice.

Read more about it here

Main Logic: main.tsx and index.tsx

Most of the core logic of the API key validator app resides in main.tsx and index.tsx. These files also import styles from style.css, which was automatically generated during project initialization.

There are two manual additions here:

QueryClient Configuration

• In main.tsx, I defined the QueryClient and wrapped the app with QueryClientProvider, ensuring that every child component has access to TanStack Query’s capabilities.

React
1   <StrictMode>
2      <QueryClientProvider client={queryClient}>
3        <RouterProvider router={router} />
4      </QueryClientProvider>
5   </StrictMode>
6

Copy

• This setup enables:

  • Efficient data fetching and caching, especially useful when working with APIs like HERE.

  • Automatic background refetching, keeping data fresh without manual polling.

  • Built-in retries and error handling, improving resilience in unstable network conditions.

  • Declarative data management, reducing boilerplate and improving code readability.

  • Devtools integration, aiding debugging and monitoring of query states during development.

  • Optimistic updates and pagination support, which enhance user experience and performance in complex data scenarios

Routing Provider Setup

I also configured the routing provider to enable automatic distribution of correct routes and pages. This ensures that navigation between views is seamless and that each route correctly renders its associated component.

React
// Create a new router instance
const router = createRouter({
  routeTree,
  context: {},
  defaultPreload: 'intent',
  scrollRestoration: true,
  defaultStructuralSharing: true,
  defaultPreloadStaleTime: 0,
})

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

Copy

Styling

Styling was kept intentionally minimal. I may have tweaked a few things in style.css—perhaps the color of the bubbles—but honestly, I don’t recall doing much there. For demo code, CSS isn’t a priority. In my experience, LLMs can handle styling well enough if needed, so I focused more on functionality and developer experience.

What’s Next?

Working with Vite and TanStack Query has been smooth so far. The built-in routing and query support saved me a lot of setup time. Moving forward, I plan to explore more HERE APIs in future updates. I’ll also improve the UI and add better error handling so you can access a more polished version online.

If you’re curious. Feel free to fork the code, test it, or suggest improvements!

Happy coding—and see you in the next one!

Here is my version of HERE API Key Validator, enjoy!