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”
YouTube ► https://youtu.be/V02w3CK8KG4
Code snapshot ► notes-template https://github.com/Simply007/ondrejs-notes/tree/notes-template
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”
YouTube ► https://youtu.be/LAGl6orIGRw
Code snapshot ► ck-editor https://github.com/Simply007/ondrejs-notes/tree/ck-editor
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”
YouTube ► https://youtu.be/qn4FthLFvK4
Code snapshot ► collab-features https://github.com/Simply007/ondrejs-notes/tree/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!