Since January 2019, I’ve maintained prospectorminerals.com, a website dedicated to showcasing minerals.
It’s gone through a number of iterations, which you can read all about here, but in its current form, it contains a database for minerals, a searchable map of localities, as well as a collection of photos.
The Tech Stack
I used Next.js and Prisma ORM with Postgres under the hood. In my opinion, it gives the website the right balance of abstraction for this case: Prisma’s schema allowed me to set up my fields & queries fairly easily, while still providing me with enough features right out of the gate to make the complex stuff (e.g. relations, pagination) happen. The latter was particularly useful—check out the prospectorminerals.com and take a look at all those filters!
And the localities map was also built with Leaflet, the most popular open-source mapping library. Prospector Mineral’s owes its sleek and modern design to NextUI, another popular addition to React apps.
Finally, I used Auth.js (formerly NextAuth) to add memberships. Figuring out how to set it up (and upgrade to v5) was time- consuming, but if you’d like to know how I ended up doing it, you can take a peek at an Auth.js Prisma starter.
Some Challenges
It wasn’t all smooth sailing, unfortunately. One major issue with Prisma is that it doesn’t allow you to spread objects when generating types, so I had to define them twice: once in my server action file and the other in a dedicated types file. Furthermore, I had some trouble with Prisma generating types for deeply nested fields, which happens a lot in my app (e.g. retrieving data from a photos model referenced within a localities item referenced within a minerals item.)
One-sided many-to-many self relations are also not currently supported, so I had to modify the Prisma client (and some queries) in order to ensure that the relations are synchronized.
In essence, it seems that, in an ORM, you can either choose between more flexibility, or more robust typescript support. Compared to Drizzle and other alternatives, Prisma falls under the latter category. But given all the work Prisma has been putting in with that sweet VC funding, that might be changing…
React Leaflet (and by Leaflet by extension as well) is also one great library. But, as in the case of many React frontend libraries, I ran into the classic Next.js SSR error, and had to use some hooks to quash those window is not defined errors. Not a big deal, but something worth noting.