React

If you’re like me and you loveeeeee shortcuts, you know how satisfying it is to press a few keys and watch the magic happen. Whether it’s the familiar Ctrl+C – Ctrl+V that devs use to “borrow code” 😉 from LLMs and code pages, or the personalised shortcuts we set up in our favourite tools, keyboard shortcuts save time and make us feel like a computer wiz. Well, fear not! I’ve cracked the code for building components that trigger and respond…

Modern software applications often rely on email communication to engage with users. They may send authentication codes during sign in attempts, marketing emails, or newsletters, for example. This means that email notifications are typically the most common means of communication with users. In this tutorial, you’ll learn how to design stunning email templates with React Email and send them using Resend – a simple and powerful email API platform. Prerequisites To get the most out of this tutorial, you should…

I recently worked on an exciting project that involved creating a website capable of switching between languages to appeal to a broader audience. This made me understand the concept of “localization” better, which typically entails adapting content to make it relevant, accessible, and relatable for users in different languages and regions. Localization isn’t just about translating words, it’s about creating an experience that makes users feel at home, no matter their language. For example, global platforms like Amazon make language…

Learning React can feel challenging at first, especially when you’re unsure of how to start or find yourself staring at an empty code editor. But the right course can help you understand the core concepts and help you gain practical experience by building real-world projects. We just published a course on the freeCodeCamp.org YouTube channel that teaches you modern React in the most engaging, hands-on way possible. Created by Bob Ziroll from Scrimba, this course is packed with over 170…

Recently, while watching my kid 🧒🏻 playing free memory games on her tablet, I noticed her struggling with an overwhelming number of ads and annoying pop-up banners. This inspired me to build a similar game for her. Since she’s currently into anime, I decided to create the game using cute anime-style images. In this article, I’ll walk you through the process of building the game for yourself or your kids 🎮. We’ll begin by exploring the game features, then cover…

Introduction In this tutorial, we will build an HR Management application with Refine Framework and deploy it to the DigitalOcean App Platform. At the end of this tutorial, we’ll have a HR management application that includes: Login page: Allows users to log in as either a manager or an employee. Managers have access to the Time Off and Requests pages, while employees only have access to the Time Off page. Time Off pages: Allows employees to request, view, and cancel…

CRUD operations are the basis of every application, so it is essential to become proficient in them when learning new technologies. In this tutorial, you’ll learn how to build a CRUD application using React and Convex. We’ll cover these operations by building a project called Book Collections. In this project, users will be able to add books and update their status once they complete a book. Table of Contents What is Convex? How to Set Up Your Project How to…

Asynchronous data mutation and handling is a necessary task in modern web applications. You may want to execute a standalone asynchronous function on the server to carryout tasks like saving data to the data store, sending emails, downloading PDFs, processing images, and so on. Next.js provides us with Server Actions which are asynchronous functions that execute on the server. We can use server actions for data mutations on the server, but server actions can be invoked from both server and…

STOMP is an amazingly simple yet powerful protocol for sending messages implemented by popular servers like RabbitMQ, ActiveMQ, and Apollo. Using STOMP over WebSocket is a straightforward protocol, making it a popular choice for sending messages from a web browser because protocols like AMQP are limited by browsers that do not allow TCP connections. To use STOMP over WebSocket, you can use @stomp/stompjs, but that has tricky callbacks and a complicated API that caters to more specialized use cases. Luckily,…