Site Redesign
I redesigned my site to have a minimal retro computing feel while still looking modern. For the UI, I used v0 by Vercel, shadcn/ui, and Lucide. I also moved from Next.js 13 to Next.js 14.
Overall I'm happy with the outcome and enjoyed working with these new frontend tools. It's a solid improvement vs. the old site.
v0 by Vercel
v0 is tantalizingly close to being amazing!
It was fun giving plain English instructions to the AI and tweaking the generated UI. It felt... collaborative. That said even with the handy npm package to add the generated code to your project (just type npx v0 add XXXXXXXXXX) there's still a lot of tweaking/adjusting. Plus the UI didn't exactly match what was shown in the web app.
I think right now this is most useful for intermediate coders (like myself) who need directional pointers and to more experienced engineers who don't have as much frontend/design experience. I'm sure it'll keep getting better with time. It'll be magical when it works for anyone who's got an idea and knows just the basics of HTML/CSS/JS.
For reference, here's what I got from v0 after 11 iterations.
shadcn/ui
I really like the shadcn/ui library.
The approach of adding editable components directly to your app rather than installing additional npm packages was an adjustment at first, but I ended up really liking it. In the past, I fought with the defaults in MUI Components and especially with Tailwind Typography. This library gives you great visibility and makes customizing UI components so easy.
Lucide
I picked Lucide because this is what came out of the box with v0 and shadcn/ui. I didn't do much research/comparison, but the icons look great. I don't have much to else add, but I think ease/aesthetics is what counts here.
Moving to Next.js 14
If I could go back in time, I would not have migrated to the new Next.js. I would have just focused on the UI updates or split this into two separate projects.
It was an adjustment going from page routing in Next.js 13 to app routing in Next.js 14, and I spent a lot of time replicating the same old functionality with the new patterns.
One other challenge came from the lack of support for Next.js 14 in current AI models. Next.js 14 was released on October 26, 2023 after many models have been trained. The recency of the update meant that suggestions from cursor, ChatGPT, etc. were not specific to Next.js 14. I spent more time consulting the docs and copying/pasting code samples. This worked. It just goes to show how reliant I've become on the AI code assistants. Of course these models will get better over time too.
That said now that I've made the move, I'm happy with it. I learned the new framework, which was one of my goals. And Next.js 14 does feel a bit more intuitive/ergonomic. It should make things easier when I add new stuff in the future.