DEV Community: ABDULKAREEM

I Built an Open-Source AI Tool That Turns Any Codebase Into Deep Engineering Documentation (Runs 100% Locally)

ABDULKAREEM — Tue, 24 Feb 2026 08:31:43 +0000

Most engineering problems aren’t about writing code.

Understanding code is harder than writing it.

Onboarding a new developer.

Taking over a legacy repository.

Preparing proper knowledge transfer before someone exits.

The code exists.

The knowledge usually doesn’t.

So I built something to fix that.

🚀 Introducing KT Studio

KT Studio is an open-source, local-first web application that scans your repository and generates deep, structured engineering documentation using a local Ollama model.

No cloud.

No code uploads.

No external APIs.

Everything runs entirely on your machine.

GitHub: https://github.com/tpmabdulkareem/KT-Studio

🧠 What It Actually Does

KT Studio analyzes your project and generates a structured documentation site with:

✅ Architecture overview (with Mermaid diagrams)
✅ Quick start guide (real setup commands from your repo)
✅ API reference (parsed from routes)
✅ Database layer explanation
✅ Environment variable breakdown
✅ CI/CD & deployment notes
✅ AI integrations detection (OpenAI, Ollama, LangChain, etc.)
✅ Testing strategy
✅ Troubleshooting guide
✅ Ownership & risk areas

This is not a generic summary.

It reads your project structure and generates repo-aware documentation.

🔒 Why Local-First AI?

Many teams can’t upload proprietary repositories to cloud AI tools.

KT Studio:

Uses Node.js filesystem scanning
Skips node_modules, dist, and build artifacts
Ignores .env, .pem, terraform secrets
Redacts potential credentials automatically
Runs via Ollama at http://127.0.0.1:11434

Your code never leaves your machine.

🏗 Tech Stack

Next.js (App Router) + TypeScript
Tailwind CSS + shadcn/ui
SQLite via Prisma
Ollama (default: qwen3-coder:30b)
react-markdown + Mermaid.js
Server-Sent Events (SSE) for real-time streaming

⚡ Real Use Cases

Developer Onboarding

Generate a project blueprint before a new developer joins.

Knowledge Transfer

Senior dev leaving? Generate structured KT docs in minutes.

Codebase Audits

Understand inherited repositories faster.

AI-Heavy Projects

Automatically detect:

Model usage
Prompt templates
Embedding pipelines
RAG-style integrations

Consulting & Freelancing

Deliver solid documentation with project handoffs.

🛠 How To Run It

Prerequisites

