taxonomy VS shadcn/ui

I am building this app with inspiration from Taxonomy and Acme corp so a lot of the design comes from there.

View on GitHub

Now, I must confess that I'm primarily a back-end engineer, and crafting a beautiful front-end was, well, a bit of an adventure. To keep things straightforward, I opted for simplicity. I figured I could enhance it as my customer base grew, as the real value, of course, lies in the robustness of the API and its backend. Looking back, I might consider using a template like https://tx.shadcn.com/ if I were to start all over again. It appears to be a great starting point for any SaaS, but the setup might pose some challenges.

Check out these two GitHub repositories: https://github.com/sadmann7/skateshop/ and https://github.com/shadcn/taxonomy/. They both use Next.js 13 and have well-structured folders and well-written code. Next.js provides performance optimization. To improve it further, avoid loading unnecessary items and use a CDN for fast content delivery. Both not loading unnecessary content & lazy loading) and CDN is 2 individual topics to dive into.

I've also been inspired by this repo, but the Vercel template seems more achievable for me at this point.

In addition to the repository I mentioned in my original post, I've also been inspired by another repository (Taxonomy Repo) which has implemented a similar Stripe integration. However, this one is a bit more complex and I'm finding the Vercel template to be more achievable for my current skill level.

I'm currently working on a Next.js project where I'm trying to integrate Stripe for payments and webhooks. I've been following the Taxonomy GitHub repo for guidance, particularly for setting up the app router and the lib files.

Finally, for our front end, we’re going to be pairing Next.js with the great combination of TailwindCSS and shadcn/ui so we can focus on building the functionality of the app and let them handle making it look awesome!

Shadcn/ui: I've never tried it before but have always wanted to switch from MaterialUI

Honestly the ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that.

[1] https://ui.shadcn.com/

shadcn/ui

This model is very similar to the popular shadcn workflow. After files are creating in your local repo, you can modify them and check them into source control.

Link: https://ui.shadcn.com/

One of my biggest fears as a frontend dev is to build UIs that are inaccessible for people. It's easy to take so many things for granted.

The good news is you get a lot of accessibility out of the box using native html. For higher abstractions I love working with accessibility first libraries like Shadcn (which is built on top of Radix): https://ui.shadcn.com/

For development of the UI components, we tried something new. Vercel has this new AI tool called v0.dev that allows developers to take advantage of shadcn/ui and Tailwind using nothing but words, which can then be easily downloaded to your local project using nothing but a simple npx command.