SKIP_TO_CONTENT
L.PAPAPETROU
Lead frontend developer. Focus: modernizing legacy platforms into React. Status: online.

LEFKOS
PAPAPETROU

LEAD FRONTEND DEVELOPER

EXP
4+ YRS
NOW
ODYSSEY // CLEARSKIES
LOC
NICOSIA, CY
STACK
REACT / TS

ABOUT

Lead frontend developer specializing in modernizing legacy systems into scalable, maintainable UI architectures. I've rebuilt enterprise platforms from Ext.NET to React and shipped modular Angular systems from the ground up.

Currently leading frontend on ClearSkies at Odyssey Cybersecurity, owning architecture direction, mentoring the team, and driving a full platform rewrite. I optimize for code that outlives the sprint: clear module boundaries, reviewable patterns, and UIs other engineers can extend without a walkthrough.

TECH_STACK //
CORE //
  • TYPESCRIPT
  • REACT
  • ANGULAR
  • NEXT.JS
PLATFORM //
  • NODE.JS
  • REST
  • WEBSOCKETS
DELIVERY //
  • DESIGN_SYSTEMS
  • GIT
  • VITE

LOG

CURRENT_DEPLOYMENTJUN_2025 -> PRESENT

ODYSSEY CYBERSECURITY

MAY_2026 -> PRESENT
Lead Software Developer (Frontend) // ClearSkies

Own frontend architecture for ClearSkies: module boundaries, shared patterns, and long-term React platform direction. Lead a small frontend team through mentoring, structured code reviews, and unblocking delivery while raising the quality bar.

JUN_2025 -> MAY_2026
Software Developer (Frontend) // ClearSkies

Core contributor to the ClearSkies rewrite from C#/Ext.NET to React. Shipped composable component systems that replaced a brittle legacy UI layer, reducing developer onboarding friction and improving cross-team maintainability across the platform.

PREVIOUS_NODEAPR_2022 -> MAY_2025

MEDLO

Frontend Developer

Owned frontend delivery on an internal staffing platform for three years: shipped the original scheduling module in Angular/TypeScript, then kept building calendar-heavy features on top, including an automatic shift-to-staff assignment engine. Wrote unit tests throughout and, with no dedicated designer on the team, owned UI design decisions directly, iterating 2-3 directions per feature before committing.

ARCHIVED_NODESEP_2018 -> SEP_2021

PRIMOTHEPLUG

Owner & Digital Strategist

Built and maintained a custom e-commerce platform end-to-end: product pages, landing flows, and conversion-optimized checkout. Owned the frontend layer alongside inventory systems and pricing logic. Business strategy and social channel growth drove recurring brand partnerships.

SELECTED_WORKS

Tweetprenuer business card generated from an X profile
> ./TWEETPRENUER.exeLIVE

TWEETPRENUER

Shipped full-stack AI product: drop an X handle and get a generated, shareable business card. Angular 19 frontend, Express + MongoDB backend with response caching to control API spend, an OpenAI prompt pipeline, and a screenshot share-to-X flow. 120+ cards generated in the wild.

ANGULAREXPRESSMONGODBOPENAI
MODULE_02 // FINTECH_HACKATHON

PARKIT

Parking marketplace PWA built for the Bank of Cyprus Fintech Hackathon: live map with geolocation, booking flow, QR check-in, realtime payment events over WebSockets, push notifications, and a vendor dashboard, end to end against a deployed backend.

ANGULARLEAFLETSOCKET.IOPWA
SOURCE ↗
booking.socket — live
12:04:11 connect vendor:LARNACA_0412:04:12 slot.reserve → B-229112:04:19 qr.scan CHECK_IN ok12:41:03 qr.scan CHECK_OUT 37m12:41:04 payment.settled €2.47── vendor dashboard updated ──
#eng-risk — 08:00 digest
change-radar ▸ 3 findingsHIGH migrations/0142_drop_orders.sql
DROP COLUMN on a table with 4 FKs
MED  openapi.yaml
response shape changed: /v2/accounts
LOW  .github/workflows/deploy.yml
MODULE_03 // SYSTEMS_TOOLING

