🚛Woobler'sOtherHouse🚔
Dev Diary: Creating This App
I'm an engineer at Gap Inc., and Woobler is my younger son, to whom this site is dedicated. We like serifs.
August 2024
I am leading my team's apps from being two of a constellation of React SPAs to just another set of packages within a massive Next.js monorepo.
Routing, auth, global state and CI/CD was done by a designated architecture team, however; my team of about a dozen people concerns itself with colossal leaf nodes on product display pages. If that seems overly specialized, consider that our site is essentially the same code
for many brands: Gap, Old Navy, Banana Republic, and Athleta. Then add additional complexity of our sites for other countries, our commitment to accessibility, and the myriad subtle features required to make a pleasant e-commerce experience; this is one of the world's largest clothing giants, after all!
My team was left out of the foundational work. I wanted to know what setting up a proper, complex Next.js was all about, so here we are!
NextJS
My team was left out of the foundational work. I wanted to know what setting up a proper, complex Next.js was all about, so here we are!
September 2024
This month I'm hoping to learn about the 
Questions of authentication and authorization are now a bit more complicated than in SPAs! This is a meaningful place to maintain them and see how they evolve along with Next.js.
IntersectionObserver API, aggressive preloading, and NextAuth.NextAuth
In past jobs I used React Router, Tanstack Router, and SvelteKit routing. The latter felt the most like the app-based routing of Next.js, at least in version 14. I then learned that Vercel manages both technologies. They hired Rich Harris in 2021!
October 2024
Probably the trickiest bit so far was getting AWS Amplify + Cognito + NextAuth to work harmoniously together. Amplify wants environment variables in the web console, NextAuth wants a 
and Cognito has options for everything under the sun. The final solution, not mentioned in the Amplify configuration, was to write the environment variables to an inaccessible production .env document at build time. That's something I had to figure out on my own. Google, Stack Overflow and ChatGPT just regurgitated the NextAuth documentation.
Another subtle thing that took me a while to figure out was that because NextAuth supports a wide variety of auth providers, it is not configured to return the given JWT token of a given provider by default. How could it? They label them differently. This took a while to figure out
because for years I had used Cognito JavaScript APIs for both React SPA front ends and Node.js back ends. So testing in Bruno, a fine alternative to Postman, I kept getting 401s because the token I plucked out of browser cookies following a successful login was not actually from Cognito. A quick tweak to the NextAuth configuration object fixed that.
secret attribute in the auth configuration object,Amplify
Another subtle thing that took me a while to figure out was that because NextAuth supports a wide variety of auth providers, it is not configured to return the given JWT token of a given provider by default. How could it? They label them differently. This took a while to figure out
Cognito
November 2024
I created a color picker feature, mostly as a math problem for my older son but also to see what the process would entail. Not much, I suppose. The trickiest bit was finding the best way to the user's color selection across refreshes without making an API call, since the feature should apply to users who have not logged in.
In a React SPA, this is effortless. But in the case of a server-rendered page, it takes a bit of finessing to prevent the page from resetting to a default color if the user refreshes or visits in a new tab. Hence, a lot of time spent with the Chrome dev tools open.
Of course the big excitement for this month was applying Tanstack Query, which I had used two years ago at Offor Health and also for www.alexgochenour.xyz. What made it exciting was the simple resolution of a problem that I had always found annoying to solve with React alone: preventing needless API calls. With Tanstack, it's a snap, and there are several ways to go about it. If you want to prevent refetches on a page, you can pass the
of `useQuery`. If you want to prevent refetches only for a specific interval, you can instead pass the
Chrome
Of course the big excitement for this month was applying Tanstack Query, which I had used two years ago at Offor Health and also for www.alexgochenour.xyz. What made it exciting was the simple resolution of a problem that I had always found annoying to solve with React alone: preventing needless API calls. With Tanstack, it's a snap, and there are several ways to go about it. If you want to prevent refetches on a page, you can pass the
refetchOnMount key to the configuration objectTanstack
staleTimeinstead. And there's more, but this is all I have explored for now. As it is, if you navigate away from the man page and then back to it with the Network tab open, you'll notice it doesn't make an API call to get the images again. Thanks, Tanstack!