Mastering JavaScript
What to learn? What to use? And more...Next.js (Full-stack React Framework)
The first thing I'd recommend is to get aquianted with Next.js
- Why Next.js? Because it's The React Framework for the Web.
- Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.
- And even React documentation recommends it first before anything else. Don't believe me? See for yourself: Starting with React
Bun (An all-in-one JavaScript runtime)
Make a switch from Node.js to Bun, or pnpm
- Why Bun? Why not Node.js? Because Bun is the future.
- Besides being a runtime, Bun is a toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.
- Elegant APIs. Bun provides a minimal set of highly-optimimized APIs for performing common tasks, like starting an HTTP server and writing files.
- Bun is designed as a drop-in replacement for Node.js. It natively implements hundreds of Node.js and Web APIs, including fs, path, Buffer and more.
- The goal of Bun is to run most of the world's server-side JavaScript and provide tools to improve performance, reduce complexity, and multiply developer productivity.
What else?
Now that we have the runtime and full-stack framework, let's get to the fun part.
CSS is bothering me. What should I do?
Use Tailwind CSS, a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Do I need any UI libraries?
Just shadcn/ui, beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. Though it's your choice, don't spend too much time on searching UI libraries.
I need icons. Where do I get them?
Use Lucide Icons, beautiful & consistent icons. Made by the community.
Forms are hard. How do I make them easier?
Use React Hook Form, performant, flexible and extensible forms with easy-to-use validation.
What about state management?
Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences. If needs to be whole app, you can also use Jotai,an atomic approach to global React state management.
Which database should I use?
I'd recommend using PostgreSQL. It would fit most of your needs. If not give MongoDB a try.
How do I interact with the database?
Go Drizzle, a TypeScript ORM that is lightweight, and production ready. With zero dependencies, and no code generation, Drizzle is the simplest way to interact with PostgreSQL and other databases.
Authentication is giving me a headache. What should I do?
If we are using Next.js, we can use NextAuth.js. It is a complete open source authentication solution for Next.js applications.
How do I ensure type safety?
Use Zod, TypeScript-first schema validation with static type inference.
Where can I host my application?
I'd recommend using Vercel. Vercel’s Frontend Cloud provides the developer experience and infrastructure to build, scale, and secure a faster, more personalized Web.