STOP Struggling with Code - GitHub Copilot LIVE CODING!
IKcode Igor Wnek
0:00 / 0:00
STOP Struggling with Code - GitHub Copilot LIVE CODING!
593 просмотра · 1 г. назад
IKcode Igor Wnek
288 подписчиков
593 просмотра · 1 г. назад
Live Vibe Coding Session: Build a “Tick-Tock” app with GitHub Copilot and AI-Powered Prompts — watch me transform natural language into a working React 19 app (with mocked API calls!) in just 1h 12 min!
What you’ll learn:
• How to set up GitHub Copilot with custom instruction files for React 19 and Node.js
• Best practices for “vibe coding”—writing plain-English prompts to generate UI components and API mocks
• Step-by-step live coding: adding entire new feature to the very-early stage application like time-logging form, and MSW mocks
• Real-world debugging and iterative feature enhancements using Copilot’s agentic mode
Resources:
• GitHub repository (frontend): https://github.com/IgorWnek/tick-tock...
• in this repository you'll find examples of Copilot's Instructions, Prompts and MCP servers configurations
• GitHub repository (backend): https://github.com/IgorWnek/tick-tock...
VS Code Links:
Curated list of the MCP servers: https://code.visualstudio.com/mcp
Docs about customisation of AI Copilot's responses:: https://code.visualstudio.com/docs/co...
How to add MCP servers to your VS Code: https://code.visualstudio.com/docs/co...
💬 Drop your questions below—what features should we tackle next? I read every comment and often turn your ideas into new videos!
👍 Like if you learned a new Copilot trick, and subscribe for vibe coding sessions and insights.
Timestamps:
00:00 Intro: vibe coding with GitHub Copilot and session plan
01:28 Project: Tick‑Tock app for natural‑language Jira time logging
06:19 Repos + upgrades: React 19 frontend, Express 5.1 backend via Copilot
11:40 Copilot setup: instruction files, Prettier/ESLint, prompts
16:52 Models + mode: Claude Sonnet 4, Gemini 2.5 Pro, agentic mode only
18:20 Tooling: MCP servers (Sequential Thinking, Memory, Context, UI)
20:15 Live coding kickoff: “implement next task” prompt workflow
27:35 First UI pass: Log Today’s Work + examples; quick bug + fix (overlay)
34:36 MSW/mocks + env fix: get mocked data and parsing working
39:25 UX improvement: link/navigation to specific day view
45:26 Follow‑up task: date‑aware time logging (routing/state/MSW)
49:15 Wrap‑up: what shipped, learnings, CTA for issues/PRs