nurmdrafi

Building a Secure LocalStorage Utility with crypto-js

Browser's LocalStorage is convenient but stores data in plaintext, creating security risks. Let's build a TypeScript utility that adds encryption using crypto-js to better protect client-side data.

The Problem with Default LocalStorage

LocalStorage has three key security issues:

• Stores everything as plaintext
• Vulnerable to XSS attacks
• No built-in expiration mechanism

nurmdrafi

Vitest setup

MOCK SETUP CONFIGURATION WORKFLOW

PHASE 1: PROJECT STRUCTURE ANALYSIS
1. Redux: Located in redux/, with feature-specific logic in redux/features/
2. API Responses: Used in pages/ and hooks/
3. LocalStorage/SecureLocalStorage: Used in utils/ or directly in components
4. Tests: Stored in __tests__/ with mocks designed for testing

nurmdrafi

Using AI and Prompt Composer for Unit Tests

Table of Contents

1. Introduction
2. Setting Up Your Testing Environment
3. Understanding Your Project Structure
4. Creating Effective AI Prompts for Testing
5. Using the AI Prompt Composer
6. Testing Different Types of Components

nurmdrafi

How to Generate Unit Tests Using AI Prompts

Table of Contents

1. Introduction
2. Setting Up Your Testing Environment
3. Understanding Your Project Structure
4. Creating Effective AI Prompts for Testing
5. Using the AI Prompt Composer
6. Testing Different Types of Components

nurmdrafi

Test Coverage Integration with SonarQube and GitHub Actions

This document outlines the steps taken to integrate test coverage reporting into SonarQube using GitHub Actions for the Laboni Express project.

Overview

The goal was to ensure that test coverage data (generated by Vitest) is correctly reported to SonarQube during the CI/CD pipeline. This involved:

1. Generating test coverage files in GitHub Actions.
2. Configuring Vitest to generate coverage files.

nurmdrafi

src/
├── app/                          # Next.js app router
│   ├── (marketing)/              # Public pages (e.g., home, about)
│   ├── (shop)/                   # Shop-related pages
│   ├── (product)/                # Product-related pages
│   ├── (admin)/                  # Admin-related pages
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page
├── components/                   # Reusable components

nurmdrafi

[Project Title]

1. Project Overview

Description

Insert a brief and concise description of the project. For example: "A web application for [briefly state the main purpose, e.g., tracking expenses, managing tasks, creating a portfolio]."

Purpose

nurmdrafi

Bash

# Enable the subsequent settings only in interactive sessions
case $- in
  *i*) ;;
    *) return;;
esac

# Path to your oh-my-bash installation.
export OSH='/home/nurmdrafi/.oh-my-bash'

nurmdrafi

tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
 "@features/*": ["redux/features/*"],

nurmdrafi

tsconfig.json

{
{
	"compilerOptions": {
		"target": "es2022",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,