Forem: Rodion Kazennov

Japan Life Hub: Net Salary Calculator & Housing Guide

Rodion Kazennov — Thu, 04 Dec 2025 00:00:00 +0000

Just shipped two new features for Japan Life Hub — a Net Salary Calculator with 2025 tax rates and a comprehensive Housing Guide. Both available in English, Japanese, Russian, and Hindi.

This article covers:

Why Year 1 vs Year 2 salary matters
2025 Japanese tax rates and deductions
Apartment rental costs breakdown
Key terminology for foreigners
Lessons learned building multilingual tools

The Year 1 Salary Trap

When I moved to Japan, my first paycheck was surprisingly high. Then Year 2 hit.

The catch: Japan's resident tax (住民税 juuminzei) is calculated on previous year's income and collected the following year. Your first year in Japan? Zero resident tax. Year 2? Roughly 10% of your gross salary disappears.

Nobody told me this. I built the calculator I wish I had.

Net Salary Calculator

The calculator shows both Year 1 and Year 2 take-home pay side by side.

2025 Tax Rates

Spent a day researching current rates from official sources. Here's what's deducted from your salary:

Social Insurance (Employee Share):

Item	Rate	Notes
Health Insurance	4.955%	Tokyo rate, March 2025
Long-term Care	0.795%	Ages 40-64 only
Pension	9.15%	Capped at ¥650k/month
Employment Insurance	0.55%	April 2025 update

Income Tax: Progressive 5-45% across 7 brackets, plus 2.1% reconstruction surcharge until 2037.

Resident Tax: ~10% (6% prefectural + 4% municipal), delayed one year.

Calculator Features

Employment type toggle: Employee vs Self-employed (different deductions)
Age selector: Long-term care insurance kicks in at 40
Dependents & spouse: Affects deductions for employees
Visual breakdown bar: See where your money goes
Salary presets: Junior ¥3M, Mid ¥5M, Senior ¥7M, Manager ¥10M
Share button: Copy summary to clipboard

The "What You Get Back" section explains what you're paying for — 70% healthcare coverage, pension from 65, unemployment benefits. Japanese social insurance is actually good value.

Housing Guide

Finding an apartment in Japan as a foreigner is confusing. Unique fees, guarantor requirements, Japanese-only listings.

The guide covers the entire process in 8 sections.

Key Terminology

Japanese rental vocabulary that confused me:

Japanese	Romaji	Meaning
敷金	shikikin	Deposit, 1-2 months, refundable
礼金	reikin	"Key money" gift to landlord, 0-2 months, gone forever
管理費	kanrihi	Monthly maintenance fee, ¥3,000-15,000
更新料	koushinryo	Renewal fee, ~1 month every 2 years
保証会社	hoshougaisha	Guarantor company, 30-100% of 1 month

Good news: less than 50% of renters now pay key money. Look for 礼金なし (reikin nashi) listings.

Initial Costs Example

For ¥80,000/month rent:

Cost	Amount	Refundable
First month rent	¥80,000	No
Deposit	¥80,000	Yes
Key money	¥80,000	No
Agency fee	¥88,000	No
Guarantor	¥40,000-80,000	No
Insurance	¥15,000	No
Lock change	¥15,000	No
Total	¥398,000-438,000

That's 5-6x monthly rent upfront. Budget accordingly.

Where to Search

The Housing Guide covers all major platforms — from Japanese-only sites like SUUMO with the largest listings, to English-friendly options like Real Estate Japan and GaijinPot, plus government UR Housing with no key money or guarantor requirements.

Pro tip: UR Housing has no reikin, no guarantor requirement, no renewal fees. Limited availability but worth checking.

Timing Matters

Avoid March-April. Everyone moves — new graduates, company transfers. Prices spike, competition fierce.

Best time: May-February. More negotiation room, landlords eager to fill vacant units.

What's Next

Japan Life Hub now has:

Initial Costs Calculator
Net Salary Calculator
Moving to Japan Guide
Housing Guide

Coming soon: Monthly Budget Planner, City Comparison Tool, First Year Timeline.

The goal is one place for everything you need to know about living in Japan — practical tools, not generic advice.

Try It

Built with Next.js, TypeScript, Tailwind CSS. All calculations run client-side, no data collected.

If you're moving to Japan or know someone who is — share the link.

Read on AllKeep →

Build a Chrome Extension with React, TypeScript and Vite

Rodion Kazennov — Wed, 03 Dec 2025 12:13:19 +0000

This article walks through building a Chrome extension from scratch using React, TypeScript and Vite. We'll build a Freelance Rate Calculator that helps developers check their market rate.

This article includes:

Setup React + Vite + TypeScript project for Chrome Extension
Configure manifest.json for Manifest V3
Build calculator UI with Tailwind CSS
Load and test extension locally
Submit to Chrome Web Store

Setup Project

Create new Vite project with React and TypeScript:

npm create vite@latest rate-calculator -- --template react-ts
cd rate-calculator
npm install

Add Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind directives to src/index.css:

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

Add Lucide icons:

npm install lucide-react

Add Manifest V3

Create public/manifest.json:

