Скачать или смотреть AI Vibe-Coding a Google-Keep-Style Notes App | Vite + React + TypeScript → Deploy on Vercel

🚀 Build & ship a notes app—end-to-end—in one sitting!

In this video I fire up *Vibe Coding* inside Cursor to generate a Google-Keep-inspired notes app
(with Vite, React, TypeScript & browser local storage), tidies up the AI output, then deploy it live to Vercel.

🗂️ Source code (state after the video with tidied README)
↳ https://github.com/Simply007/ondrejs-...

👀 Live demo – Vercel URL is revealed at 13:35 in the video.

🆕 Latest version oo the rpository
↳ https://github.com/Simply007/ondrejs-...

────────────────────
🔑 What you’ll learn
• Crafting an effective AI prompt for “Vibe Coding”
• How Cursor’s LLM scaffolds a Vite + React + TS project
• Adding React Router, data types & browser-local storage
• Quick CSS tweaks to mimic Google Keep tiles
• Debugging AI slip-ups (typos, unused imports, wrong color)
• Verifying persistence in DevTools LocalStorage
• Initialising Git, pushing to GitHub & linking to Vercel
• Using Vercel’s build logs to catch linter breaks
• Pro-tips for clean commits & .gitignore

────────────────────
⏱️ Chapters
00:00 Intro – goals & tools
00:26 The prompt (Vite + React + Google Keep UI)
01:30 AI generates template & installs deps
02:30 Adds React Router (listing/detail)
03:15 Data model & GUID utils
04:05 Google-Keep-style CSS
04:50 First run; mark textarea for future CKEditor
05:45 Types vs interfaces fix
06:40 Colour & UI touch-ups
07:30 CRUD test + LocalStorage inspection
09:00 Init Git & first commit
10:10 Push to GitHub
11:10 Connect repo → Vercel project
11:50 Build fails (unused imports) → quick lint fix
12:40 Re-deploy & success!
13:35 Public URL shown
14:00 Outro & next steps (CKEditor integration)

────────────────────
🛠️ Stack & tooling
• *Vite + React 18 + TypeScript*
• React Router DOM
• LocalStorage for persistence
• Cursor IDE “Vibe Coding” AI
• Git + GitHub
• *Vercel* for CI/CD & hosting

────────────────────
👍 Like what you saw?

Next video: integrating *CKEditor* (rich-text & collaboration) → check the channel playlist.
↳    • CKEditor: From Zero to Hero  

#Vite #React #TypeScript #AICoding #Vercel #VibeCoding #GoogleKeepClone #DevTutorial #devrel