CHANGE_RADAR

On-prem CLI daemon that watches git repositories for risky changes: SQL migrations, OpenAPI contract diffs, sensitive paths, and posts prioritized Slack digests. SQLite-backed state, Dockerized, covered by vitest suites. No code ever leaves the network.

TYPESCRIPTNODE_CLISQLITEDOCKER
SOURCE ↗
> FORMFORGE_LIB

FORMFORGE

React form component library: 15+ composable, typed field components behind a single declarative API, shipped with a docs site featuring live previews, copyable examples, and a visual form builder.

REACTTYPESCRIPTDESIGN_SYSTEMS
schema in — form out
const schema = {email: { type: "email", required: true },password: { type: "password", min: 8 },plan: { type: "select", options: [...] },}<Form schema={schema}/>── labels, a11y wiring, errors, layout ──

DECISION_LOG

RECORDS: 05

Not a blog. Every non-obvious call I've made on a real project, written up the way I'd write it for a team: the constraint, the options I rejected, what the choice cost me, and what I'd do differently. The mistakes are in here too — they're the useful part.

ADR-0012025-02-08

LLM calls belong behind a backend, not in the browser

Decision
All LLM and third-party API traffic moves behind an Express backend. The client only ever talks to my API.
What it cost
A whole second deployable (server, env management, CORS, hosting) for what was a weekend project.
TWEETPRENUERFULL_RECORD
ADR-0022025-02-21

Cache AI generations: staleness is a feature, not a bug

Decision
Persist every generated result in MongoDB keyed by username. Repeat requests return the stored card instead of erroring or regenerating.
What it cost
Users who want a fresh card for the same handle don't get one. The result is frozen at first generation.
TWEETPRENUERFULL_RECORD
ADR-0032025-12-22

AI scaffolds are for discovering the product, not shipping it

Decision
Prototype the full product surface in an AI scaffold (Lovable), treat it as a disposable spec, and hand-write the production app natively.
What it cost
Building the product twice. The prototype's 40+ generated UI components and all its iteration history get thrown away.
FULL_RECORD
ADR-0042025-09-25

In a hackathon, fake the familiar, build the differentiator

Decision
Hardcode the current user, mock the payment settlement, and spend the time making the differentiating flows real: live map, booking, QR check-in/out, WebSocket payment events, push notifications.
What it cost
The codebase ships with a hardcoded user ID and mock payment paths: embarrassing to read, disqualifying for production, perfect for a demo.
PARKITFULL_RECORD
ADR-0052026-05-21

One declarative API beats fifteen flexible components

Decision
Consumers describe the form as data (fields, types, validation) and the library owns rendering, layout, and state. Individual components stay internal.
What it cost
Escape hatches get harder. The weird one-off form that needs a custom layout fights the abstraction instead of being helped by it.
FORMFORGEFULL_RECORD

IN_THE_LAB

RUNNING: 03

Work in progress, listed honestly. Source is public from day one; nothing here claims to be finished.

LAB-01

BUDGET_FIREWALL

Personal finance app that imports bank transactions and surfaces spending patterns before money leaks.

NEXT.JSREACTTYPESCRIPT

Next //Budget rules engine and intent-based spending alerts.

ACTIVE2026-01SOURCE ↗
LAB-02

REVIEWSNAP

Let creators collect testimonials, customize an embeddable widget, and publish a public review page.

NEXT.JSREACTTYPESCRIPT

Next //Billing, onboarding polish, and embed script for third-party sites.

STARTED2025-07SOURCE ↗
LAB-03

TRADING_TERMINAL

Live market-watch dashboard for trading/forex platforms — streaming price data, not a static demo.

REACTREDUX_TOOLKITWEBSOCKETSLIGHTWEIGHT_CHARTS

Next //Virtualized order book that holds 60fps under load, profiled and written up, plus P&L math tests.

ACTIVE2026-07SOURCE ↗

+ more experiments on github.com/lefkosp ↗

END_OF_DOCUMENT // SIGNAL_AWAIT

INITIATE
CONNECTION

SEND_MESSAGE