https://talos.tools/assets/vibe-coding-8LeRLAGV.js

1import{j as e}from"./vendor-query-BROoW_jZ.js";import{a as l}from"./vendor-router-DB8Iq42h.js";import{I as w,P as v,R as S}from"./progress-twH-r-A1.js";import{C as n,b as c,d as m,e as p,a as y,B as C}from"./index-DUEDRU2t.js";import{B as u}from"./badge-BKnL-l_B.js";import{S as N}from"./sparkles-F1kFfV3K.js";import{C as k}from"./check-BLcNYg_b.js";import{B as I}from"./book-open-C0II1g6Z.js";import{E as P}from"./external-link-C26BXP6P.js";import{M as D}from"./monitor-play-Bo9268Sd.js";import"./page-head-Dc8X8fDS.js";import"./navigation-header-Jb2V_WLU.js";import"./sponsor-button-BHCF4BzK.js";import"./heart-B4u0HA0q.js";import"./theme-toggle-CYJ0Zdz9.js";import"./sheet-olztuKff.js";import"./index-BjrTZVyX.js";import"./index-BpjTTxnP.js";import"./index-DpcBFuQB.js";import"./menu-Cp2RTqYB.js";import"./use-favorites-B0QNNogk.js";import"./footer-CUPhXF8t.js";import"./target-CAp_oSb-.js";import"./roadmaps-content-CSN33Ue2.js";import"./circle-check-Bk6XpyXj.js";import"./circle-help-DgdU4BsY.js";import"./link-D3xms2eZ.js";import"./vendor-react-CHemKkfq.js";const h={sections:[{step:1,title:"Programming Foundations",duration:"2-4 weeks",badge:"Foundation",description:"Master the basics of logic and JavaScript before diving into frameworks.",items:[{title:"Variables, data types, and operators",completed:!1},{title:"Control flow (if/else, loops)",completed:!1},{title:"Functions and scope",completed:!1},{title:"Arrays and objects",completed:!1},{title:"Basic DOM manipulation",completed:!1}],resources:[{title:"FreeCodeCamp JS Algorithms",url:"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/"},{title:"MDN JavaScript Guide",url:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide"},{title:"JavaScript.info",url:"https://javascript.info/"},{title:"W3 Schools JavaScript Tutorial",url:"https://www.w3schools.com/js/default.asp"}],videos:[{title:"JavaScript Tutorial for Beginners (Mosh)",videoId:"W6NZfCO5SIk"},{title:"JavaScript Full Course (freeCodeCamp)",videoId:"PkZNo7MFNFg"},{title:"Introduction to Programming and Computer Science",videoId:"zOjov-2OZ0E"},{title:"Everything You NEED to Know About WEB APP Architecture",videoId:"sDlCSIDwpDs"}]},{step:2,title:"Modern Web Development",duration:"3-5 weeks",badge:"Core",description:"Learn how the web works and how to style it beautifully.",items:[{title:"HTML5 semantic elements",completed:!1},{title:"CSS Grid and Flexbox",completed:!1},{title:"Responsive design principles",completed:!1},{title:"JS ES6+ (arrow functions, destructuring)",completed:!1},{title:"Fetch API & REST APIs",completed:!1}],resources:[{title:"CSS-Tricks Flexbox Guide",url:"https://css-tricks.com/snippets/css/a-guide-to-flexbox/"},{title:"CSS-Tricks Grid Guide",url:"https://css-tricks.com/snippets/css/complete-guide-grid/"},{title:"MDN HTTP & APIs",url:"https://developer.mozilla.org/en-US/docs/Web/HTTP"}],videos:[{title:"HTML & CSS Full Course (SuperSimpleDev)",videoId:"G3e-cpL7ofc"},{title:"Flexbox CSS in 20 Minutes",videoId:"JJSoEo8JSnc"},{title:"CSS Grid Crash Course (Traversy Media)",videoId:"0xMQfnTU6oo"},{title:"Tailwind CSS V4 Crash Course",videoId:"H_kSd4kn0E8"}]},{step:3,title:"Frontend Frameworks",duration:"4-6 weeks",badge:"React Focus",description:"Build interactive UIs with React and modern state management.",items:[{title:"Component-based architecture",completed:!1},{title:"State management & Props",completed:!1},{title:"Hooks (useState, useEffect)",completed:!1},{title:"Routing and navigation",completed:!1},{title:"Form handling and validation",completed:!1}],resources:[{title:"React Official Docs",url:"https://react.dev/learn"},{title:"Scrimba React Course",url:"https://scrimba.com/learn/learnreact"}],videos:[{title:"React Course - Beginner's Tutorial",videoId:"bMknfKXIFA8"},{title:"React JS 19 Full Course 2025",videoId:"dCLhUialKPQ"}]},{step:4,title:"Backend Development & APIs",duration:"4-6 weeks",badge:"Server Side",description:"Understand how servers work and build your own APIs.",items:[{title:"Node.js and Express fundamentals",completed:!1},{title:"RESTful API design",completed:!1},{title:"HTTP methods and status codes",completed:!1},{title:"Middleware and request handling",completed:!1},{title:"Environment variables",completed:!1}],resources:[{title:"Node.js Docs",url:"https://nodejs.org/en/docs/"},{title:"Express.js Guide",url:"https://expressjs.com/en/guide/routing.html"}],videos:[{title:"Node.js and Express.js Full Course",videoId:"Oe421EPjeBE"},{title:"Node.js Crash Course by Traversy Media",videoId:"32M1al-Y6Ag"}]},{step:5,title:"Databases",duration:"3-5 weeks",badge:"Data Handling",description:"Store and retrieve data persistently.",items:[{title:"Relational vs NoSQL databases",completed:!1},{title:"SQL basics (SELECT, INSERT, etc.)",completed:!1},{title:"Database schema design",completed:!1},{title:"ORMs (Prisma, Mongoose)",completed:!1}],resources:[{title:"SQL Tutorial (W3Schools)",url:"https://www.w3schools.com/sql/"},{title:"Prisma Docs",url:"https://www.prisma.io/docs"}],videos:[{title:"All Databases Fundamentals in 7 Minutes",videoId:"4Hbh9kVvisI"},{title:"SQL Tutorial - Full Course",videoId:"HXV3zeQKqGY"},{title:"Prisma Full Course",videoId:"gimSKEsWYb4"},{title:"Prisma ORM in One Video - Hindi",videoId:"-_nz4q_Cyr4"}]},{step:6,title:"Authentication & Security",duration:"2-4 weeks",badge:"Security",description:"Secure your applications and manage user sessions.",items:[{title:"Auth vs Authorization",completed:!1},{title:"JWT (JSON Web Tokens)",completed:!1},{title:"OAuth 2.0 & Social Login",completed:!1},{title:"Input validation & sanitization",completed:!1}],resources:[{title:"OWASP Top 10",url:"https://owasp.org/www-project-top-ten/"},{title:"JWT.io",url:"https://jwt.io/introduction"}

1],videos:[{title:"Authentication Explained: When to Use Basic, Bearer, OAuth2, JWT & SSO",videoId:"9JPnN1Z_iSY"},{title:"JWT Authentication Tutorial",videoId:"mbsmsi7lO4k"}]},{step:7,title:"System Design Fundamentals",duration:"3-4 weeks",badge:"Architecture",description:"Learn how to scale and structure complex systems.",items:[{title:"Client-server architecture",completed:!1},{title:"Monolithic vs Microservices",completed:!1},{title:"Caching (Redis, CDN)",completed:!1},{title:"Scalability principles",completed:!1}],resources:[{title:"System Design Primer",url:"https://github.com/donnemartin/system-design-primer"}],videos:[{title:"System Design Course (freeCodeCamp)",videoId:"F2FmTdLtb_4"},{title:"8 Most Important System Design Concepts",videoId:"BTjxUS_PylA"}]},{step:8,title:"Architecture Patterns",duration:"3-4 weeks",badge:"Advanced",description:"Write clean, maintainable, and scalable code.",items:[{title:"MVC (Model-View-Controller)",completed:!1},{title:"Repository pattern",completed:!1},{title:"Dependency injection",completed:!1},{title:"Clean architecture principles",completed:!1}],resources:[{title:"Refactoring.guru Design Patterns",url:"https://refactoring.guru/design-patterns"}],videos:[{title:"Design Patterns in Plain English",videoId:"NU_1StN5Tkk"},{title:"Everything You NEED to Know About Architecture Patterns",videoId:"I5c7fBgvkNY"}]},{step:9,title:"Performance & Optimization",duration:"2-3 weeks",badge:"Optimization",description:"Make your apps fast and efficient.",items:[{title:"Code splitting & lazy loading",completed:!1},{title:"Image optimization",completed:!1},{title:"Database indexing",completed:!1},{title:"Frontend performance metrics",completed:!1}],resources:[{title:"Web.dev Performance",url:"https://web.dev/performance/"}],videos:[{title:"Top 7 Ways to 10x Your API Performance",videoId:"zvWKqUiovAM"},{title:"Optimising Code - Computerphile",videoId:"K62EMzueWwA"},{title:"AI-Driven Code Refactoring",videoId:"u8tvVxUOwvY"},{title:"Frontend System Design Essentials",videoId:"Q9zSHpqrHsk"}]},{step:10,title:"Deployment & DevOps Basics",duration:"2-3 weeks",badge:"DevOps",description:"Ship your code to world.",items:[{title:"Git & Version Control",completed:!1},{title:"CI/CD Pipelines",completed:!1},{title:"Docker Containerization",completed:!1},{title:"Cloud Platforms (Vercel, AWS)",completed:!1}],resources:[{title:"Docker Getting Started",url:"https://docs.docker.com/get-started/"}],videos:[{title:"Docker Tutorial for Beginners",videoId:"XQNv0SRB0OM"},{title:"Docker for Beginners - Hindi",videoId:"exmSJpJvIPs"},{title:"Dockploy Crash Course",videoId:"ELkPcuO5ebo"},{title:"Dockploy Crash Course - Hindi/Urdu",videoId:"oGLqeDS1W3Q"}]}]};function re(){const[a,g]=l.useState({}),[b,f]=l.useState(null);l.useEffect(()=>{const t=localStorage.getItem("vibe-coding-progress");t&&g(JSON.parse(t))},[]),l.useEffect(()=>{Object.keys(a).length>0&&localStorage.setItem("vibe-coding-progress",JSON.stringify(a))},[a]);const j=(t,i)=>{const s=`${t}-${i}`;g(r=>{const o={...r,[s]:!r[s]};return localStorage.setItem("vibe-coding-progress",JSON.stringify(o)),o})},d=()=>{let t=0,i=0;return h.sections.forEach((s,r)=>{s.items.forEach(o=>{t++,a[`${r}-${o.title}`]&&i++})}),t===0?0:Math.round(i/t*100)},x=t=>{const i=h.sections[t];let s=i.items.length,r=0;return i.items.forEach(o=>{a[`${t}-${o.title}`]&&r++}),s===0?0:Math.round(r/s*100)};return e.jsxs(w,{title:"Vibe Coding Roadmap",description:"Interactive path to becoming a full-stack developer with modern tools and AI.",pageTitle:"Vibe Coding Roadmap 2026: Learn AI-Assisted Development",pageDescription:"A step-by-step vibe coding roadmap for 2026: prompt-driven development, AI pair programming tools, project structure, and skills to learn in order.",children:[e.jsxs("div",{className:"max-w-6xl mx-auto space-y-8",children:[e.jsx(n,{className:"border-primary/20 bg-primary/5",children:e.jsxs(c,{children:[e.jsxs("div",{className:"flex items-start justify-between",children:[e.jsxs("div",{children:[e.jsxs(m,{className:"text-2xl flex items-center gap-2",children:[e.jsx(N,{className:"h-6 w-6 text-primary"}),"Welcome to Vibe Coding"]}),e.jsx(p,{className:"mt-2 text-base",children:"Vibe Coding is about rapid prototyping, AI-assisted development, and building real things. Use this roadmap to track y

1our journey from beginner to full-stack pro."})]}),e.jsxs("div",{className:"text-right hidden sm:block",children:[e.jsxs("div",{className:"text-2xl font-bold text-primary",children:[d(),"%"]}),e.jsx("div",{className:"text-xs text-muted-foreground uppercase tracking-wider",children:"Total Progress"})]})]}),e.jsxs("div",{className:"sm:hidden mt-4",children:[e.jsxs("div",{className:"flex justify-between text-sm mb-1",children:[e.jsx("span",{children:"Overall Progress"}),e.jsxs("span",{className:"font-bold",children:[d(),"%"]})]}),e.jsx(v,{value:d(),className:"h-2"})]})]})}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 relative",children:[e.jsx("div",{className:"absolute left-1/2 top-0 bottom-0 w-px bg-border hidden md:block -ml-px z-0"}),h.sections.map((t,i)=>e.jsx("div",{className:"relative z-10",children:e.jsxs(n,{className:"h-full flex flex-col hover:border-primary/50 transition-colors",children:[e.jsxs(c,{children:[e.jsxs("div",{className:"flex justify-between items-start mb-2",children:[e.jsx(u,{variant:"outline",className:"mb-2 bg-background text-sm px-3 py-1",children:t.duration}),e.jsx(u,{className:"text-sm px-3 py-1",children:t.badge})]}),e.jsxs(m,{className:"flex items-center gap-3",children:[e.jsx("span",{className:"flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary text-sm font-bold shrink-0",children:t.step}),t.title]}),e.jsx(p,{className:"text-base leading-relaxed",children:t.description}),e.jsxs("div",{className:"mt-4",children:[e.jsxs("div",{className:"flex justify-between text-sm text-muted-foreground mb-1",children:[e.jsx("span",{children:"Progress"}),e.jsxs("span",{children:[x(i),"%"]})]}),e.jsx(v,{value:x(i),className:"h-2"})]})]}),e.jsxs(y,{className:"flex-1 space-y-6",children:[e.jsx("ul",{className:"space-y-3",children:t.items.map((s,r)=>{const o=!!a[`${i}-${s.title}`];return e.jsxs("li",{className:"flex items-start gap-3 group cursor-pointer",onClick:()=>j(i,s.title),children:[e.jsx("div",{className:`mt-0.5 w-6 h-6 rounded border flex items-center justify-center transition-colors shrink-0 ${o?"bg-primary border-primary":"border-muted-foreground/30 group-hover:border-primary"}`,children:o&&e.jsx(k,{className:"h-4 w-4 text-primary-foreground"})}),e.jsx("span",{className:`text-base transition-opacity ${o?"text-muted-foreground line-through opacity-70":""}`,children:s.title})]},r)})}),e.jsxs("div",{className:"pt-4 border-t space-y-4",children:[t.resources&&e.jsxs("div",{children:[e.jsxs("h4",{className:"text-sm font-semibold uppercase text-muted-foreground mb-3 flex items-center gap-1.5",children:[e.jsx(I,{className:"h-4 w-4"})," Reading"]}),e.jsx("div",{className:"flex flex-wrap gap-2",children:t.resources.map((s,r)=>e.jsxs(C,{variant:"ghost",size:"sm",className:"h-9 text-sm px-3 bg-secondary/50 hover:bg-secondary",onClick:()=>window.open(s.url,"_blank"),children:[s.title," ",e.jsx(P,{className:"ml-1.5 h-3.5 w-3.5 opacity-50"})]},r))})]}),t.videos&&e.jsxs("div",{children:[e.jsxs("h4",{className:"text-sm font-semibold uppercase text-muted-foreground mb-3 flex items-center gap-1.5",children:[e.jsx(D,{className:"h-4 w-4"})," Watch"]}),e.jsx("div",{className:"space-y-2",children:t.videos.map((s,r)=>{const o=b===`${i}-${s.videoId}`;return e.jsx("div",{className:"rounded-md border overflow-hidden bg-card",children:o?e.jsxs("div",{className:"w-full",children:[e.jsxs("div",{className:"p-1 bg-black/5 flex justify-between items-center text-xs px-2 border-b",children:[e.jsx("span",{className:"font-medium truncate",children:s.title}),e.jsx("button",{onClick:()=>f(null),className:"text-muted-foreground hover:text-foreground",children:"Close"})]}),e.jsx("div",{className:"aspect-video w-full bg-black",children:e.jsx("iframe",{width:"100%",height:"100%",src:`https://www.youtube-nocookie.com/embed/${s.videoId}?rel=0&modestbranding=1`,title:s.title,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",referrerPolicy:"strict-origin-when-cross-origin",allowFullScreen:!0})})]}):e.jsxs("div",{className:"p-3 flex items-center justify-between cursor-pointer hover:bg-accent/50 transition-colors",onClick:()=>f(o?null:`${i}-${s.videoId}`),children:[e.jsx("span",{className:"text-sm font-medium truncate flex-1 pr-2",children:s.title}),e.jsx(u,{variant:"secondary",className:"text-xs h-6 px-2",children:"Play"})]})},r)})})]})]})]})]})},i))]}),e.jsx(n,{className:"bg-primary/5 border-primary/20",children:e.jsxs(c,{children:[e.jsx(m,{className:"text-xl",children:"Master Modern Full-Stack Development with Vibe Coding"}),e.jsx(p,{className:"text-base leading-relaxed",children:`The Vibe Coding Roadmap is your ultimate guide to mastering full-stack development in 2026. Designed for the modern developer, this curriculum bypasses the fluff and focuses on high-impact skills—from AI-driven coding with Cursor and Copilot to building scalable applications with Next.js, Tailwind CSS, and Supabase. Whether you're a beginner starting with JavaScript or an experienced engineer updating your stack, this interactive path helps you build real-world projects, understand system design, and deploy with confidence. Embrace the "vibe coding" philosophy: rapid prototyping, intuitive problem-solving, and leveraging AI to write better code, faster.`})]})})]}),e.jsx("div",{className:"w-full mt-10",children:e.jsx(S,{slug:"vibe-coding"})})]})}export{re as default};