SKIP_TO_CONTENT
L.PAPAPETROU
Lead frontend developer. Focus: React architecture and the shared component library four of the company's products are built on. Status: online.

LEFKOS
PAPAPETROU

LEAD FRONTEND DEVELOPER

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

ABOUT

React and TypeScript developer, promoted to frontend lead within a year of joining Odyssey Cybersecurity. I've rebuilt enterprise platforms from Ext.NET to React and shipped modular Angular systems from the ground up.

I own the frontend architecture for ClearSkies and the component library four of the company's products are built on, and I lead a team of three through a legacy 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
  • EXPRESS
  • REST
  • WEBSOCKETS
  • TAILWIND
DELIVERY //
  • DESIGN_SYSTEMS
  • UNIT_TESTING
  • GIT
  • CI/CD
  • PWA

LOG

CURRENT_DEPLOYMENTJUN_2025 -> PRESENT

ODYSSEY CYBERSECURITY

MAY_2026 -> PRESENT
Lead Software Developer (Frontend) // ClearSkies
  • Replaced a 7-layer architecture with a flat, conventional React structure, cutting the number of files a typical feature touches. Still building features in it day to day.
  • Own the shared UI component library end to end: 40+ components on shadcn/ui, used by four products across the company, not just ClearSkies.
  • Lead three frontend developers through mentoring and code review, and brought the team onto an AI-assisted workflow with Claude Code, now our default way of building features.
JUN_2025 -> MAY_2026
Software Developer (Frontend) // ClearSkies
  • Built the client-side dashboard engine: users compose their own dashboards from around 130 widget types, reordering and resizing on a grid, with new widget types dropping in without touching the engine.
  • One of the core contributors on the rewrite from C#/Ext.NET to React, moving around 20 modules off the legacy stack and building the component systems that replaced it.
PREVIOUS_NODEAPR_2022 -> MAY_2025

MEDLO

Frontend Developer
  • Sole frontend owner of a staffing and scheduling platform used across 10+ regions in Sweden.
  • Shipped the original scheduling module in Angular/TypeScript, then three years of calendar-heavy features on top of it.
  • Built the platform's first automatic shift-to-staff assignment engine.
  • Built the API endpoints behind those features and covered that backend work with Mocha unit tests.
  • Designed the UI myself; the team had no designer.
ARCHIVED_NODESEP_2018 -> SEP_2021

PRIMOTHEPLUG

Owner
  • Ran an e-commerce brand end to end: built the storefront, product pages, and a conversion-optimized checkout, and owned the frontend layer alongside inventory and pricing logic.
  • Grew three social channels into recurring brand partnerships.

SELECTED_WORKS

Trippio walkthrough: an idea is typed into the capture bar, voted on, approved, and a Claude-suggested time slot lands it on the day's itinerary
> ./TRIPPIO.exe●LIVE

TRIPPIO

A trip planned by the four people going on it, not by whoever volunteers to own a spreadsheet. Reels and links get captured and voted on before they're lost, then promoted straight into an itinerary. That messy group phase is the part most planning apps skip past. Built for a real China trip: offline-first with an IndexedDB-persisted cache for a spotty network, WGS-84→GCJ-02 coordinate conversion so pins land correctly on Chinese map providers, and Claude-suggested day/time slots for a promoted idea.

REACTEXPRESSMONGODBCLAUDE_API
Why it was built this wayADR-006A dead network and a dead session look identical: don't treat them the same
TRY_DEMOSOURCE (CLIENT) ↗SOURCE (SERVER) ↗
Tweetprenuer business card generated from an X profile
> ./TWEETPRENUER.exe●LIVE

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.

ANGULAREXPRESSMONGODBOPENAI
Why it was built this wayADR-001LLM calls belong behind a backend, not in the browserADR-002Cache AI generations: staleness is a feature, not a bug
LAUNCH_APPSOURCE ↗
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
Why it was built this wayADR-004In a hackathon, fake the familiar, build the differentiator
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 ──
> 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
Why it was built this wayADR-005One declarative API beats fifteen flexible components
VIEW_DOCSSOURCE ↗
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: 06

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
ADR-0062026-08-20

A dead network and a dead session look identical: don't treat them the same

Decision
Catch the fetch failure itself (a NetworkError) before it reaches the same code path as a 401. A network failure sets an isOffline flag and renders read-only from the cached identity and the IndexedDB-persisted query cache; an actual rejection clears the session and bounces to /login.
What it cost
Every screen that gates on "am I allowed to write" now has to check isOffline in addition to isReadOnly for a share link, which is two reasons for the same UI state to be true, discovered the hard way in the middle of unrelated screens.
TRIPPIOFULL_RECORD
READ_THE_FULL_LOG

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.

PAUSED2025-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