Node.js v18+
Ollama running locally (http://127.0.0.1:11434)
An Ollama model installed (defaults to qwen3-coder:30b)

Install & Start

npm install
npx prisma db push
npx prisma generate
npm run dev

Open: http://localhost:3000

Generate Docs (Local Mode)
1. Ensure Ollama is running
2. Click New Project
3. Choose Local Folder and enter the absolute path
4. Click Start Generation
5. After it finishes, click View Documentation

⸻

🌍 What’s Next?

Planned expansions:
• Git repository import mode
• Vector-based semantic indexing
• Incremental regeneration
• Architecture diffing between versions
• Plugin-based documentation sections
• Team collaboration mode

⸻

🤝 Looking for Collaborators

If you’re interested in:
• AI-powered developer tools
• Local LLM systems
• Repo intelligence
• Developer productivity
• Open-source infrastructure

I’d love to collaborate.

Repo: https://github.com/tpmabdulkareem/KT-Studio

⸻

💡 Bigger Vision

What if every repository could explain itself?

What if onboarding took hours instead of weeks?

What if knowledge transfer wasn’t dependent on memory?

That’s what KT Studio is trying to solve.

Let’s make codebases self-explanatory.

Building a Scalable Backend with NestJS Microservices: A Blueprint for Modern Architecture

ABDULKAREEM — Wed, 09 Apr 2025 05:24:38 +0000

In today’s fast-evolving tech landscape, scalability, modularity, and performance are the cornerstones of a robust backend system. Whether you’re building for a startup or an enterprise-grade application, having an architecture that can grow with your needs is non-negotiable. That’s why I’m excited to share a sample project I’ve been working on: a highly scalable backend architecture built using NestJS microservices. This repository brings together some of the most powerful tools and patterns in modern development—Repository Pattern, Prisma ORM, GraphQL, and gRPC with Protobuf—to create a blueprint for adaptable, production-ready systems.

You can explore the full implementation here: GitHub Repository.

Let’s dive into what makes this project tick and why it might be the perfect starting point for your next backend endeavor.

Why NestJS Microservices?

NestJS is a progressive Node.js framework that combines the best of TypeScript, object-oriented programming, and functional paradigms. Its built-in support for microservices makes it an ideal choice for distributed systems. Unlike monolithic architectures, microservices allow you to break your application into smaller, independent services that can be developed, deployed, and scaled separately. This project leverages NestJS’s microservices capabilities to demonstrate how you can achieve modularity without sacrificing performance or maintainability.

Core Features of the Architecture

1. Repository Pattern for Clean Data Access

The Repository Pattern is a time-tested approach to abstracting data access logic from your business logic. In this project, I’ve implemented it to create a clean separation between the database layer and the service layer. This not only improves testability (think mocking repositories for unit tests) but also makes the codebase easier to maintain as it grows. Whether you’re swapping out databases or adding new data sources, the Repository Pattern keeps your code flexible and future-proof.

2. Prisma ORM for Database Magic

Speaking of databases, this project integrates Prisma, a next-generation ORM that simplifies database interactions with a type-safe, intuitive API. Prisma handles everything from schema migrations to query generation, allowing you to focus on building features rather than wrestling with SQL. In this setup, Prisma powers the data layer, making it seamless to connect to PostgreSQL, MySQL, or any other supported database.

3. GraphQL for Flexible API Queries

For the API layer, I’ve opted for GraphQL over traditional REST. Why? GraphQL’s ability to let clients request exactly the data they need eliminates over-fetching and under-fetching issues common in REST APIs. With NestJS’s built-in GraphQL module, setting up a schema-first or code-first approach is a breeze. This project showcases how GraphQL can serve as the glue between your frontend and microservices, offering a unified and efficient querying experience.

4. gRPC with Protobuf for High-Performance Communication

Microservices need to talk to each other, and that’s where gRPC shines. Paired with Protocol Buffers (Protobuf), gRPC enables lightning-fast, strongly-typed communication between services. Unlike REST, which relies on JSON over HTTP, gRPC uses binary serialization and HTTP/2, making it perfect for performance-critical systems. In this repository, I’ve set up gRPC to handle cross-service communication, demonstrating how to define service contracts and implement them in a real-world scenario.

What Makes This Project Scalable?

Scalability isn’t just about handling more users—it’s about designing a system that can evolve. Here’s how this architecture delivers:

Modular Design: Each microservice is self-contained, allowing you to scale specific components independently based on demand.
Technology Agnostic: The Repository Pattern and Prisma make it easy to swap databases or add new services without rewriting core logic.
Performance Optimized: gRPC ensures low-latency communication, while GraphQL reduces API overhead.
Extensible: NestJS’s dependency injection and modular structure mean you can plug in new features or services with minimal friction.

Who Is This For?

This project is designed as a starting point for developers and teams looking to:

Build a modern backend from scratch with best practices in mind.
Experiment with microservices in a controlled, sample environment.
Learn how to integrate cutting-edge tools like Prisma, GraphQL, and gRPC in a real-world context.
Adapt a scalable architecture to their specific production needs—be it e-commerce, SaaS, or IoT.

Getting Started

Ready to dive in? Clone the repository and follow the setup instructions in the README to get it running locally. You’ll find detailed comments and documentation to guide you through the codebase. Play around with the GraphQL playground, tweak the gRPC services, or extend the repository pattern to fit your use case.

Here’s the link again: NestJS Microservice Backend.

What’s Next?

This is just the beginning! I’m planning to add features like authentication, event-driven messaging with Kafka or RabbitMQ, and CI/CD pipelines to make this even more production-ready. Have ideas or suggestions? Feel free to open an issue or submit a PR—I’d love to collaborate!

Building scalable backends doesn’t have to be daunting. With the right tools and patterns, you can create systems that are both powerful and adaptable. I hope this project inspires you to explore the possibilities of NestJS microservices and take your backend development to the next level.

Happy coding!

Understanding the Next.js Middleware Bypass Vulnerability (CVE-2025-29927): A Deep Dive into CVE with CVSS 9.1

ABDULKAREEM — Tue, 25 Mar 2025 09:49:14 +0000

March 25, 2025

Next.js, the popular React-based framework developed by Vercel, has long been a cornerstone for developers building modern, scalable web applications. Known for its robust feature set—including server-side rendering, static site generation, and a powerful middleware system—it’s trusted by enterprises like Twitch, Spotify, and OpenAI. However, a recently disclosed security vulnerability, tracked as CVE-2025-29927, has sent shockwaves through the developer community. With a CVSS score of 9.1, this critical flaw exposes self-hosted Next.js applications to an authorization bypass that could allow attackers to access sensitive resources with alarming ease. In this blog, we’ll take a deep dive into what CVE-2025-29927 is, how it works, its impact, and the steps you can take to protect your applications.

What is CVE-2025-29927?

CVE-2025-29927 is an authorization bypass vulnerability affecting the middleware component of Next.js, a framework that enhances React with full-stack capabilities. Middleware in Next.js acts as a gatekeeper, intercepting HTTP requests before they reach application routes. Developers commonly use it to enforce authentication, manage access control, rewrite paths, redirect users, or apply security headers like Content Security Policy (CSP). The vulnerability, disclosed on March 21, 2025, by the Next.js team, stems from a design flaw in how Next.js processes an internal HTTP header: x-middleware-subrequest.

This header was originally intended to prevent infinite loops during middleware execution by tracking recursive subrequests. However, the flaw allows attackers to manipulate this header externally, tricking the framework into skipping middleware entirely. With a single, crafted HTTP request, attackers can bypass critical security checks—such as authentication or authorization—potentially gaining access to protected routes like admin panels or user dashboards.

Assigned a CVSS (Common Vulnerability Scoring System) score of 9.1 out of 10, this vulnerability is classified as critical due to its high impact, ease of exploitation, and the absence of required privileges or user interaction. The affected versions span a wide range, from 11.1.4 to 15.2.2, meaning years’ worth of Next.js deployments could be at risk if not patched.

How Does the Vulnerability Work?

To understand the mechanics of CVE-2025-29927, let’s first explore the role of middleware in Next.js. Middleware runs server-side before a request reaches its final destination (e.g., a page or API endpoint). It’s a powerful tool for implementing logic like:

Verifying user authentication via cookies or tokens.
Restricting access to specific routes based on user roles.
Adding security headers to mitigate client-side attacks.
Redirecting requests based on geolocation or other conditions.

The Next.js framework uses the x-middleware-subrequest header internally to manage subrequests and avoid infinite recursion—a safeguard to ensure middleware doesn’t repeatedly process the same request. The header’s value typically includes a colon-separated list (e.g., middleware:middleware:middleware), and the framework checks this against a recursion depth limit (defaulting to 5). If the limit is exceeded, middleware execution stops, and the request proceeds via NextResponse.next().

Here’s where the vulnerability emerges: Next.js does not sufficiently validate the source of this header. Attackers can craft an HTTP request with a manipulated x-middleware-subrequest header, such as:

x-middleware-subrequest: middleware:middleware:middleware:middleware:middleware

When this header is present with a value that exceeds the recursion threshold—or mimics an internal subrequest—the middleware logic is bypassed entirely. The request skips authentication, authorization, or any other checks implemented in middleware, proceeding directly to the target route. For example, an attacker could access an /admin dashboard without logging in, simply by adding this header to their request.

The exploit’s simplicity is what makes it so dangerous. It requires no authentication, no special privileges, and no complex attack chain—just a single HTTP header modification that can be performed with tools like curl or a web browser’s developer tools.

Proof-of-Concept Example

Imagine a Next.js application with middleware that restricts access to an admin dashboard:

// middleware.js export function middleware(request) { const isAuthenticated = request.cookies.get("auth_token"); if (!isAuthenticated) { return Response.redirect("/login"); } return NextResponse.next(); }

Normally, unauthenticated users would be redirected to /login. However, an attacker could send:

curl -H "x-middleware-subrequest: middleware:middleware:middleware:middleware:middleware" http://example.com/admin

This request bypasses the middleware check, granting direct access to /admin without an auth_token. The implications are severe, especially for applications relying solely on middleware for security.

Impact and Scope

The impact of CVE-2025-29927 is magnified by Next.js’s widespread adoption. With nearly 10 million weekly downloads and over 330,000 internet-facing instances (according to Shodan), the framework powers applications across industries, including finance, healthcare, and Web3. The vulnerability’s reach is further compounded by its broad version coverage—any self-hosted Next.js application running versions 11.1.4 through 15.2.2 with middleware-based security controls is potentially vulnerable.

Key risks include:

Authentication Bypass: Attackers can access protected routes (e.g., admin panels, user dashboards) without credentials, exposing sensitive data or functionality.
Content Security Policy (CSP) Bypass: If middleware sets CSP headers to prevent cross-site scripting (XSS), bypassing it could enable client-side attacks.
Geographic or Session-Based Restriction Evasion: Middleware enforcing location-based or session-based rules can be circumvented, allowing unauthorized access.
Cache Poisoning: Bypassing cache-control middleware could let attackers poison caches with malicious content.

Notably, the vulnerability only affects self-hosted Next.js applications using next start with output: "standalone". Applications hosted on Vercel or Netlify, or those deployed as static exports, are not impacted, as these platforms either automatically patched the issue or don’t rely on middleware in the same way.

Who Discovered It?

The vulnerability was discovered by security researcher Rachid Allam (zhero), with additional analysis from Yasser Allam. Reported privately to the Next.js team via GitHub’s vulnerability reporting system on February 27, 2025, the issue was triaged by March 14, with patches released shortly after. Rachid’s technical write-up, published post-disclosure, provided a detailed breakdown of the exploit, accelerating awareness—and unfortunately, the need for immediate action as exploit details became public.

Mitigation and Fixes

The Next.js team responded swiftly, releasing patched versions to address CVE-2025-29927. The fixed versions include:

15.2.3
14.2.25
13.5.9
12.3.5

For users on older versions (11.1.4 through 13.5.6), upgrading to a patched version is strongly recommended, though backported fixes may not cover all cases. The patch modifies how Next.js handles the x-middleware-subrequest header, ensuring it cannot be externally manipulated to bypass middleware.

Immediate Workaround

If upgrading isn’t immediately feasible, a temporary mitigation is to block or strip the x-middleware-subrequest header at the edge or proxy level (e.g., via a load balancer, reverse proxy, or WAF). This must be done outside the Next.js application, as middleware itself can’t reliably filter the header due to the bypass mechanism. Examples:

NGINX Configuration:

location / {
    proxy_set_header x-middleware-subrequest "";
    proxy_pass http://nextjs_app;
}

Apache Configuration:

RequestHeader unset x-middleware-subrequest

Cloudflare WAF: Add a managed rule to block requests containing the header (available as an opt-in rule since March 22, 2025).

While effective, this workaround may disrupt legitimate subrequest functionality in some setups, so testing is critical.

Long-Term Best Practices

Beyond patching, this vulnerability underscores broader security lessons:

Defense in Depth: Don’t rely solely on middleware for security. Implement additional checks at the route or API level.
Input Validation: Treat all user-controlled inputs, including HTTP headers, as untrusted and validate them rigorously.
Monitoring: Use tools like Shodan or SOCRadar’s Attack Surface Management to identify exposed Next.js instances in your environment.

Why CVSS 9.1?

The CVSS score of 9.1 reflects the vulnerability’s severity:

Attack Vector: Network – Exploitable remotely over the internet.
Attack Complexity: Low – Requires minimal effort (just a header modification).
Privileges Required: None – No authentication needed.
User Interaction: None – No victim action required.
Confidentiality/Integrity Impact: High – Potential for significant data exposure or modification.
Availability Impact: None – No direct denial-of-service effect.

This combination makes CVE-2025-29927 a high-priority issue demanding immediate attention.

Conclusion

CVE-2025-29927 serves as a stark reminder that even widely trusted frameworks can harbor critical flaws. Its ease of exploitation—requiring only a single HTTP header—and its potential to compromise authentication, authorization, and security controls make it a pressing concern for Next.js users. If you’re running a self-hosted Next.js application, check your version and upgrade to a patched release (15.2.3, 14.2.25, 13.5.9, or 12.3.5) immediately. For those unable to patch, implement the header-blocking workaround and plan a swift update.

As the Next.js team continues to refine its security processes—acknowledging communication missteps with partners during this disclosure—developers must stay vigilant. Regularly audit your dependencies, simulate attacks with tools like the Picus Security Validation Platform, and adopt a multi-layered security approach to safeguard your applications. In an era of escalating cyber threats, proactive defense is no longer optional—it’s essential.

Stay secure, and happy coding!

Harnessing the Power of AstroJS: Building High-Performance, Framework-Agnostic Web Apps

ABDULKAREEM — Tue, 06 Feb 2024 05:58:54 +0000

In today's dynamic web landscape, developers seek out powerful tools that deliver speed, flexibility, and exceptional user experiences. AstroJS is emerging as a game-changer, enabling you to leverage familiar frameworks like Svelte, React, and Vue within a static site generator (SSG) architecture. This guide delves into building a web app using this innovative approach, empowering you to create:

Blazing-fast performance: AstroJS serves pre-rendered HTML by default, ensuring lightning-quick initial page loads and improved SEO.
Framework flexibility: Embrace the freedom to choose the right tool for the job, seamlessly integrating Svelte, React, or Vue components based on your needs.
Tailwind CSS elegance: Style your app effortlessly with Tailwind's utility-first approach, minimizing CSS overhead and boosting developer productivity.
Robust TypeScript typing: Enforce code stability and maintainability with TypeScript's type checking, catching errors early and enhancing code collaboration.

Project Scaffolding:

1. Project Setup:

Use the Astro CLI to initialize your project: npx create-astro my-app --template vue --use-typescript (or substitute Vue with your preferred framework).
Install tailwindcss and its dependencies according to the official documentation.

2. Tailwind Integration:
Configure Tailwind in astro.config.mjs by following the @astrojs/tailwind plugin's instructions.
Create a tailwind.config.js file in your project root to customize classes and purge unused styles.

Next.js 13: New Features and Updates

ABDULKAREEM — Mon, 01 May 2023 04:12:31 +0000

Next.js, the popular React framework, has recently released its latest stable version, Next.js 13. This version comes with several new features and updates that aim to improve the developer experience and performance of building web applications. Let's take a closer look at some of the major changes.

App Directory (Beta)

One of the most significant changes introduced in Next.js 13 is the new App Directory feature. This feature enables developers to bundle all their custom components, pages, and APIs in a single directory, which helps to declutter the project structure and increases productivity. It also includes a new app/ layout, where developers can define global components or features like custom error pages or a wrapper for authentication.

Updated Routing and Layouts

Next.js 13 also features improved routing and layouts capabilities, which align with the future of React. The App Router has been updated, which allows developers to define layouts with dynamic content, nested routes, and parameterized paths. Developers can easily share global components and functions between layouts, which reduces code duplication and improves code quality.

Turbopack Updates

Another significant update in Next.js 13 is the support for the TurboPack Optimization feature, which speeds up the application's loading time. TurboPack optimizes the JavaScript code by analyzing the application at the module-level and creating smaller, more efficient bundles. Additionally, Next.js 13 supports the latest version of popular front-end Frameworks, like Tailwind CSS.

API Routes Enhancements

The new version of Next.js provides a more modern version of API Routes , which makes it easier for developers to create serverless functions with server-side rendering capabilities. This new feature deeply integrates with the routing system, allowing developers to define API Routes alongside pages and layouts. The modern API Routes provide an intuitive request handler pattern with native support for request monitoring, rate-limiting, and middleware.

Other Updates

Next.js 13 also includes various other updates, like Font Optimization, updated Image, Link, and Script components, enhanced Next.js analytics with real-time metrics, and improved TypeScript support.

Happy coding!

Getting Started with React Testing Library

ABDULKAREEM — Tue, 04 Apr 2023 11:41:51 +0000

React Testing Library is a popular testing utility that helps developers test their React applications more effectively. It allows developers to write tests that simulate real user interactions and ensure that their applications behave as expected. In this article, we'll walk through the basics of React Testing Library and learn how to write tests for React components using this library.

Before we start, make sure that you have a basic understanding of React and its ecosystem. You should also have some experience with writing tests using a testing framework like Jest.

Installing React Testing Library:
To install React Testing Library, you can use npm or yarn. Simply run the following command in your terminal:

npm install @testing-library/react

yarn add @testing-library/react

Writing Your First Test:
Let's start by writing a simple test for a React component. Suppose we have a component called Greeting that takes a name prop and displays a greeting message. Here's what the component looks like:

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default Greeting;

To test this component, create a new file called Greeting.test.js and add the following code:

import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';

test('renders greeting message', () => {
  const { getByText } = render(<Greeting name="John" />);
  const greetingElement = getByText(/Hello, John!/i);
  expect(greetingElement).toBeInTheDocument();
});

Let's break down this code:

We import the render function from @testing-library/react and the Greeting component from ./Greeting.
We define a new test case using the test function provided by Jest. This test case checks whether the component renders a greeting message with the correct name.
We use the render function to render the Greeting component with the name prop set to "John". The render function returns an object with various query functions that we can use to find elements in the rendered component.
We use the getByText query function to find an element that contains the text "Hello, John!". The getByText function searches for an element that matches the given text, ignoring case.
We use the toBeInTheDocument matcher provided by Jest to check whether the greetingElement is present in the document.
When you run this test using Jest, it should pass.

Simulating User Interactions:
One of the key features of React Testing Library is its ability to simulate user interactions. Let's say we have another component called Counter that displays a counter value and two buttons to increment and decrement the value. Here's what the component looks like:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

To test this component, we can use React Testing Library to simulate user clicks on the buttons and verify that the counter value updates correctly.

Push Notification | React Native | Android

ABDULKAREEM — Wed, 08 Apr 2020 12:31:28 +0000

In React Native, most of the developers use third-party services like Firebase or OneSignal for Push Notification service. Here through this tutorial, I wish to show you how we can do Push Notification without these third-party services.

We can do this by React Native Push Notifications library.we can create both local push notifications and scheduled ones too. This would be similar to having set an event in the app or even a timer to trigger a notification while running the app, or even after it has been closed.

Installation

Open your project folder in your favourite editor. Install react-native-push-notification package.

npm install --save react-native-push-notification

Setting up Android Files

Open android/build.gradle and add the following changes:

 ext {
        googlePlayServicesVersion = "+"
        firebaseVersion = "+"
        ...
    }

After that, open AndroidManifest.xml and add following changes:

...
<uses-permission android:name="android.permission.WAKE_LOCK" />
    <permission
        android:name="${applicationId}.permission.C2D_MESSAGE"
        android:protectionLevel="signature" />
    <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" /> 
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

<application ....>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
                android:value="YOUR NOTIFICATION CHANNEL NAME"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
                    android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                    android:resource="@android:color/white"/>
        <receiver
            android:name="com.google.android.gms.gcm.GcmReceiver"
            android:exported="true"
            android:permission="com.google.android.c2dm.permission.SEND" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <category android:name="${applicationId}" />
            </intent-filter>
        </receiver>
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>
        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            </intent-filter>
        </service>

After that, In android/settings.gradle

include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android')

And finally, create the file android/app/src/res/values/colors.xml and add the following:

<resources>
    <color name="white">#FFF</color>
</resources>

That's it for the Android Setup!

Putting it all together!

Open your App.js and add the following

import PushNotification from 'react-native-push-notification';

...

//Push Notification configuration 
    PushNotification.configure({
      onRegister: function (token) {
        console.log('TOKEN:', token);
      },
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
        notification.finish(PushNotificationIOS.FetchResult.NoData);
      },
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      },
      popInitialNotification: true,
      requestPermissions: true,
    });

