Latest Tutorials

This article will dive into a development stack that is gaining traction due to its robustness and adaptability. We'll explore what sets this stack apart from well-established stacks like MEAN and MERN, and why developers should consider its adoption. The cutting-edge stack we're exploring comprises several technologies that, although not entirely new, are combined uniquely to boost development efficiency and code quality. This modern stack includes: This stack facilitates enhanced type safety, seamless management of monorepo structures, shared configurations across packages, and a streamlined frontend setup with Vite, React, and Tailwind. Moreover, this stack enables database migration with raw SQL and access via knex.js , using tRPC as the API layer and Koa as the backend framework. Although this modern stack shares some technologies with MEAN and MERN, it distinguishes itself with the inclusion of TypeScript , TailwindCSS , Koa , Knex , and tRPC . These additions bolster type safety with TypeScript, reduce plumbing code requirement with tRPC, and optimize the use of PostgreSQL. The components of this stack are interchangeable, providing developers with the freedom to substitute any part of the stack with alternatives that better cater to their needs. This adaptability and interchangeability lead to a slightly more complex setup process than MEAN and MERN, but the trade-off is justifiable for the resulting control and flexibility it offers. This advanced stack is suitable for developers who: The strength of this stack lies in its capability to build type-safe full-stack applications, establish robust and scalable application architectures in a monorepo, and use the database as the underlying source of truth. It allows for database migration using raw SQL and capitalizes on all the sophisticated features that PostgreSQL offers. The modern stack, Fullstack TypeScript with TailwindCSS and tRPC Using PostgreSQL , presents a distinctive mix of technologies that boost development efficiency, code quality, and type safety. It may demand more setup effort than traditional stacks, but the resultant flexibility and control over the components make it a formidable contender for your next project. For an extensive exploration of this stack, consider Kristian Dupont’s course Fullstack TypeScript with TailwindCSS and tRPC Using Modern Features of PostgreSQL . The course provides a detailed understanding of the stack and its benefits, making it a precious resource for developers keen on exploring this modern stack.

Welcome to this introductory guide on leveraging tRPC for full-stack development. With TypeScript's increasing popularity, tRPC has surfaced as a modern standard that empowers developers to achieve automatic type safety, an optimized developer experience, and exceptional compatibility with existing JavaScript frameworks. This guide aims to introduce you on integrating tRPC into your web stack and its efficient usage with PostgreSQL's modern features and TailwindCSS. This educational article is specifically designed for individuals who: If you're new to tRPC , then you definitely need to continue reading. tRPC holds immense potential to become a leading modern standard for several reasons: To explore more about tRPC , visit their official site . Let's dive into the three crucial steps to integrating tRPC into your web stack. Procedures in tRPC are the functions used to construct the backend. They can be queries, mutations, or subscriptions. The initial step in creating a tRPC API involves defining these procedures. Next, establish the HTTP server using the appRouter . Now, a tRPC server is live and functional! With the server operational, create a client and initiate querying data. Pass the AppRouter type when creating the client to provide TypeScript autocompletion and Intellisense matching the backend API without requiring any code generation. The technology stack for this specific guide includes NodeJS, React, TypeScript, TailwindCSS, tRPC , PostgreSQL, Koa, and Knex. All these technologies are mature, and have proven their mettle in production. For a more visual representation and in-depth details on this stack, you may refer to this video tutorial by me, Kristian Dupont, on \newline’s YouTube channel. The integration of tRPC with an entire technology stack provides numerous advantages, particularly in terms of type safety and code confidence. The stack discussed in this guide facilitates end-to-end type safety, enhancing the developer experience by preventing potential errors, aiding refactoring, and improving team communication. To further bolster your learning experience, consider the full course Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL by Kristian Dupont on \newline .

