Building a Contact Form in Next.js with Resend Email Integration
Sending emails is a common feature in web applications, whether for user signups, notifications, or transactional purposes. In this guide, we’ll explore how to integrate Resend, a developer-friendly email API, into a Next.js application for seamless ...
Boost Your Link Previews: Implementing Open Graph Images in Next.js
Introduction In today's digital playground, having a social media presence is like having a megaphone for your awesomeness. One of the secret ingredients to making your content pop on platforms like Facebook, Twitter, LinkedIn and event WhatsApp is t...
Setting Up Prisma ORM with PostgreSQL
Title: Setting Up Prisma ORM with PostgreSQL Content: ORM stands for Object-Relational Mapping. It is a technique that allows developers to interact with a database using an object-oriented approach. Instead of writing raw SQL queries, you can use an...
Adding Animated Image Zoom to Your React App with PhotoSwipe
In one of my recent projects(image-tweaker), I provided users with the ability to upload images, which were then displayed in a collection on the dashboard. I was searching for a way to give these images a cool animated view, and that's when I discov...
Creating a Custom Context Menu in React with react-contexify
Creating a custom context menu in React can significantly enhance the user experience by providing quick access to relevant actions. With the help of the react-contexify library, you can easily implement a sleek and functional context menu tailored t...
Simplifying Cloud Storage: Node.js and AWS S3 Integration
I was recently working on a project(image-tweaker) that required an image upload feature. I needed a reliable storage system to store the images. After researching various options, I decided to use a cloud storage service for its scalability and ease...
Easy Deployment of Nodejs Applications on EC2 with PM2 and NGINX
Deploying Node.js applications can be a daunting task, especially when aiming for a robust and scalable production environment. However, with the right tools and a clear process, it becomes much more manageable. In this guide, I will walk you through...
How I Created npx devpulkit to Share My Details
Creating a personalized command-line tool can be a fun and efficient way to share your details with others. In this article, I'll walk you through how I created npx devpulkit. Whether you're a developer looking to showcase your portfolio or someone w...
How to Use Server-Sent Events with FastAPI
During my recent internship, I faced a task where the server needed to run a long-running process. This couldn't be done with just a POST request because the task could take up to 15 minutes to complete. So, we needed an alternative for this use case...
Creating a Dynamic Horizontal Scroll Percentage Indicator with React and Framer Motion
The Idea Creating a visually appealing and functional portfolio website is essential for showcasing your skills and projects. I recently explored website designs from popular examples for my portfolio (devpulkit.in) and found one animation that reall...
Simplifying Python Dependency Management with Poetry
Managing Python dependencies can be hard, especially as projects get bigger. It's important to have the right packages and versions installed without conflicts. Poetry helps with this. It's a tool that makes managing project dependencies, packaging, ...
Simplified Guide: Use VsCode Server in Your Browser
VSCode has always been our favourite code editor, but I recently got the task of getting a web version of it in a React application. Well, after googling a few things, I found this way. Setting up using docker docker run -d \ --name=code-server \ ...
Step-by-Step Guide to Implementing Typewriter Effect in React
Adding interesting features to your website can grab your audience's attention in today's fast digital world. The typewriter effect, like old typewriters, is a delightful touch that can make your web content more lively. In this guide, we will show y...