For Local Notifications,

// Function for Local Notification
  const localPushNotification = () => {
    PushNotification.localNotification({
      title: 'Local Notification',
      message: 'This is a local notification example',
    });
  };

Preview

For Scheduled Notifications,

//Function For Scheduled Notification
  const scheduledNotification = () => {
    PushNotification.localNotificationSchedule({
      title: 'Scheduled Notification',
      message: 'Scheduled Notification Message', // (required)
      date: new Date(Date.now() + 60 * 300),
    });
  };

Preview

Wrap up

If everything was successful you should be able to schedule local notifications! Here the complete repo for the project:

tpmabdulkareem / Push-Notification-App

A simple example for react native push notification

Sources

https://github.com/zo0r/react-native-push-notification#readme

Generate your own React Component using CLI by using Plop.js

ABDULKAREEM — Tue, 07 Apr 2020 11:28:58 +0000

Those who have previously worked in Angular may be noticed that the React ecosystem is not standardized as an Angular ecosystem. A new React app has nothing much. The directory and dependencies structures can be made as our own wish. That could be good, but that rise lack of uniformity amongst React developers.

We don't have a CLI command similar to angular-cli to generate a new component, the research to overcome this helped me to find plop.js.

What is Plop?
Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.

Let's Start coding...

Setting up your app