Are you ready to dive into the world of powerful database management with PostgreSQL and NodeJS? This guide is designed for beginners who want to understand how to use PostgreSQL in their NodeJS projects. Whether you're new to databases or looking to expand your skills, this tutorial will help you get started with confidence. In this guide, we'll cover: By the end of this tutorial, you'll have a solid foundation for building applications with PostgreSQL and NodeJS. For a more visual representation and in-depth details, you may refer to this video tutorial by me, Kristian Dupont, on \newline’s YouTube channel. Before we begin, you'll need to have PostgreSQL installed on your system. Here are two ways to do it: If you prefer using Docker, you can run PostgreSQL in a container with this one-liner: This command will: Now that we have PostgreSQL installed, let's set up our NodeJS project and connect to the database. Let's create a simple Koa server that we'll use to handle our API requests. Create a new file named server.mjs : Now, let's implement three endpoints for basic CRUD operations on a users table. First, let's create our users table. Run this SQL command in your PostgreSQL client: Now, let's add our routes to server.mjs : These routes allow you to: At this point, you should be able to start your server with the following command line: It should print that the server is running on port 3000. You can try it out by opening this route in a browser: http://localhost:3000/users — which should give you an empty array. Use a tool like cUrl or Postman to try out the POST route and see that you can create users in your database. The guide above forms part of a broader context, which includes working with a monorepo , setting up npm workspaces in monorepos , sharing configurations across packages, setting up the frontend with Vite , React , and Tailwind , and more. The full stack comprises the following technologies: This development stack provides end-to-end type safety, a greater confidence level when refactoring, and the ability to work with the database using plain SQL while still maintaining a type-safe architecture. Mastering PostgreSQL doesn't have to be intimidating. With this guide as a base, you can embark on your journey towards advanced database management using a full stack of contemporary technologies. To enhance your skills further, check out my course Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL . Happy learning!

If you are using PostgreSQL for storing data of multiple users, you might want to apply row-level security, or RLS. It’s good practice even if you are manually writing all the queries you send to your database but it’s especially important if you have any type of LLM or similar generating queries for you! Let’s create a trivial data model. Users and items, whatever that might be. Each item belongs to a user. Now, per default, if you ask the database about any users items, it will just tell you. By introducing RLS, you can limit what the responses will be to add a layer of protection. Even if you should create a buggy query, you will not accidentally get the items belonging to someone else, just like you cannot accidentally change or delete items belonging to someone else. We do that like this: Note that app.curren user id isn’t something PostgreSQL knows about per default, it’s a variable that we have introduced. Now basically, we need to execute SET app.curren user id = '(user_id)' , before making some user-specific query. Or if you have a transaction, you could use SET LOCAL which will make the transaction scope function as “auth scope” as well. Depending on your setup, there are going to be different ways to set the app.curren user id setting. In this example, I will assume a setup based on Express or similar, and Knex for creating queries, but the pattern can easily be changed to fit whatever your setup requires. The app.curren user id needs to be set only once per session. This session variable is local to the database connection, meaning each connection has its own set of session variables. When using Knex or similar to execute a query, it acquires a connection from the pool. The session variables set in that connection are isolated from other connections. Now, with Express and similar frameworks, you will typically use the context variable to store state that is related to a given request. You might already have some code in middleware that checks a token and fetches the corresponding user from the database. What we could do is to put a knex instance into this context, and make sure that instance has set the user id. However, this forces us to do quite a bit of “prop drilling” as we need to pass this instance around as a parameter to any function that needs to access the database. What we can do instead is to use a class called AsyncLocalStorage which allows us to store state related to a specific async context. This is similar to “thread-local storage” in other languages, only we don’t have threads in NodeJS but async contexts. Apply the dbMiddleware to your server whereever you set up other middleware, and now you can use the getKnexInstance to get the authenticated database connection. Here is an example of a very simple server: As you can see, this endpoint selects every items row. I don’t recommend this, you should still create your queries as you normally do, but even if you released this, no items belonging to other users would leak anywhere. Mastering Row Level Security in NodeJS doesn't have to be intimidating. With this guide as a base, you can embark on your journey toward something bigger. To enhance your skills further, check out my course Fullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQL . Happy learning!

