HF

Available for projects & collabs

Hi, I'm Hendra Febri — Crafting Clean Code & Immersive Soundscapes.

Full-Stack Developer and Music Producer

I build fast, thoughtful web and mobile products by day, and produce beats, film scores, and client mixes by night. Same obsession, two outputs: things that feel right.

Explore My Works

01 / Code & Dev

Products that ship clean and scale quietly.

A selection of web and mobile work — each one started with a real problem. Peek at the code behind any of them.

kasflow.app
Kasflow dashboard showing a cash flow forecast chart, KPI cards and an invoice table

Web App / SaaS

Kasflow

The problem
Small business owners were tracking invoices across spreadsheets and chat threads, with no idea what cash would look like next month.
What I built
A multi-tenant invoicing dashboard that syncs payments automatically and forecasts 90-day cash flow from recurring patterns.
  • Next.js
  • TypeScript
  • Node.js
  • PostgreSQL
  • Tailwind CSS
Live DemoGitHub
lib/forecast.ts
// Project 90 days of cash flow from recurring invoices
export async function forecastCashFlow(orgId: string, days = 90) {
const invoices = await db.invoice.findMany({
where: { orgId, status: "recurring" },
});
const timeline = new Map<string, number>();
for (const invoice of invoices) {
for (const date of nextOccurrences(invoice.schedule, days)) {
const key = date.toISOString().slice(0, 10);
timeline.set(key, (timeline.get(key) ?? 0) + invoice.amount);
}
}
return [...timeline.entries()].sort(([a], [b]) => a.localeCompare(b));
}
TypeScriptLn 17, UTF-8
Ritme mobile app showing a metronome dial and weekly practice streak bars

Mobile / Frontend

Ritme

The problem
Musicians practice inconsistently because most metronome apps forget everything the moment you close them.
What I built
A practice tracker with a tactile metronome dial, streaks, and session history — designed thumb-first with fluid gestures.
  • React Native
  • Expo
  • TypeScript
  • Zustand
  • Reanimated
Live DemoGitHub
hooks/use-metronome.ts
// Drift-free metronome using the audio clock, not setInterval
export function useMetronome(bpm: number) {
const [beat, setBeat] = useState(0);
const nextTick = useRef(0);
useEffect(() => {
const interval = 60 / bpm;
nextTick.current = audio.currentTime + 0.05;
const id = setInterval(() => {
while (nextTick.current < audio.currentTime + 0.1) {
scheduleClick(nextTick.current);
nextTick.current += interval;
setBeat((b) => (b + 1) % 4);
}
}, 25);
return () => clearInterval(id);
}, [bpm]);
return beat;
}
TypeScriptLn 22, UTF-8
beatgrid.app
Beatgrid step sequencer with a 16-step drum grid and mixer faders

Creative Tool

Beatgrid

The problem
Sketching drum ideas usually means opening a full DAW, which kills spontaneity.
What I built
A browser step sequencer with shareable pattern URLs — the same engine that powers the audio previews on this site.
  • React
  • Web Audio API
  • TypeScript
  • Tailwind CSS
Live DemoGitHub
engine/kick.ts
// Synthesized kick: a sine with a fast pitch drop
export function kick(ctx: AudioContext, time: number) {
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.frequency.setValueAtTime(150, time);
osc.frequency.exponentialRampToValueAtTime(42, time + 0.12);
gain.gain.setValueAtTime(0.95, time);
gain.gain.exponentialRampToValueAtTime(0.001, time + 0.45);
osc.connect(gain).connect(ctx.destination);
osc.start(time);
osc.stop(time + 0.5);
}
TypeScriptLn 14, UTF-8

02 / Music & Audio

The studio, right in your browser.

Beats, scoring, and client mixing work. Hit play for a 30-second preview — click anywhere on the waveform to jump around.

01

Midnight Commit

Lo-Fi Hip-HopBeat2:48

Dusty Rhodes chords and a lazy swing, built for late-night debugging sessions.

0:000:30 preview
02

Neon Monsoon

Hip-HopBeat3:12

Boom-bap drums under a gritty minor riff. Rain on Jakarta asphalt, city lights humming.

0:000:30 preview
03

Arcadia Rising

CinematicScoring4:05

Original score for an indie game trailer — slow-blooming pads and a hopeful motif.

0:000:30 preview
04

Kopi Senja

R&B / PopMixing & Mastering3:34

Client single — vocal chain, bus compression, and a warm master ready for streaming at -14 LUFS.

Mixed & mastered for Nadia Larasati

0:000:30 preview

03 / Tech Stack & Tools

Fluent in two worlds.

The tools I reach for every day — one set compiles, the other one grooves.

> development_stack

  • JavaScript
  • TypeScript
  • React
  • Next.js
  • Node.js
  • Tailwind CSS
  • PostgreSQL
  • Git
  • Docker
  • Figma

> studio_gear

  • FL StudioBeatmaking & arrangement
  • Ableton LiveSound design & live sets
  • MIDI Controller49-key + pad controller
  • Serum & KontaktSynths and sample libraries
  • FabFilter SuiteEQ, compression, limiting
  • iZotope OzoneMastering for streaming
Hendra's home studio at night with a code editor, a DAW session, and a MIDI keyboard

04 / About Me

Logic by day. Rhythm by night.

Writing code taught me to think in systems — break a problem down, name things well, and refactor until it's obvious. Producing music taught me the opposite: trust your ears, chase the feeling, and know when to leave a happy accident in the mix.

I've stopped seeing them as two separate careers. A well-structured codebase has rhythm. A great mix has architecture. Bringing both mindsets to every project is how I build digital work that's precise underneath and feels alive on the surface.

Products shipped
30+
Tracks produced
120+
In both crafts
6 yrs

05 / Contact & Collaboration

Got a build or a beat in mind?

Tell me about your product, your record, or both. I usually reply within two working days.

hello@hendrafebri.dev
hendra@studio: ~/contact

$ ./new-message --interactive

? subject

// press enter in a field or hit send