First, let’s create a new react app using create-react-app

npx create-react-app my-app

Once the app is successfully created, now change your working directory by running below command.

cd my-app

Installing plop.js

Install plop as a dev-dependency

npm install --save-dev plop

Setting up the project structure

We need to decide, what boilerplate you want to generate. Over the last few projects, I'm using the following structure for my React app.

Configuring plop

create a plopfile.js in your root app folder and add the below code.

const { readdirSync } = require("fs");

const getDirectories = (source) =>
    readdirSync(source, { withFileTypes: true })
        .filter((dirent) => dirent.isDirectory())
        .map((dirent) => {
            return { name: dirent.name, value: dirent.name };
        });

module.exports = (plop) => {
    let directories = getDirectories("src/pages");
    plop.setGenerator("component", {
        description: "Create a component",
        // User input prompts provided as arguments to the template
        prompts: [
            {
                // Raw text input
                type: "input",
                // Variable name for this input
                name: "name",
                // Prompt to display on command line
                message: "What is your component name?",
            },
            {
                // Raw text input
                type: "confirm",
                // Variable name for this input
                name: "isCommon",
                // Prompt to display on command line
                message: "Is it common component?",
            },
            {
                when: function (response) {
                    return response.isCommon === false;
                },
                // Raw text input
                type: "list",
                // Variable name for this input
                name: "container",
                // Prompt to display on command line
                message: "Choose container?",
                choices: directories,
            },
        ],
        actions: (data) => {
            const path = data.isCommon ? "src/common/" : "src/pages/" + data.container + "/";

            let actions = data.isCommon
                ? [
                        {
                            // Add a new file
                            type: "add",
                            // Path for the new file
                            path: path + "{{pascalCase name}}/{{pascalCase name}}.js",
                            // Handlebars template used to generate content of new file
                            templateFile: "plop-templates/Component/Component.js.hbs",
                        },
                        {
                            type: "add",
                            path: path + "{{pascalCase name}}/index.js",
                            templateFile: "plop-templates/Component/index.js.hbs",
                        },
                        {
                            type: "add",
                            path: path + "{{pascalCase name}}/{{pascalCase name}}.styled.js",
                            templateFile: "plop-templates/Component/styled.js.hbs",
                        },
                        {
                            type: "add",
                            path: path + "{{pascalCase name}}/{{pascalCase name}}.stories.js",
                            templateFile: "plop-templates/Component/stories.js.hbs",
                        },
                  ]
                : [
                        {
                            // Add a new file
                            type: "add",
                            // Path for the new file
                            path: path + "{{pascalCase name}}/{{pascalCase name}}.js",
                            // Handlebars template used to generate content of new file
                            templateFile: "plop-templates/Component/Component.js.hbs",
                        },
                        {
                            type: "add",
                            path: path + "{{pascalCase name}}/index.js",
                            templateFile: "plop-templates/Component/index.js.hbs",
                        },
                        {
                            type: "add",
                            path: path + "{{pascalCase name}}/{{pascalCase name}}.styled.js",
                            templateFile: "plop-templates/Component/styled.js.hbs",
                        },
                  ];
            return actions;
        },
    });

    plop.setGenerator("page", {
        description: "Create a page",
        // User input prompts provided as arguments to the template
        prompts: [
            {
                // Raw text input
                type: "input",
                // Variable name for this input
                name: "name",
                // Prompt to display on command line
                message: "What is your page name?",
            },
        ],
        actions: [
            {
                // Add a new file
                type: "add",
                // Path for the new file
                path: "src/pages/{{pascalCase name}}/{{pascalCase name}}.js",
                // Handlebars template used to generate content of new file
                templateFile: "plop-templates/Component/Component.js.hbs",
            },
            {
                type: "add",
                path: "src/pages/{{pascalCase name}}/index.js",
                templateFile: "plop-templates/Component/index.js.hbs",
            },
            {
                type: "add",
                path: "src/pages/{{pascalCase name}}/{{pascalCase name}}.styled.js",
                templateFile: "plop-templates/Component/styled.js.hbs",
            },
        ],
    });
};

Creating plop-templates

We need to create a plop-templates so that plop.js generates the new components based on that template.

Inside your root app folder create a new folder called plop-templates and create templates with .hbs extension indicates that this is a Handlebars.js template.

For my folder structure, I have four template files as follows:

1. Functional component

2. Styled Component

3. Storybook

4. index.js

Adding script to package.json

And lastly, we’ll want to add a script to our package.json to create an alias for the plop command.

"generate": "plop"

With this, our plop setup is complete now open your terminal and run npm run generate.

It prompts a question with two options component or page

If you choose component. Then,

After entering the component name and hitting enter key, it will prompt another question asking whether it is a common component or not. If you choose common, then the component will be generated under the common folder, else it maps the page folder, from where you could generate the component inside the respective page component.

If you were chosen page instead of component, then the resulting will be:

Now that we’ve built out our component generator, we can build generators for Redux, Hooks, and services as well.

Thanks 🙌 for reading and happy coding!