Portfolio — JP Codes

Localizations Editor

translations-26

Currently Private

A full-stack inline grid editor for managing software localizations stored in MS SQL Server. Built with Next.js and Tailwind CSS v4, it provides a pivoted spreadsheet-style interface where Resource IDs are rows and languages are columns — making translation management fast and intuitive for both admins and translators.

Key Features

Inline cell editing with keyboard shortcuts (Ctrl+Enter to save, Escape to cancel) and ResourceSet switching
Admin dashboard with translation coverage heatmaps, translator activity tracking, and PDF report export
Auto-translation via Azure Translator API; bulk import from Excel, CSV, JSON, and images (OCR via Azure AI Vision)
Role-based access (Admin/Translator) via Clerk; per-user locale assignment and preference persistence
Export to i18next JSON and .RESX formats; word count badges and completion tracking per language

Tech Stack

Next.js React TypeScript Tailwind CSS v4 MS SQL Server Clerk Azure Translator Azure AI Vision jsPDF

Demo

Tech Trending Dashboard

tech-trending

View on GitHub

A responsive, dark-themed dashboard aggregating technology trends in real-time from ten sources including GitHub, Hacker News, Dev.to, npm, crates.io, Lobste.rs, Docker Hub, news outlets, YouTube, and Reddit — with dedicated views for Global, UK, and US markets.

Key Features

Global, UK, and US tabs with a Today / Last 7 Days toggle; five independent sections per view
Ten live data sources: GitHub Trending, Hacker News, Dev.to, npm, crates.io, Lobste.rs, Docker Hub, NewsAPI, YouTube, and Reddit
All API endpoints fetched in parallel via Promise.allSettled() - one slow source never blocks the rest
5-minute server-side caching; sub-2-second initial load; skeleton loading states throughout
Graceful degradation with realistic demo data and a clear DEMO badge when an API key is missing or rate-limited

Tech Stack

Next.js 14 React 18 TypeScript Tailwind CSS Recharts GitHub API Hacker News API NewsAPI YouTube Data API

Demo

E-Commerce Shop

e-comm-shop

View on GitHub

A full-featured e-commerce storefront built with Next.js and TypeScript, demonstrating the core patterns and UI interactions found in modern online retail — from browsing a product catalogue through to managing a basket and proceeding to checkout.

Key Features

Product catalogue with listing and individual product detail pages
Add to basket, update quantities, and remove items — persistent basket state
Checkout flow with order summary and form handling
Responsive design with clean, modern storefront UI built with Tailwind CSS
Built on the Next.js App Router with TypeScript throughout

Tech Stack

Next.js React TypeScript Tailwind CSS App Router Vercel

Bookmark Manager

bkmark-mngr

View on GitHub

A lightweight, dark-themed web application for storing and organising web links. Submit a URL and the app automatically retrieves the page title, description (with Open Graph / Twitter meta tag support), and favicon — no manual entry needed. Bookmarks are stored locally in JSON format and duplicates are prevented via URL validation.

Key Features

Automatic metadata retrieval — title, description, and favicon fetched on submission
Live processing updates via Server-Sent Events (SSE)
URL validation to prevent duplicate bookmarks
File-based persistence with JSON storage — no database required
Minimalist dark interface built with Tailwind CSS

Tech Stack

Node.js TypeScript Express Tailwind CSS Server-Sent Events Axios Cheerio JSON Storage