I haven't touched frontend code for a couple years now, but I have a long history with it. I've been making websites since I was a kid, used to write Rails apps for work, lots of JS and jQuery, various CSS frameworks, and even used React for a while when it was initially released. And lots of other frameworks of course. So I'm not new to this stuff.
I just had an idea for a side project and I want to make a modern website. I spent the last 20 hours trying to figure out what the best practices are now. Everything should've gotten easier, right? It has been 10 years after all.
But I'm totally lost. 4 layers of bundlers. Two layers of language abstractions. CSS frameworks that need to be compiled!? Several more layers of database abstractions and services that I have no idea what they do by looking at their landing pages.
My requirements are pretty simple. I want it to work on all devices and look good. I need some user authentication and user state, but nothing complex. The data model is relatively simple, but it needs to be stored somewhere, local storage is not enough.
From all my research, my best bet right now seems to be next.js + React + Tailwind because that combination seems to be relatively popular and well-documented with good editor integrations. Not sure what to use for the database/backend though. I also looked at htmx but don't really like the idea of templating html snippets on the server without great editor integration.
So, how do I actually make a modern website? Is it really this hard?
(I'm aware there have been similar threads the past year, but they're already a year old, which is an eternity in JS world)
If your goal is to build a complex single page app then you will do fine with React, Angular or Vue. All of these have a learning curve made more complex by the compilation stages required to get it to the browser, but the documentation made by the developers should be enough to get started.
If you want to become competent without having to waste time tracking down blog posts or Stack Overflow answers for specific questions, go and buy a Udemy course for the particular library you want to use. All of the big ones have good courses that will take you from zero to making your own application. It should give you a strong foundation. The courses are inexpensive if you wait for a sale day. There are often a couple every month.
Finally, I think this is where ChatGPT really shines. It is a great tool for exploring new libraries and solving all the small problems you run into along the way. Imagine all the questions you would want to ask on Stack Overflow but they would get downvoted, you can ask those questions to ChatGPT. Stuff like how do I make a checkbox, why does this piece of state not update like I expect it to, how do I display my components in certain routes, show it your webpack file and ask why your application is not starting, etc.