{
  "manifest_version": 3,
  "name": "Freelance Rate Calculator",
  "version": "1.0.0",
  "description": "Calculate your freelance rate based on tech stack, experience, and location",
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Create public/icons/ folder and add extension icons in 16x16, 48x48, and 128x128 sizes.

Add Rate Data

Create src/data/rates.ts with tech stacks, experience levels, and locations:

export interface TechStack {
  id: string;
  name: string;
  baseRate: number;
  demand: "high" | "medium" | "low";
}

export interface ExperienceLevel {
  id: string;
  name: string;
  years: string;
  multiplier: number;
}

export interface Location {
  id: string;
  name: string;
  multiplier: number;
}

export const techStacks: TechStack[] = [
  { id: "genai", name: "GenAI / LLM", baseRate: 175, demand: "high" },
  { id: "rust", name: "Rust", baseRate: 135, demand: "high" },
  { id: "react", name: "React", baseRate: 90, demand: "high" },
  { id: "typescript", name: "TypeScript", baseRate: 92, demand: "high" },
  { id: "nodejs", name: "Node.js", baseRate: 85, demand: "high" },
  { id: "python", name: "Python", baseRate: 90, demand: "high" },
  // add more stacks...
];

export const experienceLevels: ExperienceLevel[] = [
  { id: "junior", name: "Junior", years: "0-2 years", multiplier: 0.55 },
  { id: "mid", name: "Mid-level", years: "3-5 years", multiplier: 1.0 },
  { id: "senior", name: "Senior", years: "5-8 years", multiplier: 1.45 },
  { id: "lead", name: "Lead / Architect", years: "8+ years", multiplier: 1.85 },
];

export const locations: Location[] = [
  { id: "usa", name: "United States", multiplier: 1.0 },
  { id: "uk", name: "United Kingdom", multiplier: 0.85 },
  { id: "germany", name: "Germany", multiplier: 0.82 },
  { id: "japan", name: "Japan", multiplier: 0.62 },
  { id: "india", name: "India", multiplier: 0.32 },
  // add more countries...
];

Rate calculation formula:

const getMarketRate = (
  stack: TechStack,
  exp: ExperienceLevel,
  loc: Location
) => {
  const base = stack.baseRate * exp.multiplier * loc.multiplier;
  return {
    low: Math.round(base * 0.85),
    mid: Math.round(base),
    high: Math.round(base * 1.15),
  };
};

Example: Senior React developer in Germany = 90 * 1.45 * 0.82 = $107/hr

Build Calculator UI

Update src/App.tsx with calculator form:

import { useState } from "react";
import { techStacks, experienceLevels, locations } from "./data/rates";
import type { TechStack, ExperienceLevel, Location } from "./data/rates";

function App() {
  const [stack, setStack] = useState<TechStack | null>(null);
  const [experience, setExperience] = useState<ExperienceLevel | null>(null);
  const [location, setLocation] = useState<Location | null>(null);
  const [myRate, setMyRate] = useState("");
  const [showResult, setShowResult] = useState(false);

  const getMarketRate = () => {
    if (!stack || !experience || !location) return null;
    const base = stack.baseRate * experience.multiplier * location.multiplier;
    return {
      low: Math.round(base * 0.85),
      mid: Math.round(base),
      high: Math.round(base * 1.15),
    };
  };

  const handleCheck = () => {
    if (stack && experience && location && myRate) {
      setShowResult(true);
    }
  };

  // render form or results based on showResult state
  return (
    <div className="w-[400px] h-[600px] p-4 bg-gray-900 text-white">
      {/* form inputs and results */}
    </div>
  );
}

export default App;

Set fixed popup dimensions in src/index.css:

body {
  width: 400px;
  height: 600px;
  margin: 0;
  overflow: hidden;
}

Input form with dropdowns for stack, experience, location:

Results screen showing market rate comparison:

Build Extension

Update vite.config.ts for extension build:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "dist",
    rollupOptions: {
      input: "index.html",
    },
  },
});

Build the extension:

npm run build

This creates dist/ folder with your extension files.

Load Extension Locally

Open Chrome and navigate to chrome://extensions. Enable "Developer mode" in top right corner.

Click "Load unpacked" and select the dist/ folder.

Click the extension icon in toolbar to test the popup.

Submit to Chrome Web Store

Go to Chrome Web Store Developer Dashboard.

First time requires $5 one-time developer fee.

Prepare assets:

Extension icon: 128x128 PNG
Screenshot: 1280x800 or 640x400
Promotional tile: 440x280

Create ZIP of your dist/ folder:

cd dist && zip -r ../extension.zip . && cd ..

Upload ZIP, fill in description, add screenshots, submit for review.

Review takes 1-3 days. Common rejection reasons:

Keyword stuffing in description
Missing privacy policy (if using permissions)
Incorrect screenshots

After approval:

Conclusion

That's all. We built a Chrome extension with React, TypeScript and Vite, tested it locally, and published to Chrome Web Store.

Final stack:

React 18
TypeScript
Vite
Tailwind CSS
Manifest V3

Live extension: Freelance Rate Calculator

If you liked the article, follow me on Twitter @Nefayran for more #buildinpublic content.

Read on AllKeep →