This article dives deep into the realm of micro-frontends, with a particular emphasis on the Qwik Framework. This article also explores why Qwik may be a superior choice for managing micro-frontends compared to its counterparts like React , Angular , Vue , and Svelte . Micro-frontends represent an innovative design approach where a frontend app is partitioned into small, independent, manageable units that operate cohesively. Each unit, known as a micro-frontend, is managed by a separate team, leading to highly efficient and scalable development processes for complex applications. Key characteristics of micro-frontends include: Before examining the specifics of Qwik , it's worth comparing it to other popular frameworks in the context of micro-frontends. While React boasts a robust ecosystem and a well-established community, it requires additional libraries and configurations for effective micro-frontend management. The hydration process can be resource-intensive, potentially slowing performance. Libraries like Module Federation from Webpack enables different React applications to share components and dependencies dynamically at runtime, facilitating the integration of multiple micro-frontends. Routing can be managed with libraries such as single-spa that allows for the coexistence and independent operation of multiple React apps on a single page, ensuring that each micro-frontend can function and be navigated independently. State management across micro-frontends can be tricky; tools like Redux with additional middleware or the newer Redux Toolkit can be configured to share states selectively or manage local states separately, maintaining data consistency and flow between micro-frontends. This setup often requires careful consideration of loading strategies, dependency sharing, and deployment configurations to ensure seamless integration and operation of micro-frontends in a larger application ecosystem. Despite Angular 's built-in tools for module separation and micro-frontend architecture, it can become complex with larger applications. Performance optimizations require significant effort. Angular is designed to support modularity through its built-in dependency injection system and hierarchical module architecture, which are advantageous for developing micro-frontends. However, as applications scale, managing these modules and ensuring efficient loading and execution can become complex. Angular’s performance in large applications can be bogged down by lengthy build times and slow boot-up times due to the size of the application bundle. To address this, developers often need to implement lazy loading of modules using Angular's Router, which allows parts of the application to be loaded on demand rather than at the initial load. Furthermore, ahead-of-time (AOT) compilation can be employed to pre-compile HTML templates and components into JavaScript at build time rather than at runtime, reducing the workload on the browser and improving performance. Additionally, tree-shaking, enabled through build tools like Webpack, helps eliminate unused code from final bundles, enhancing load times and runtime efficiency. Performance profiling tools such as Angular DevTools can also be used to identify performance bottlenecks, particularly in change detection cycles and rendering processes. These strategies collectively help in managing the complexity and optimizing the performance of large-scale Angular applications employing a micro-frontend architecture. Vue is lightweight and flexible with modular development support via Vue CLI. However, its built-in support for micro-frontends is limited, necessitating additional configurations and third-party libraries. Unlike frameworks specifically designed for micro-frontends, Vue does not inherently handle the isolation of styles, state management, and dependency management between multiple frontends. To address these limitations, developers often turn to third-party libraries like single-spa-vue , which provides the necessary infrastructure to integrate Vue applications into a micro-frontend environment by allowing them to coexist and remain independent within a single-parent application. Configurations involving module federation with Webpack can also be necessary, enabling different Vue projects to share components and libraries dynamically, reducing redundancy and improving load times. Additionally, state management across micro-frontends might require a more unified approach using Vuex or global event buses to ensure data consistency and communication across independently deployed Vue applications. These added layers of integration highlight the need for careful setup and management to leverage Vue effectively in micro-frontend architectures. Although Svelte compiles to minimal JavaScript for faster performance, its ecosystem for micro-frontend architecture is less mature compared to React or Angular . Svelte's ecosystem is less mature for micro-frontend architecture primarily because it is a newer framework compared to React or Angular, which have both been widely adopted and rigorously tested in various architectural setups, including micro-frontends. React and Angular benefit from extensive community support and a plethora of libraries and tools specifically designed to handle the complexities of micro-frontend implementations, such as module federation with Webpack in React and advanced module management in Angular. These frameworks offer robust solutions for isolation, scalable state management, and dynamic module loading, aspects critical to effective micro-frontend architecture. In contrast, Svelte, while offering a compelling approach by compiling down to minimal JavaScript, lacks a comprehensive set of tools and community-backed solutions specifically geared towards micro-frontends. This can make integration, inter-app communication, and the orchestration of multiple Svelte instances within a larger application more challenging, requiring more custom solutions or adaptations of existing tools not initially designed with Svelte in mind. The Qwik Framework shines in the micro-frontend landscape due to its strong emphasis on performance and scalability. There is also no need for an external library to implement MFE with Qwik. Here's why Qwik stands out for managing micro-frontends: In conclusion, Qwik's architecture, with its focus on resumability, fine-grained lazy loading, and minimal JavaScript execution, is exceptionally suited for building micro-frontends. Each micro-frontend created with Qwik is fast, efficient, and easy to integrate into a larger application. For those keen on diving deeper into Qwik , consider the Complete Guide to Qwik Framework available on \newline or Amazon. This comprehensive guide covers all the crucial APIs in Qwik and provides practical examples of creating an e-commerce application with Supabase .