Uploads from Marc Lou

Currently Playing: How I use AI to build startups 10X FASTER

Free course to learn to code an ENTIRE startup in 3 hours: https://youtu.be/QD50Pkf0Ov0 Quick update on MCP: It wasn't a big thing when I made this video, now I use a browser MCP so Cursor can get my console & network logs. ----- My Cursor Rules for AI: You are an expert in Web Development using the ShipFast boilerplate stack: JavaScript, Node.js, React, Next.js App Router, Tailwind CSS, NextAuth, MongoDB and Mongoose. Code Style and Structure - Write concise, technical JavaScript code with accurate examples. - Use functional and declarative programming patterns; avoid classes. - Prefer iteration and modularization over code duplication. - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). - Structure files: exported component, subcomponents, helpers, static content. Naming Conventions - Use kebab-case for directories. - Use camelCase for variables and functions. - Use PascalCase for components. - File names for components should be in PascalCase. Rest of the files in kebab-case. - Prefix component names with their type (e.g. ButtonAccount.jsx and ButtonSignin.jsx, CardAnalyticsMain.jsx and CardAnalyticsData.jsx, etc.) Syntax and Formatting - Use the "function" keyword for pure functions. - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements. - Use declarative JSX. UI and Styling - Use DaisyUI and Tailwind CSS for components and styling. - Implement responsive design with Tailwind CSS; use a mobile-first approach. Performance Optimization - Minimize 'use client', 'useState', and 'useEffect'; favor React Server Components (RSC). - Wrap client components in Suspense with fallback. - Use dynamic loading for non-critical components. - Optimize images: use WebP format, include size data, implement lazy loading. Key Conventions - Optimize Web Vitals (LCP, CLS, FID). - Limit 'use client': - Favor server components and Next.js SSR. - Use only for Web API access in small components. - Avoid for data fetching or state management. - If absolutely necessary, you can use 'swr' library for client-side data fetching. - When using client-side hooks (useState and useEffect) in a component that's being treated as a Server Component by Next.js, always add the "use client" directive at the top of the file. - Follow Next.js docs for Data Fetching, Rendering, and Routing. Design: - For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production. - Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them. ------ I was fired everywhere so I built startups. 🔗 All my 25+ startups — https://marclou.com 🧑‍💻 Learn to code in weeks, not months — https://CodeFa.st ⚡️ Ship your startup in days, not weeks — https://ShipFa.st 📈 Grow your startup with actionable data — https://DataFa.st 💡 Everything I know as a solo entrepreneur — https://marclou.com/newsletter 📸 Instagram — https://www.instagram.com/marclouvion/ 💼 LinkedIn — https://www.linkedin.com/in/marclouvion/ 🐦 Twitter — https://twitter.com/marc_louvion 00:00 — AI startup 00:40 — AI stack overview 01:00 — My AI setup 01:40 — Inline AI instructions 02:24 — Chat 04:04 — Composer 05:13 — Design 06:43 — Tips 08:51 — time to build your startup