stormsidali2001

Before creating your first component, you need a project, right?. And honestly, what’s better than a single command to do so, thanks to Vite CLI?

pnpm create vite@latest # Or npm create vite@latest In this video, you’ll learn all you need to know about creating React components

You just created your first React project. Hopefully using Vite

npm create vite@latest But you stumbled upon a bunch of weird files and folders.

So you started clicking around, trying to connect the dots, but the more files you opened, the more lost you felt.

In this video, we’re going to break down every single file, one by one, while building a mental map of how they connect.

Have you ever found yourself needing to *create multiple variations of different families of object* in your application without duplicating the logic over and over?

Or perhaps you’ve built an application, only to realize that new requirements or a client’s changed preferences demand entirely new objects, forcing you to rework your entire codebase?

What if there was a way to seamlessly *introduce new variations without breaking your existing code* just by *plugging in a new implementation*?

That’s where the *Abstract Factory* design pattern comes in!

In this tutorial, we’ll break down this powerful design pattern by building a *Node.js CLI application* for creating mutiple types of resumes supporting multiples formats and themes.

Have you ever found yourself dealing with an object that needs to be shared across multiple parts of your application—perhaps a database connection, a WebSocket client, or a configuration manager?

How do you manage such an object so that it remains consistent and accessible throughout the application or process lifecycle? This is where the Singleton Design Pattern comes into play.

In this blog article, I'd like to go through the most important Next.js features which you'll need in practical scenarios.

I created this blog article as a single reference for myself and for the interested reader. Instead of having to go through the whole nextjs documentation. I think that it will be easier to have a condensed blog article with all of the nextjs important practical features which you can visit periodically to refresh your knowledge!

We will go through the bellow features together while building a notes application in parallel.

App Router

Server Components Client Components Nested Routing Dynamic Routes Loading and Error Handling

Server Actions

Creating and using server actions Integrating server actions with client components Data Fetching and Caching

Using unstable_cache for server-side caching 1. Revalidating cache with revalidateTag Using unstable_cache for server-side caching Streaming and Suspense

Page-level streaming with loading.tsx Component-level streaming using Suspense Parallel Routes

Creating and using named slots Implementing simultaneous rendering of multiple pages components Error Handling

Implementing error boundaries with error.tsx