✨ Watch on YouTube | 🐙 GitHub | 🎮 Demo In this post, I will walk you through a full-stack implementation of OAuth 2 authentication for a NextJS static app with a NodeJS back-end. This is a model I have used for years. I have recently refactored it and will…

✨ Watch on YouTube | 🐙 GitHub | 🎮 Demo In this post, we will learn how to create different layouts for different NextJS pages. We’ll examine how this is done at increaser.org, which incorporates four layout variations. Although Increaser’s repository is private, you can find all the code in…

✨ Watch on YouTube | 🐙 GitHub In this post, we’ll conduct a React masterclass, during which I’ll share how I’ve created this attractive timeline, alternatively known as a calendar view, to display work sessions overview. While the code for Increaser sits in a private repository, you can locate all…

✨ Watch on YouTube |🐙 GitHub Using local storage in React components may not be as straightforward as it seems. After years of React development, I’ve finally arrived at a bulletproof solution which I’m happy to share. usePersistentState hook Let’s examine the solution from top to bottom. We’ll interact with the local…

A comprehensive guide on how to create a TimeoutMessage component for temporary user messages in React. — ✨ Watch on YouTube | 🐙 GitHub | 🎮 Demo There is a useful UX pattern of displaying a temporary message in response to a user’s action. …

✨ Watch on YouTube | 🐙 GitHub In this post, I want to share with you some of the most useful CSS utils I use in my React projects. I believe you will find a good number of them not only time-saving but also useful for your projects. …

✨ Watch on YouTube | 🐙 GitHub In this post, I aim to share some of the most useful abstract utilities and helper functions that I use across different TypeScript projects. I believe these will save you time and help you to think about your code in a more abstract…

✨ Watch on YouTube | 🐙 GitHub | 🎮 Demo Let me share two methods for displaying a country flag with React. Country code Before delving into these options, we need an object with a two-letter country code and its name. export const countryNameRecord = { AF: "Afghanistan", AL: "Albania"…

✨ Watch on YouTube | 🐙 GitHub | 🎮 Demo Recently, I implemented nested filters for the habits page on increaser.org. This article will guide you through creating similar interfaces using React and the Tree data structure.