Find the list of projects here: https://github.com/stars/balupton/lists/modern-web-stack
All choices are made to set you on the best path from the start, without learning any unnecessary complexity or skills. All technologies are highly internationally employable. Things like Amazon AWS may be more employable, but it is an inferior offering compared to the Cloudflare stack and AWS's domination is only maintained by usage inertia and enterprise promotions. Cloudflare has caching, threat protection, and unlimited scale for everything you could ever want to do, with a superior underlying tech stack.
Code everything in TypeScript, now you have one language for the server and the client, that ensures you have written correct code. If you are coding in PHP, like it is the 00s, then you must learn PHP, HTML, CSS, and JavaScript, in a fragile stack that does not scale. If you are coding in Node.js or Deno, you are coding in a complicated stack that requries so much trickery by things like like Next.js and its alternatives to actually scale. Just write in TypeScript and target Cloudflare Workers, and it is an infinitely simpler stack with all the robustness and scale the others employ trickery to achieve.
Use Visual Studio Code as your editor.
Use Trunk Check as your meta-linter, it wraps all the various linters and formatters you need.
Deno and Node.js should only be used to facilitate tooling, do not use them in deployments. Use Cloudflare Workers solely as your deployment target.
Astro is a modern and robust framework that is beginner-friendly, you will be able to use it for small websites to large applications. It can deploy the Cloudflare stack natively.
Cloudflare Pages is a wrapper around several Cloudflare stack technologies, such as Cloudflare Workers for serverless functions, and Cloudflare KV and Cloudflare R2 for storage.
An overview of the Cloudflare stack:
- Cloudflare Workers, their serverless functions offering
- Cloudflare D1, their SQL database offering, use for relational data, however interface it with Drizzle ORM
- Cloudflare KV, their key-value store offering, use for small data and database storage, fine for JSON dumps too
- Cloudflare Durable Objects, for things you need realtime collaborative sessions for, such as multi-user text field editing
- Cloduflare R2, their Amazon S3 competitor, use for data storage
- Cloudflare Stream, use this for high quality video streaming
- Cloudflare DNS, their name servers for caching, page rules, and threat protection
- Cloudflare Domains, their doman purchasing offering, will be the cheapest prices you can find
- Cloudflare AI their AI models, could even use this as your multilingual layer, to prefill data in advanced forms
For account creation, do not do passwords at all. No beginner or intermediate developer can do passwords properly, and no beginner or intermediate user can use passwords properly. Instead, just do email validation. You can see bevry/billing for a flow for that, which uses the poorly documented webcrypt-session library and builtin email sending capabilities of Cloudflare Workers. There is also Passage for passkeys, however I am unsure on its Cloudflare Workers compatibility. Do not use Auth0 or Passport.js, they are overly complex and you do not need such complexity; such complexity is only necessary if you wish to deviate from the superior convention of email authentication and/or passkeys. You may be able to find Astro starter templates / example repos with email authentication and/or passkey integration, and if not, make one, as this should be your first starting project, that you will use for everything else.
For user input validation, you can use Zod on both the client-side and server-side, this will greatly simplify your form handling, and all necessary sanity checks throughout your code. It is also compatible with Drizzle ORM.
Use Tailwind CSS as your UI library, it is the largest offering in this space that has hundreds of options. As the largest, it is the most well tested, supported, and documented option. Your life should be spent innovating customer features, not spent inventing or wrangling with an alternative UI libraries every few months.
Do not use Moment.js or Loxon for date, time, and timezone handling. Modern browsers has such support built in for years. You can use bevry/daet for a lightweight wrapper around the builtin functionality: there now might be newer alternatives to Daet that are better documented.
Ideally, there should be a stater repo that incorporates all of these suggestions. If there is not one, create one and share it. Then build all your customer specific applications atop of it.