DEV Community

Cover image for Recent Updates to Galaxy Movies
Nick Fasulo
Nick Fasulo

Posted on

Recent Updates to Galaxy Movies

I've spent some time recently improving Galaxy Movies. It's a movie and TV discovery app I've been building with Next.js.

A lot of the recent work has focused on making the experience smoother and cleaning up parts of the codebase.

Improving the watchlist

The watchlist now gives new users a better starting point. When it's empty, there's a trending section with titles they can add with one click.

The idea is to make it easier for someone to discover their first few titles instead of landing on an empty page.

Here's a simplified look at the empty state logic.

{watchlist.length === 0 ? (
  <WatchlistEmptyState>
    <TrendingRail
      title="Start Here"
      onAdd={addToWatchlist}
    />
  </WatchlistEmptyState>
) : (
  <WatchlistGrid titles={watchlist} />
)}
Enter fullscreen mode Exit fullscreen mode

I also added a small hint for visitors using iPhones who haven't installed the app yet.

Smoother navigation

I added a progress bar at the top of the page to make route changes feel less abrupt. Existing loading indicators are still used when content updates without a full page transition.

I also fixed an issue with provider filtered searches. Previously, titles could briefly appear before the streaming provider lookup finished. Now the loading state stays visible until the results are ready.

The important part is waiting for the provider lookup before displaying the filtered results.

if (isLoadingProviders) {
  return <SearchLoadingState />;
}

return (
  <MovieGrid
    movies={filteredMovies}
  />
);
Enter fullscreen mode Exit fullscreen mode

Some cleanup behind the scenes

I've been consolidating repeated UI elements into shared components. This makes it easier to keep the same look and behavior across different parts of the app.

I also made changes to the sitemap. It now focuses more on pages that are useful for search engines instead of generating URLs that rarely bring in visitors.

Provider change pages now use their actual update dates for lastmod rather than treating every page as if it changed whenever the sitemap was generated.

Keeping track of streaming changes

Another change is a yearly streaming changes accumulator. It keeps track of titles arriving and leaving each provider throughout the year.

The stored data is organized by country, year and provider. That gives me a foundation for future yearly recaps without having to rebuild the history from scratch.

A simplified example of the data structure looks like this.

type YearlyProviderChanges = {
  arrived: Record<string, string[]>;
  departed: Record<string, string[]>;
};

type YearlyChanges = {
  country: string;
  year: number;
  providers: Record<string, YearlyProviderChanges>;
};
Enter fullscreen mode Exit fullscreen mode

What's next

I'm continuing to work on Galaxy Movies and improve the experience as I go. There's still plenty I'd like to add, but I'm happy with how the project is coming together.

You can check it out at galaxymovies.app.

The source code is available on GitHub.

Top comments (0)