Frontend is Easy Duh!

You're a Frontend Engineer Who Either:

Thinks frontend is not challenging enough or the work at your org isn't compelling/satisfying.
Has backend friends telling you that you're just connecting an API, adding try/catch, and doing some state management—"that's not real engineering, bro."

Let's deep dive into the low-level implementations of difficult frontend projects. (CSP, security, high leave architecture are separate topics.)

Hard Frontend Projects & Why They're Difficult

1. Static Canvases, Drawing/Whiteboards

Example Products: Excalidraw, Earser

Why It's Hard:

Handling freehand drawing, vector graphics, and scaling correctly.
Managing undo/redo efficiently without bloating memory.
Handling real-time sync (WebSockets, CRDTs, or OT algorithms).
Performance optimizations (offscreen canvas, WebGL for complex cases).
Trying to use the GPU

2. WYSIWYG Editors

Example Products: Notion, Google Docs

Why It's Hard:

Handling complex text formatting without breaking cursor positions.
Nested blocks, lists, tables, code snippets—each needs different behavior.
Real-time collaboration (CRDTs, OT, or WebSockets for state sync).

If you really want to explore this in depth, check out these amazing OSS projects:

3. HLS and ABR (Adaptive Bitrate Streaming)

Why It's Hard:

You can't just download a full video; you need to split it into chunks.

Example file structure on S3:

video_uuid/1080/p1.ts
video_uuid/1080/p2.ts
video_uuid/1080/p3.ts
video_uuid/720/p1.ts
video_uuid/720/p2.ts

The frontend uses a manifest.json to decide which resolution to fetch:

{
  "bitrates": [
    { "bitrate": 5000000, "resolution": "1080p", "url": "video_uuid/1080/playlist.m3u8" },
    { "bitrate": 1000000, "resolution": "720p", "url": "video_uuid/720/playlist.m3u8" }
  ]
}

Uses hls.js to fetch and play the chunks.
Extra Configs:
- Thumbnail generation.
- ABR (Adaptive Bitrate Streaming) ensures smooth playback by dynamically adjusting resolution based on network speed.

4. Table Editor (Like Supabase DB Editor)

Why It's Hard:

Handling large datasets efficiently without freezing the UI (virtualization and web workers gonna be your friends).
Virtual scrolling to prevent rendering too many rows at once.
Inline cell editing with validation & error handling.
Syncing with DB efficiently without sending unnecessary updates.

5. Video/Image Editors (Like Canva, Figma, Photoshop)

Why It's Hard:

Resizing, cropping, layering elements dynamically.
Efficiently handling filters, transformations, and effects without lag.
Undo/redo stack that supports multiple actions.
Real-time sync (CRDTs or WebSockets if multi-user editing is required).
In most cases, Canvas API is used for the timeline, so Canvas knowledge is handy.

If you want to check out a real project, I built a video editor myself: Next.js Video Editor

6. Google Sheets Clone (Excel in the Browser)

Why It's Hard:

Handling millions of cells efficiently.
Formulas, dependencies, recalculating affected cells only.
Collaboration (like multiple users editing at once).
Dragging, resizing, merging cells, and handling keyboard shortcuts.

7. Complex Animations (GSAP, Framer Motion)

Why It's Hard:

Performance optimizations (reducing layout thrashing, avoiding forced reflows).
Handling nested animations without breaking state.
Ensuring smooth interactions (scroll-based animations, 3D transformations, etc.).
Synchronizing animations across multiple elements.

8. Video Editor & Transcoder (Like Descript, Premiere Pro Online)

Why It's Hard:

Trimming, cutting, stacking clips on a timeline.
Waveform visualization for audio editing.
Exporting videos efficiently using FFmpeg/WebCodecs.
Real-time playback sync while applying filters/effects.
Needs a server-side transcoder to convert video formats efficiently.

Conclusion

If you think frontend is just about calling APIs, you haven't built real frontend projects yet. The hardest frontend work is as low-level as backend engineering, just in a different way. From video streaming, editors, real-time collaboration, to high-performance rendering, frontend engineering is not easy—it’s just different from backend.

If you’re stuck doing boring UI work, level up and build something hard. 🚀