How I vibe code

👉 Encore for separate backend app (paid sponsorship): https://encore.dev/
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more https://bit.ly/3QOe1Bh
👉 Work with me: support@bytegrad.com

👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: https://bytegrad.com/courses/professional-css

👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com
👉 Email newsletter (BIG update soon): https://email.bytegrad.com
👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 Intro
00:29 AI code editors (Cursor / VS Code + Copilot / Windsurf)
00:52 AI prototyping (v0 / bolt.new / lovable)
01:48 Main web framework (Next.js)
01:57 Separate backend app (Encore)
02:56 PRD (Product Requirements Document)
05:44 Create Next.js app
08:06 Agent mode
09:20 AI models auto-select
10:01 Add image
10:15 Context
11:30 Cursor rules (MDC-files)
16:10 Repo for Cursor rules
17:34 Folder structure
20:00 Best practice #1
23:02 MCP-servers
24:38 Best practice #2
25:51 Encore for backend app - cron job, API, database
27:28 Encore Cursor rules
28:18 Frontend / Backend folder structure
29:08 Encore app create
30:58 API endpoint
31:50 Database
33:58 Test API endpoint
35:40 Get data in Next.js from other backend app
37:47 Cron job (every 24 hours)
41:47 Deployment

#webdevelopment #reactjs #nextjs

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 and KRS-number: 0001125554 .
.
TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)

ByteGrad

The post discusses a tutorial on building a daily joke app using AI code editors. It highlights the tools like Cursor, Visual Studio Code, and Windsurf, and explains the workflow for creating an app from scratch. Best practices, pitfalls to avoid, and the benefits of using AI in coding are emphasized. The tutorial also covers setting up backend services with Encore, implementing chron jobs, and managing database interactions seamlessly.

AI Vibe Coding Tutorial + Workflow (Cursor, Best Practices, PRD, Rules, MCP)

Just for all vibe coders out there you need to realize one thing - current developers with real skills use AI too. And it increases our productivity like crazy. Plus we DO understand the code we make. If anyone thinks they can compete with “ignorant vibing instead of strict typing” - good luck.

“If you don’t want to learn to go beyond vibe coding, maybe coding isn’t for you. Because positions where all work can be done by vibe coding are the ones that will be eliminated first when AI becomes more powerful.”
“when an AI agent can’t figure it out, will your reply to your boss be: sorry, Cursor doesn’t get it, will prompt more tomorrow?”
“And remember: if you cannot code without AI, you cannot code.”

My opinion is that AI is a tool. If you know how to code you should know how to use it for your better productivity.