TLDR - Next.js, GraphQL, FaunaDB, Tailwind, Auth0
I came across a Sam Selikoff's video on Buildng my first Next.js app, and really liked the idea of having a kind of boilerplate CRUD app (in his example, a recipe app) that you might rebuild with different front end stacks.
I think around that time, I had watched a couple sessions from React Europe, one of which covered the Next.js 9.4 release. In the past, I have used Gatsby, but had yet to look at Next, and so here we are.
Prerendered, static sites have gained momentum in the past 2-3 years, filling a niche and providing improved performance and developer experience for use cases involving, well... static content. Documentation, brochureware, etc, are great candidates for Gatsby or Next, but I think they are increasingly catching on in cases where we might have used a traditional SPA pattern for more interactive experiences without the bloat.
Features like Incremental Static Regeneration and Dynamic Routes include the best features of statically rendered sites with the flexibility to generate dynamic content at runtime.
As this was my first time using Next.js, it was also my first time using the Vercel deployment platform. I love using Netlify, so my expectations were high.
It was fairly easy to setup, and now whenever I push to master, my app is built in less than a minute. I also liked that branch deploys were active with zero configuration. Nice! My only question is why my site deploys to (what seems like) a million domains.
I didn't start with Fauna as my backend - I actually started with Hasura. I ran into some problems designing and configuring my database (mostly because I'm not really experienced doing so) and I wasn't quite sure how to setup foreign key relationships in Postgres so that I could access them via GraphQL relations. I've heard good things about Hasura, so I chalk this up my lack of determination 😅
I hate to say it, but I think I tried FaunaDB because they had been running a lot of promoted tweets during this time. In any case, Fauna setup "clicked" for me, maybe because you can start with a graphql schema, and once I realized you could create indexes with custom search fields, I felt comfortable setting up what I needed for this app.
This was my first time using tailwind css, and I like the utility-first concept. Boostrap and Bulma are nice, but I would often supplement those base styles with sass spacing utilities. It can get a little repetitive, but you can always extract your own components, or add your own styles.
I began this project using theme-ui, a css-in-js jsx framework with its own components package. Initially I wasn't a huge fan of css-in-js as I found it hard to read. After a few days I got used to it, and enjoyed the flexibility. I could not get what I wanted out of the theme-ui components, so eventually I scrapped the whole thing, and converted to tailwind.
Auth0 via react-use-auth.
🚨 Bug alert: If you are using Chrome, and are blocking 3rd party cookies, a hard refresh will log you out of the session 😱
There is an open issue with the useAuth package - if I can't figure out a workaround, I might look at another authentication mechanism. If anyone has experience with auth0 and/or useAuth, please let me know!
Illustrations from Undraw.