DEV Community: Afaq Shahid Khan

Implementing Tap Payments in a SaaS Subscription System (Node.js + Express + Sequelize)

Afaq Shahid Khan — Fri, 19 Dec 2025 14:36:57 +0000

When building a SaaS product with paid plans, payment handling is never just about charging a card. You need subscriptions, renewals, upgrades, proration, invoices, webhooks, and failure handling — all working reliably.

In this post, I’ll walk through how to integrate Tap Payments into a Node.js + Express + Sequelize backend for a band-based subscription model, using a real production-style architecture.

This guide focuses on backend design, security, and reliability, not just “making a payment work”.

🧱 Architecture Overview

Our system is built around these core components:

Express (TypeScript) — API layer
Sequelize — relational data modeling
Tap Payments API — card payments
Webhook-based state sync — payment truth source
Band-based licensing — users pay per seat band

High-level flow:

Client → Backend → Tap Checkout
↘ Webhook → Backend → DB




## 📦 Subscription & Payment Data Model

### Subscription (Account-level)

Each account has **exactly one subscription**:

```

ts
Subscription
- accountId
- bandSize
- subscriptionType (trial | paid | suspended)
- startDate / endDate
- unitPrice
- totalAmount
- status

SubscriptionPayment (Immutable Ledger)

Every charge creates a payment record:


ts
SubscriptionPayment
- subscriptionId
- tapChargeId
- amount
- currency
- paymentMethod (card | invoice)
- status (pending | paid | failed)
- paidAt

Key principle:

Subscription state changes ONLY after payment confirmation (via webhook).

🔐 Tap API Client (Centralized & Secure)

We isolate Tap API communication in a single client:


ts
const tapAxios = axios.create({
  baseURL: "https://api.tap.company/v2",
  headers: {
    Authorization: `Bearer ${process.env.TAP_SECRET_KEY}`,
    "Content-Type": "application/json",
  },
});

This avoids:

Token leaks
Duplicate logic
Inconsistent headers

💳 Creating a Charge (Backend-Controlled)

When a user activates or upgrades a subscription:

Create subscription & pending payment in DB
Create a Tap charge
Redirect user to Tap checkout


ts
export const createTapCharge = async (
  amount: number,
  subscriptionPaymentId: string,
  customer: Customer,
  redirectUrl: string
) => {
  return tapAxios.post("/charges", {
    amount,
    currency: "OMR",
    customer,
    source: { id: "src_card" },
    redirect: { url: redirectUrl },
    metadata: {
      subscriptionPaymentId,
      type: "subscription",
    },
  });
};

Why metadata matters

We store subscriptionPaymentId inside Tap metadata.

This allows:

Webhook → DB mapping
Idempotent processing
No guessing which payment belongs to which subscription

🔁 Redirect-Based Flow (User Experience)

After charge creation, backend returns:


json
{
  "paymentUrl": "https://tap.company/checkout/...",
  "chargeId": "chg_xxx"
}

Frontend simply redirects the user.

🪝 Webhooks: The Source of Truth

Never trust frontend redirects alone.

Why Webhooks?

Users may close the tab
Network failures happen
Redirects can be spoofed

Secure Webhook Verification

Tap signs every webhook payload.


ts
const expectedSignature = crypto
  .createHmac("sha256", TAP_WEBHOOK_SECRET)
  .update(rawBody)
  .digest("hex");

Only verified requests are processed.

🔄 Webhook Processing Logic

On webhook receipt:

Verify signature
Extract subscriptionPaymentId
Update payment status
Update subscription if payment succeeded


ts
if (status === "CAPTURED") {
  await payment.update({ status: "paid", paidAt: new Date() });

  await subscription.update({
    status: "active",
    subscriptionType: "paid",
    endDate: nextYear,
  });
}

Important rule:

Subscription state is updated ONLY inside webhook logic.

📈 Subscription Upgrade with Proration

Upgrades are prorated based on remaining time:


ts
const remainingYears =
  (subscription.endDate.getTime() - Date.now()) /
  (365.25 * 24 * 60 * 60 * 1000);

const proratedAmount =
  additionalUsers * UNIT_PRICE * remainingYears;

This creates:

A new pending payment
A new Tap charge
No disruption to current billing cycle

📉 Downgrades (Deferred)

Downgrades:

Apply on next renewal
Do NOT refund automatically
Prevent abuse near renewal date


ts
if (isWithinLockoutWindow(subscription.endDate)) {
  throw new Error("Cannot downgrade near renewal");
}

🧾 Invoice-Based Billing (Enterprise Ready)

For corporate customers:

No Tap charge created
Payment marked as invoice
Admin manually confirms payment


ts
await SubscriptionPayment.create({
  paymentMethod: "invoice",
  status: "paid",
});

This allows:

Offline billing
Bank transfers
Enterprise workflows

🚫 Automatic Suspension for Non-Payment

A scheduled job checks overdue subscriptions:


ts
if (nextPaymentDue < cutoffDate) {
  await subscription.update({ status: "suspended" });
}

This ensures:

Fair enforcement
Predictable access control
No manual intervention

🔐 Authorization & Safety

Critical actions are protected:

Only Account Owners can:
- Activate plans
- Upgrade/downgrade
All subscription updates use DB transactions
Payments are immutable records

✅ Key Takeaways

✔ Backend owns all payment logic
✔ Webhooks are the source of truth
✔ Metadata connects payments to business logic
✔ Subscriptions ≠ payments
✔ Design for upgrades, failures, and audits

🚀 Final Thoughts

Tap Payments integrates cleanly into modern SaaS backends when you treat payments as state machines, not API calls.

If you’re building:

Multi-tenant SaaS
Seat-based pricing
Annual subscriptions
Enterprise billing

This architecture will scale with confidence.

🌀 What is React Portal (And Why You Should Use It)

Afaq Shahid Khan — Sun, 15 Jun 2025 13:06:14 +0000

By Afaq Shahid Khan

Ever built a modal, toast, or dropdown and hit weird issues with z-index, overflow: hidden, or elements being clipped unexpectedly?

That’s where React Portals shine! ✨

Let’s break it down in plain English and see how and why you should start using portals today.

💡 What Is a React Portal?

Normally, React renders components within the parent DOM tree. But sometimes, you want to render something outside of that tree — like a modal that floats on top of everything.

React Portals let you do exactly that: render components outside the main DOM hierarchy, but still keep them fully connected to React (state, events, etc.).

🧪 Example:

ReactDOM.createPortal(
  <div>I'm outside the main DOM tree!</div>,
  document.body
);

Yes — that div will be rendered as a direct child of <body>, no matter where the component lives in your React app.

🛠 Build a Toast Notification Using React Portals

Let’s build something practical — a toast popup — and see how portals make it easy.

📦 1. Create a Toast Component

import ReactDOM from 'react-dom';

const Toast = ({ message }) => {
  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      bottom: '20px',
      right: '20px',
      backgroundColor: '#333',
      color: '#fff',
      padding: '12px 24px',
      borderRadius: '6px',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
      zIndex: 9999
    }}>
      {message}
    </div>,
    document.body // ✅ No need for a custom portal root!
  );
};

export default Toast;

⚙️ 2. Use It in Your App

import { useState } from 'react';
import Toast from './Toast';

function App() {
  const [showToast, setShowToast] = useState(false);

  const handleClick = () => {
    setShowToast(true);
    setTimeout(() => setShowToast(false), 3000); // auto-hide after 3s
  };

  return (
    <div>
      <button onClick={handleClick}>Show Toast</button>
      {showToast && <Toast message="Hello from a portal!" />}
    </div>
  );
}

export default App;

🎯 Why Use React Portals?

Common UI Problem	Portals to the Rescue
Modal hidden behind elements	✅ Portals escape stacking issues
`z-index` or `overflow: hidden` problems	✅ Fixed by rendering outside the DOM tree
Need to float UI anywhere on the page	✅ Portals let you place UI wherever you want

⚠️ Tips to Use Portals Effectively

You don’t need to create a special div like #portal-root — just use document.body.
Use portals for things like modals, tooltips, toasts, and dropdowns.
Don’t overuse them — keep your DOM clean and structured.

🏁 Final Thoughts

React Portals are like teleporters 🌀 — they let your components break free from the regular DOM structure, while still staying connected to React’s state and event system.

They solve tons of real-world UI problems in a simple way.

If you’re building floating elements or overlays — React Portals are your best friend.

💬 Have a question or want a working demo with modals or tooltips? Drop a comment below!

❤️ If you found this helpful, leave a like and share it with a fellow dev.

🖖 Happy coding!

🔁 Reuse React Components with Render Props (Short & Simple)

Afaq Shahid Khan — Wed, 04 Jun 2025 12:08:08 +0000

In React, render props are a great way to reuse component logic while customizing how things look.

Let’s say we have two arrays — one for products and one for companies:

const products = [...]; // list of product objects
const companies = [...]; // list of company objects

We want to render both in different ways, but reuse the same logic for listing and toggling visibility.

🧠 What Is a Render Prop?

A render prop is just a prop that takes a function. This function controls how each item is rendered.

<Component render={(item) => <div>{item.name}</div>} />

🔧 Reusable `List` Component

Here’s a simple List component using a render prop:

function List({ title, items, render }) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const displayItems = isCollapsed ? items.slice(0, 3) : items;

  return (
    <div>
      <h2>{title}</h2>
      <ul>{displayItems.map(render)}</ul>
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? "Show All" : "Show Less"}
      </button>
    </div>
  );
}

✅ Rendering Products

<List
  title="Products"
  items={products}
  render={(product) => (
    <li key={product.productName}>
      {product.productName} - ${product.price}
    </li>
  )}
/>

✅ Rendering Companies

<List
  title="Companies"
  items={companies}
  render={(company) => (
    <li key={company.companyName}>
      {company.companyName} — {company.phrase}
    </li>
  )}
/>

🎯 Why Use Render Props?

Write once, use anywhere
Clean separation of logic and UI
Highly reusable components

That’s it! One component. Two uses. Clean, simple, and powerful.

💬 Found this helpful? Drop a ❤️ or leave a comment!

How to Do App Routing in Next.js 14

Afaq Shahid Khan — Mon, 05 Aug 2024 18:01:50 +0000

Next.js 14 continues to enhance its powerful framework, providing developers with robust features for building React applications. One of the key aspects of any web application is routing, and Next.js makes it incredibly simple and efficient. In this post, we'll explore how to set up and use app routing in Next.js 14.

Introduction to Next.js Routing

Next.js uses a file-based routing system, which means the structure of your pages directory determines the routes of your application. Each file inside the pages directory becomes a route.

Basic Routing

To create a basic route, you simply need to add a new file to the pages directory. For example, if you create a file named about.js inside the pages directory, it will automatically be available at /about.

Example:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

Dynamic Routing

Next.js also supports dynamic routing using brackets ([]). This allows you to create routes with dynamic parameters.

Example:

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

In this example, a file named [id].js inside the pages/product directory creates a dynamic route that can be accessed via /product/1, /product/2, etc.

Nested Routes

Nested routes can be created by adding folders inside the pages directory. Each folder represents a part of the URL path.

Example:

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog Home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

In this setup, the /blog route will render index.js, and /blog/[slug] will render [slug].js.

API Routes

Next.js also supports API routes, allowing you to create backend endpoints in your application. These are placed in the pages/api directory.

Example:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

This file creates an API endpoint at /api/hello that responds with a JSON message.

Customizing the Router

Next.js 14 allows more customization and advanced routing strategies using the next/router package. You can programmatically navigate between pages and handle more complex routing scenarios.

Example:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About Page</button>
    </div>
  );
}

Conclusion

Next.js 14 continues to simplify and enhance the developer experience with its powerful and flexible routing system. Whether you need static, dynamic, or nested routes, Next.js makes it easy to set up and manage your application's navigation.

I hope this post helps you get started with routing in Next.js 14. If you have any questions or suggestions, feel free to leave a comment below!

Happy coding!

Creating Your First API in a MERN Project

Afaq Shahid Khan — Fri, 28 Jun 2024 12:25:32 +0000

Hello, fellow developers! 🌟

In this post, we'll walk through creating your first API in a MERN (MongoDB, Express.js, React, Node.js) project using ES6 modules and modern JavaScript features. This guide is perfect for beginners who want to get started with the basics.

Prerequisites

Before we start, ensure you have the following installed on your machine:

Node.js
npm (Node Package Manager)
MongoDB (you can use MongoDB Atlas for a cloud-based solution)
A code editor (VS Code is a popular choice)

Step 1: Setting Up the Project

First, let's create our project directory and set up a new Node.js project.

mkdir mern-api
cd mern-api
npm init -y

Install the necessary dependencies.

npm install express mongoose dotenv

Step 2: Creating the Server with Express

Create a file named server.js in your project root and add the following code:

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import userRoute from './routes/user.route.js';

dotenv.config();

mongoose
  .connect(process.env.MONGO)
  .then(() => {
    console.log('mongodb is connected');
  })
  .catch((err) => {
    console.log(err);
  });

const app = express();

app.listen(3000, () => {
  console.log('express is working!!!');
});

app.use('/api/user', userRoute);

Step 3: Defining a Model

Create a new directory called models and inside it, create a file named User.js:

import mongoose from 'mongoose';

const userSchema = new mongoose.Schema(
  {
    username: {
      type: String,
      required: true,
      unique: true,
    },
    email: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
);

const User = mongoose.model('User', userSchema);
export default User;

Step 4: Creating a Controller

Create a new directory called controllers and inside it, create a file named user.controller.js:

export const test = (req, res) => {
  res.json({
    message: 'Test api is working',
  });
};

Step 5: Creating Routes

Create a new directory called routes and inside it, create a file named user.route.js:

import express from 'express';
import { test } from '../controllers/user.controller.js';

const router = express.Router();

router.get('/test', test);

export default router;

Step 6: Integrating Routes in Server

Ensure your server.js uses the newly created routes:

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import userRoute from './routes/user.route.js';

dotenv.config();

mongoose
  .connect(process.env.MONGO)
  .then(() => {
    console.log('mongodb is connected');
  })
  .catch((err) => {
    console.log(err);
  });

const app = express();

app.listen(3000, () => {
  console.log('express is working!!!');
});

app.use('/api/user', userRoute);

Step 7: Testing Your API

To test your API, you can use tools like Postman or Insomnia.

GET Test Route

GET http://localhost:3000/api/user/test

Congratulations!

You've successfully created your first API in a MERN stack project using modern JavaScript features. This is just the beginning; you can now expand on this by adding more routes, implementing user authentication, and much more.

Leveraging Mixins in Ruby on Rails: A Deep Dive

Afaq Shahid Khan — Wed, 26 Jun 2024 07:13:50 +0000

Ruby on Rails is known for its elegance and productivity. One of the powerful tools in Ruby that makes Rails development so flexible and clean is Mixins. In this article, we'll explore what Mixins are, how they work, and how you can use them to keep your Rails codebase DRY (Don't Repeat Yourself).

What are Mixins?

Mixins are a way to share reusable code across multiple classes in Ruby. They are modules that can be included in other classes to provide them with additional functionality without using inheritance. This allows you to keep your classes focused and your codebase modular.

Why Use Mixins?

Code Reusability: Mixins allow you to reuse common functionality across different classes.
Separation of Concerns: By moving common methods into modules, you can keep your classes smaller and more focused.
Avoiding Inheritance Pitfalls: Instead of relying on complex inheritance hierarchies, you can use Mixins to share behavior across unrelated classes.

Creating a Mixin

Let's start by creating a simple Mixin. Imagine you have several models in your Rails application that need the ability to generate a unique token. Instead of duplicating the token generation code in each model, you can create a Mixin.

# app/models/concerns/tokenizable.rb
module Tokenizable
  extend ActiveSupport::Concern

  included do
    before_create :generate_token
  end

  def generate_token
    self.token = SecureRandom.hex(10)
  end
end

Using the Mixin

Now that we have our Tokenizable module, we can include it in any model that needs this functionality.

# app/models/user.rb
class User < ApplicationRecord
  include Tokenizable
end

# app/models/order.rb
class Order < ApplicationRecord
  include Tokenizable
end

ActiveSupport::Concern

In the example above, we used ActiveSupport::Concern to define our Mixin. ActiveSupport::Concern makes it easier to write Mixins by providing a structured way to include class methods and instance methods.

Here's an example that also includes class methods:

# app/models/concerns/tokenizable.rb
module Tokenizable
  extend ActiveSupport::Concern

  included do
    before_create :generate_token
  end

  class_methods do
    def find_by_token(token)
      find_by(token: token)
    end
  end

  def generate_token
    self.token = SecureRandom.hex(10)
  end
end

Now you can call User.find_by_token(token) or Order.find_by_token(token) thanks to the class method defined in the Mixin.

Real-World Example: Timestampable

Let's look at a more practical example. Suppose you want to add a custom timestamp to multiple models in your application. You can create a Timestampable module.

# app/models/concerns/timestampable.rb
module Timestampable
  extend ActiveSupport::Concern

  included do
    before_save :set_custom_timestamp
  end

  def set_custom_timestamp
    self.custom_timestamp = Time.current
  end
end

Include this Mixin in your models:

# app/models/post.rb
class Post < ApplicationRecord
  include Timestampable
end

# app/models/comment.rb
class Comment < ApplicationRecord
  include Timestampable
end

Now, both Post and Comment models will automatically set a custom timestamp before saving.

Conclusion

Mixins are a powerful feature in Ruby that can help you keep your Rails codebase clean, DRY, and modular. By encapsulating reusable code in modules and including them in your classes, you can avoid code duplication and manage shared behavior more effectively.

Whether you're a seasoned Rails developer or just getting started, mastering Mixins will undoubtedly make your code more maintainable and elegant. Happy coding!

Understanding Observers in Ruby on Rails

Afaq Shahid Khan — Thu, 20 Jun 2024 11:56:23 +0000

As your Ruby on Rails application grows, maintaining clean and manageable code becomes increasingly important. One of the powerful yet often underutilized features in Rails is the Observer pattern. Observers allow you to keep your models lean by extracting responsibilities that don't necessarily belong in the model itself. In this article, we'll explore what observers are, when to use them, and how to implement them in your Rails application.

What are Observers?

Observers in Rails provide a way to respond to lifecycle callbacks outside of your models. They allow you to encapsulate the callback logic in a separate class, promoting cleaner and more modular code. Observers listen for changes to an object and respond to those changes without the object needing to explicitly notify the observer.

When to Use Observers

Observers are ideal for situations where you want to decouple the callback logic from your models. Here are a few common use cases:

Logging and Analytics: Track changes or actions performed on a model without cluttering the model code.
Notifications: Send emails, Slack messages, or other notifications when certain model events occur.
Asynchronous Jobs: Enqueue background jobs in response to model changes.
Complex Business Logic: Implement business rules that should be applied after certain model changes.

Implementing Observers in Rails

Rails observers are not included in Rails by default anymore, starting from Rails 4. However, you can still use them by including the rails-observers gem in your Gemfile:

gem 'rails-observers'

After adding the gem, run bundle install to install it.

Creating an Observer

Let’s walk through an example of creating an observer. Imagine you have a User model and you want to send a welcome email whenever a new user is created.

Generate the Observer:

First, generate the observer file:

   rails generate observer User

This will create a file app/models/user_observer.rb.

Define the Observer:

Open the generated user_observer.rb file and define the callback methods:

   class UserObserver < ActiveRecord::Observer
     def after_create(user)
       UserMailer.welcome_email(user).deliver_later
     end
   end

Here, after_create is a callback method that will be triggered after a new user is created. The UserMailer.welcome_email(user).deliver_later line enqueues the welcome email to be sent asynchronously.

Register the Observer:

To make Rails aware of the observer, you need to register it. Open config/application.rb and add the following line inside the class Application < Rails::Application block:

   config.active_record.observers = :user_observer

Create the Mailer:

If you haven't already, generate the mailer:

   rails generate mailer UserMailer

Define the welcome_email method in app/mailers/user_mailer.rb:

   class UserMailer < ApplicationMailer
     def welcome_email(user)
       @user = user
       mail(to: @user.email, subject: 'Welcome to My Awesome Site')
     end
   end

Also, create a view template for the email in app/views/user_mailer/welcome_email.html.erb.

Benefits of Using Observers

Separation of Concerns: By moving callback logic to observers, your models remain focused on their primary responsibility: data persistence and validation.
Reusability: Observers can be reused across different models, promoting DRY (Don't Repeat Yourself) principles.
Maintainability: With a clean separation of callback logic, your codebase becomes easier to maintain and understand.

Conclusion

Observers are a powerful tool in the Rails ecosystem for maintaining clean and modular code. By decoupling callback logic from your models, you can achieve a more maintainable and scalable codebase. While Rails no longer includes observers by default, the rails-observers gem makes it easy to integrate this pattern into your application. Use observers to handle logging, notifications, complex business logic, and more, ensuring your models remain lean and focused on their primary responsibilities.

Happy coding!

How to Perform Rake Tasks in Rails

Afaq Shahid Khan — Fri, 07 Jun 2024 07:55:48 +0000

As a Rails developer, you often need to automate tasks such as database migrations, data seeding, or file management. This is where Rake (Ruby Make) tasks come in handy. In this article, I'll guide you through creating and scheduling Rake tasks in a Rails application.

What is a Rake Task?

Rake is a build automation tool written in Ruby. It allows you to define and run tasks using a simple Ruby DSL. In Rails, Rake tasks are commonly used for tasks like database migrations (rake db:migrate), cleaning logs (rake log:clear), and many other maintenance tasks.

Creating a Custom Rake Task

Let's start by creating a custom Rake task. Suppose you want to delete all PDF files in your public/pdfs directory every night. Here's how you can do it.

Step 1: Define the Rake Task

First, create a new Rake task file in the lib/tasks directory. We'll name it delete_pdfs.rake.

mkdir -p lib/tasks
touch lib/tasks/delete_pdfs.rake

Open lib/tasks/delete_pdfs.rake and add the following content:

# lib/tasks/delete_pdfs.rake
namespace :pdf do
  desc "Delete all PDFs from public/pdfs and its subdirectories older than midnight"
  task delete: :environment do
    require 'fileutils'

    pdf_directory = Rails.root.join('public', 'pdfs')

    if Dir.exist?(pdf_directory)
      Dir.glob(File.join(pdf_directory, '**', '*.pdf')).each do |file|
        FileUtils.rm(file)
        puts "Deleted #{file}"
      end
    else
      puts "Directory #{pdf_directory} does not exist"
    end
  end
end

Step 2: Run the Rake Task

You can run your new Rake task from the command line:

bundle exec rake pdf:delete

This command will delete all PDF files in the public/pdfs directory and its subdirectories.

Scheduling the Rake Task

To run the task automatically at midnight every day, you can use the whenever gem, which provides a clear syntax for writing and deploying cron jobs.

Step 1: Add the `whenever` Gem

Add whenever to your Gemfile:

gem 'whenever', require: false

Run bundle install to install the gem.

Step 2: Configure `whenever`

Initialize whenever in your project:

bundle exec wheneverize .

This command creates a config/schedule.rb file. Open this file and add the following content:

# config/schedule.rb

# Set the environment
set :environment, "development" # or "production"

# Define the task schedule
every :day, at: '12:00 am' do
   puts 'Delete pdf files'
   rake "pdf:delete"
end

Step 3: Update Cron Jobs

Update your cron jobs by running:

bundle exec whenever --update-crontab

This command writes the schedule defined in config/schedule.rb to your crontab, ensuring that the task runs at the specified time.

Step 4: Verify the Task

Manually run the task to ensure it works correctly:

bundle exec rake pdf:delete

Conclusion

Rake tasks are a powerful way to automate repetitive tasks in your Rails application. By combining Rake with whenever, you can schedule these tasks to run automatically, making your workflow more efficient.

I hope this guide helps you get started with creating and scheduling Rake tasks in your Rails projects. If you have any questions or tips of your own, feel free to share them in the comments below!

Happy coding!

Supercharging Background Processing with Active Job in Rails

Afaq Shahid Khan — Wed, 05 Jun 2024 07:40:10 +0000

Background processing is a crucial part of modern web applications. Tasks like sending emails, processing images, or cleaning up databases often take too long to be handled in real-time during a user’s request-response cycle. This is where background job processing comes into play. In Rails, Active Job provides a unified interface to interact with various queuing backends. This article will walk you through the basics of Active Job and how you can use it to enhance your Rails applications.

What is Active Job?

Active Job is a framework for declaring jobs and making them run on a variety of queueing backends. The purpose of Active Job is to ensure that all Rails apps have a job infrastructure in place, regardless of which queueing backend is used. Out of the box, Rails supports several backends including Sidekiq, Resque, Delayed Job, and others.

Setting Up Active Job

To get started with Active Job, you'll need to set up a queueing backend. For this example, we will use Sidekiq, one of the most popular and efficient background processing libraries for Rails.

First, add Sidekiq to your Gemfile:

gem 'sidekiq'

Then run bundle install to install the gem.

Next, configure Sidekiq in your Rails application. Create a file named sidekiq.yml in your config directory:

:concurrency: 5
:queues:
  - default

Then, update your config/application.rb to include:

module YourAppName
  class Application < Rails::Application
    # other configurations
    config.active_job.queue_adapter = :sidekiq
  end
end

Finally, you’ll need to create a file at config/initializers/sidekiq.rb to configure Sidekiq with Rails:

Sidekiq.configure_server do |config|
  config.redis = { url: 'redis://localhost:6379/0' }
end

Sidekiq.configure_client do |config|
  config.redis = { url: 'redis://localhost:6379/0' }
end

Creating a Job

Creating a job in Rails is straightforward. You can generate a job using the Rails generator:

rails generate job Example

This will create a job file in app/jobs/example_job.rb:

class ExampleJob < ApplicationJob
  queue_as :default

  def perform(*args)
    # Do something later
  end
end

You can define the tasks you want to be performed in the perform method. For instance, if you want to send a welcome email to a user:

class WelcomeEmailJob < ApplicationJob
  queue_as :default

  def perform(user)
    UserMailer.welcome_email(user).deliver_now
  end
end

Enqueuing a Job

To enqueue the job, you simply call the perform_later method:

WelcomeEmailJob.perform_later(@user)

This will add the job to the queue, and it will be processed by Sidekiq in the background.

Monitoring and Managing Jobs

Sidekiq provides a web interface to monitor and manage your jobs. Add the following to your routes.rb to mount the Sidekiq web interface:

require 'sidekiq/web'
mount Sidekiq::Web => '/sidekiq'

You can now access the Sidekiq web interface at http://localhost:3000/sidekiq, where you can see job statistics, retry jobs, and more.

Error Handling and Retries

Active Job comes with built-in support for error handling and retries. You can specify the number of retries and the wait time between retries in your job class:

class WelcomeEmailJob < ApplicationJob
  queue_as :default
  retry_on SomeSpecificError, wait: 5.minutes, attempts: 3

  def perform(user)
    UserMailer.welcome_email(user).deliver_now
  end
end

You can also define a method to handle cases when retries are exhausted:

class WelcomeEmailJob < ApplicationJob
  queue_as :default

  def perform(user)
    UserMailer.welcome_email(user).deliver_now
  rescue SomeSpecificError => e
    # Handle the error (e.g., notify an admin)
  end
end

Conclusion

Active Job in Rails provides a robust and flexible framework for background processing, allowing you to offload time-consuming tasks and keep your application responsive. By leveraging Sidekiq or other queueing backends, you can ensure your jobs are processed efficiently. Whether you're sending emails, processing images, or performing complex data operations, Active Job can help you manage these tasks seamlessly.

Start integrating Active Job into your Rails applications today and see the difference in performance and user experience!

Why You Should Start Your Project in Rails 7: Simplicity and Speed

Afaq Shahid Khan — Thu, 30 May 2024 06:47:54 +0000

Hi this is Afaq Shahid and today we will learn that how fast, easy and effective Rails 7 is, so let's get started.
Choosing the right framework is crucial for any new project, and Rails 7 stands out for its simplicity and speed. Here’s why it’s the ideal choice for modern web development.

1. Streamlined Development with Hotwire

Rails 7 integrates Hotwire, which combines Turbo and Stimulus to simplify building interactive applications:

Turbo: Enhances speed and responsiveness by using partial page updates instead of full reloads.
Stimulus: Adds lightweight JavaScript behaviors to HTML, reducing the need for extensive front-end code.

With Hotwire, you can easily create real-time features like live updates and notifications.

2. Improved Performance

Rails 7 offers several performance enhancements:

Optimized View Rendering: Faster HTML generation.
Efficient Database Queries: Improved Active Record for quicker data handling.

These improvements ensure your applications run smoothly and handle more traffic efficiently.

3. Simplified Front-End Development

Rails 7 simplifies front-end development with:

Import Maps: Manage JavaScript dependencies directly from HTML, eliminating the need for complex bundling tools.
No Node.js Required: Develop modern web applications without a Node.js runtime.

This makes setup and maintenance easier, letting you focus on building features.

4. Enhanced Developer Experience

Rails 7 continues to prioritize a great developer experience with:

Less Boilerplate: Improved conventions reduce the code you need to write.
Better Error Messages: More informative errors speed up debugging.
Enhanced Testing: Faster and easier test setups.

These enhancements make development faster and more enjoyable.

5. Robust Security

Rails 7 maintains strong security with built-in protections against common vulnerabilities and introduces encrypted attributes to secure sensitive data.

Conclusion

Rails 7 combines simplicity, speed, and security, making it an excellent choice for new projects. With Hotwire for real-time features, performance optimizations, simplified front-end development, and an enhanced developer experience, Rails 7 helps you build fast, efficient, and secure web applications. Start your next project with Rails 7 to leverage these powerful advantages.

Understanding Callbacks in Rails: Enhancing Model Interactions and Lifecycle Management

Afaq Shahid Khan — Tue, 28 May 2024 19:12:37 +0000

Introduction:

Callbacks are a fundamental aspect of Rails that allow developers to hook into the lifecycle of ActiveRecord objects and execute custom logic at specific points. In this article, we'll explore the concept of callbacks in Rails, how they work, and how you can leverage them to streamline your model interactions and lifecycle management.

Introduction to Callbacks:

Callbacks are methods that are automatically invoked at certain points in an object's lifecycle, such as before or after certain operations (e.g., validation, save, create, update, destroy). Rails provides a wide range of built-in callbacks that cover various aspects of model lifecycle management.

Types of Callbacks:

Rails callbacks can be categorized into several types based on when they are triggered:

Before Callbacks: Executed before a certain operation (e.g., before_validation, before_save).
After Callbacks: Executed after a certain operation (e.g., after_create, after_update).
Around Callbacks: Wrap the execution of a certain operation, allowing custom logic to be executed before and after the operation.

Common Use Cases:

Callbacks are commonly used to perform tasks such as:

Data Validation: Ensure data integrity by validating attributes before saving.
Normalization: Normalize data before saving it to the database.
Logging and Auditing: Log changes or perform auditing tasks after certain operations.
Associations: Automatically associate or disassociate related objects.
Caching: Invalidate or update caches when records are modified.

Best Practices:

While callbacks can be powerful, it's essential to use them judiciously and adhere to best practices:

Keep Callbacks Simple: Callbacks should be kept simple and focused on a single task to maintain code clarity and avoid unintended side effects.
Avoid Business Logic: Avoid placing complex business logic within callbacks, as it can make the code harder to understand and maintain.
Test Callback Logic: Write tests to ensure that callback logic behaves as expected and does not introduce regressions.
Consider Alternatives: In some cases, alternatives such as service objects or state machines may be more appropriate than callbacks for managing complex interactions.

Examples:

Let's look at a simple example of using callbacks in a Rails model:

class User < ApplicationRecord
  before_save :normalize_email

  private

  def normalize_email
    self.email = email.downcase
  end
end

In this example, the normalize_email method is invoked before saving a User record, ensuring that the email is normalized to lowercase. And you can use them in your controller too.

Conclusion:

Callbacks are a powerful tool in Rails for managing model lifecycle events and executing custom logic at specific points in an object's lifecycle. By understanding how callbacks work and following best practices, you can leverage them effectively to streamline your model interactions and enhance the maintainability of your Rails applications. Experiment with callbacks in your projects and discover the many ways they can simplify your development workflow. Kindly let me know in comment section if you have any query regarding it.

Integrating Tailwind CSS with Your Rails App: A Step-by-Step Guide

Afaq Shahid Khan — Thu, 23 May 2024 10:01:17 +0000

Introduction:

Tailwind CSS has gained popularity among developers for its utility-first approach and flexibility. Integrating Tailwind CSS with your Rails application can enhance your frontend development experience, allowing for rapid prototyping and customizable styling. In this article, we'll walk through the steps to integrate Tailwind CSS into your Rails app and unleash its power for building beautiful interfaces.

Step 1: Install Tailwind CSS

First, let's install Tailwind CSS using npm. Navigate to your Rails application directory and run the following command:

npm install tailwindcss

Step 2: Configure Tailwind CSS

Next, we need to create a Tailwind CSS configuration file. Run the following command to generate the default configuration file:

npx tailwindcss init

This will create a tailwind.config.js file in your project directory. You can customize this file to tweak Tailwind CSS settings according to your project requirements.

Step 3: Include Tailwind CSS in Your Stylesheets

Now, let's include Tailwind CSS in your Rails application. You can import Tailwind CSS into your stylesheet using @import directive. Create a new file app/assets/stylesheets/tailwind.css and add the following line:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Configure PostCSS

To process Tailwind CSS, we need to configure PostCSS. Install PostCSS and Autoprefixer using npm:

npm install postcss-loader autoprefixer

Next, create a PostCSS configuration file postcss.config.js in your project root directory and add the following content:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Step 5: Update Webpacker Configuration

We need to update Webpacker configuration to process PostCSS. Open config/webpacker.yml and add postcss to the extensions list:

extensions:
  - .js
  - .css
  - .scss
  - .sass
  - .module.css
  - .module.scss
  - .module.sass
  - .pcss # Add this line

Step 6: Use Tailwind CSS Classes in Your Views
Now that Tailwind CSS is integrated into your Rails app, you can start using its utility classes in your views. For example:

<div class="bg-blue-500 text-white p-4">
  Welcome to My Rails App with Tailwind CSS!
</div>

DEV Community: Afaq Shahid Khan

Implementing Tap Payments in a SaaS Subscription System (Node.js + Express + Sequelize)

🧱 Architecture Overview

SubscriptionPayment (Immutable Ledger)

🔐 Tap API Client (Centralized & Secure)

💳 Creating a Charge (Backend-Controlled)

Why metadata matters

🔁 Redirect-Based Flow (User Experience)

🪝 Webhooks: The Source of Truth

Why Webhooks?

Secure Webhook Verification

🔄 Webhook Processing Logic

📈 Subscription Upgrade with Proration

📉 Downgrades (Deferred)

🧾 Invoice-Based Billing (Enterprise Ready)

🚫 Automatic Suspension for Non-Payment

🔐 Authorization & Safety

✅ Key Takeaways

🚀 Final Thoughts

🌀 What is React Portal (And Why You Should Use It)

💡 What Is a React Portal?

🧪 Example:

🛠 Build a Toast Notification Using React Portals

📦 1. Create a Toast Component

⚙️ 2. Use It in Your App

🎯 Why Use React Portals?

⚠️ Tips to Use Portals Effectively

🏁 Final Thoughts

🔁 Reuse React Components with Render Props (Short & Simple)

🧠 What Is a Render Prop?

🔧 Reusable List Component

✅ Rendering Products

✅ Rendering Companies

🎯 Why Use Render Props?

How to Do App Routing in Next.js 14

Introduction to Next.js Routing

Basic Routing

Dynamic Routing

Nested Routes

API Routes

Customizing the Router

Conclusion

Creating Your First API in a MERN Project

Prerequisites

Step 1: Setting Up the Project

Step 2: Creating the Server with Express

Step 3: Defining a Model

Step 4: Creating a Controller

Step 5: Creating Routes

Step 6: Integrating Routes in Server

Step 7: Testing Your API

GET Test Route

Congratulations!

Leveraging Mixins in Ruby on Rails: A Deep Dive

What are Mixins?

Why Use Mixins?

Creating a Mixin

Using the Mixin

ActiveSupport::Concern

Real-World Example: Timestampable

Conclusion

Understanding Observers in Ruby on Rails

What are Observers?

When to Use Observers

Implementing Observers in Rails

Creating an Observer

Benefits of Using Observers

Conclusion

How to Perform Rake Tasks in Rails

What is a Rake Task?

Creating a Custom Rake Task

Step 1: Define the Rake Task

Step 2: Run the Rake Task

Scheduling the Rake Task

Step 1: Add the whenever Gem

Step 2: Configure whenever

Step 3: Update Cron Jobs

Step 4: Verify the Task

Conclusion

Supercharging Background Processing with Active Job in Rails

🔧 Reusable `List` Component

Step 1: Add the `whenever` Gem

Step 2: Configure `whenever`