I started with my personal YouTube channel, where I shared a typical coding videos. In this series, I vibe-coded a clone of the Google Keep app, showcasing how to build a notes application from scratch. The second part focused on enhancing the app by integrating CKEditor for rich-text editing, making it a powerful tool for managing notes. Finally, I demonstrated the inclusion of CKEditor's real-time collaboration features, allowing multiple users to edit notes simultaneously and view revision histories.
Released: Sun May 25 2025
Project Overview — “Notes App from Zero to Hero”
A three-part, hands-on series that starts with a blank prompt and ends with a fully featured, CKEditor-powered, real-time-collaborative notes app (React 18 + Vite + TS).
Part 1 – Build & Deploy the Base App
Video #1: “AI Vibe-Coding a Google-Keep-Style Notes App”
Key takeaways:
- Cursor’s Vibe Coding scaffolds Vite + React + TS in one prompt.
- Adds React Router, GUID utils & LocalStorage CRUD.
- Pushes to GitHub and deploys to Vercel, fixing a lint-break on the way.
Part 2 – Rich-Text & AI Assistant
Video #2: “Turn a Textarea into a CKEditor 5 Powerhouse”
Highlights
- Uses CKEditor Builder to pick premium features (headings, lists, code-block, PDF export, OpenAI Assistant).
- Wraps the generated build in a reusable
<RichText />component. - Two-way binds HTML to LocalStorage and re-deploys to Vercel.
Part 3 – Real-Time Collaboration
Video #3: “From Solo Notes to Live Collaboration”
Code branch `collaboration-features`
What’s new
- Regenerates the editor build with Real-Time Collaboration & Revision History.
- Wires each note’s GUID as
channelId, enabling multi-user rooms. - Simple share-by-URL flow and LocalStorage fallback for guests.
- Live demo with two browsers; notes sync and diff viewer in action.
📌 Next ideas: plug in auth & a remote DB, polish race-conditions, refine user naming.
⭐️ Star / fork the repo & drop feedback on GitHub, or Youtube!