μ μλ§ κΈ°λ€λ € μ£ΌμΈμ.
Code With Antonio
2023. 12. 12.
Github & Additional Content: https://www.codewithantonio.com/projects/twitch-clone PART 1 https://youtu.be/a02JAryRPVU?si=WjpXB_oThWNObQgz Clerk: https://dub.sh/UyH5Jb2 LiveKit: https://livekit.io/ Ngrok: https://ngrok.com/download Nodejs: https://nodejs.org/en Hi all π In this free 14 hour tutorial you are going to learn how to build a Twitch Clone using Next 14. We are going to start with the basics like configuring Next.js, learning the routing concepts, and then slowly go deeper into setting up authentication, database, local tunnels, webhooks, all the way to generating RTMP and WHIP connections to connect to our OBS streaming software. Key Features: - π‘ Streaming using RTMP / WHIP protocols - π Generating ingress - π Connecting Next.js app to OBS / Your favorite streaming software - π Authentication - πΈ Thumbnail upload - π Live viewer count - π¦ Live statuses - π¬ Real-time chat using sockets - π¨ Unique color for each viewer in chat - π₯ Following system - π« Blocking system - π’ Kicking participants from a stream in real-time - ποΈ Streamer / Creator Dashboard - π’ Slow chat mode - π Followers only chat mode - π΄ Enable / Disable chat - π½ Collapsible layout (hide sidebars, chat etc, theatre mode etc.) - π Sidebar following & recommendations tab - π Home page recommending streams, sorted by live first - π Search results page with a different layout - π Syncing user information to our DB using Webhooks - π‘ Syncing live status information to our DB using Webhooks - π€ Community tab - π¨ Beautiful design - β‘ Blazing fast application - π SSR (Server-Side Rendering) - πΊοΈ Grouped routes & layouts - ποΈ MySQL - π Deployment Timestamps 00:00 Intro & Demo 00:11 Additional content 00:45 Key settings 22:32 Ingress 47:09 OBS crash course 53:45 Livekit webhook 01:10:20 Viewer token 01:34:14 Video component 02:14:27 Chat component 03:01:16 Community component 03:29:14 Header component 03:53:08 Info card 04:35:21 About card 04:57:16 User page 05:18:52 Home page 05:46:28 Search page 06:14:57 Unblock page 06:46:00 Deployment
π Access the completed project with an additional deep-dive, db setup, auth setup, and more here: https://www.skool.com/ai-developer-accelerator-pro/about π€ Download the Source Code from the video here: https://brandonhancock.io/ai-code-stack π Need help with CrewAI, join our FREE Skool Community: https://skool.com/ai-developer-accelerator/about π£ New Premium Fullstack AI Course: By the way, I just launched my new Fullstack AI Marketing Platform course! Itβs all about building real-world AI apps that automate marketing workflows for creators using NextJS, Vercel AI SDK, and more. The course also comes with live group support every Sunday between now and the middle of November! https://www.skool.com/ai-developer-accelerator/classroom In this video, I guide you through using V0, Cursor, and Claw to rapidly develop Next.js applications. You'll learn my three-step process to go from idea to app in no time, perfect for AI developers launching startups or freelancers landing more clients. This tech stack helps you deliver solutions 10x faster, enabling quicker feedback and better app development. I'll walk you through each phase, from brainstorming with Claw to stubbing out UIs with V0, and finally adding functionality with Cursor. By the end, you'll be able to create a fully functional AI-powered application with minimal coding! Don't forget to Like and Subscribe if you're a fan and want to see more AI content π π° Stay updated with my latest projects and insights: LinkedIn: https://www.linkedin.com/in/brandon-hancock-ai/ Twitter: https://twitter.com/bhancock_ai Checkout my other tutorials: LangChain Tutorial - https://youtu.be/yF9kGESAi3M CrewAI Tutorial: Complete Crash Course for Beginners - https://youtu.be/sPzc6hMg7So CrewAI Tutorial for Beginners: Learn How To Use Latest CrewAI Features - https://youtu.be/Jl6BuoXcZPE How To Connect Llama3 to CrewAI [Groq + Ollama] - https://youtu.be/02cdCd43Ccc Timestamps: 00:00:00 Introduction 00:00:52 3 Step Process Overview 00:03:35 Phase 1 - Brain Dump w/ Claude 00:11:35 Phase 2 - Stub out (Claude + v0) 00:42:58 Phase 3 - Add Functionality (Cursor + v0) - List View 00:57:47 Phase 3 - Detail View - Chat Component 01:02:42 Phase 3 - Detail View - Chat AI Route + Tool calling 01:18:24 Phase 3 - Detail View - Offer State Management 01:45:07 App Running + Crash Course Overview 01:47:02 Outro
2024. 10. 10.
Link to code: https://github.com/webdevcody/meme-generator Signup for ImageKitβs forever free plan: https://bit.ly/49zmXkt ImageKit Documentation: https://bit.ly/3VXRK7u --- 00:00:00 Introduction 00:03:57 Initial Setup 00:06:02 Uploading Image 00:07:04 Transformations 00:10:05 Next.js SDK 00:14:14 Uploading Files 00:19:03 ShadCN 00:23:54 Search Bar 00:26:21 Node SDK 00:32:46 Meme Cards 00:35:26 Theme Toggle 00:38:23 Responsive Design 00:41:46 Custom Metadata 00:44:03 Upload Dialog 00:57:12 Image Tags 01:02:12 Customize Page 01:11:14 Position Overlays 01:16:16 Customize Component 01:23:44 Append Overlay 01:27:50 Text Background 01:43:37 Debounce 01:45:31 Image Filters 01:53:14 Download Button 01:59:35 Drizzle ORM 02:02:30 Auth.js 02:07:37 Google Auth Setup 02:12:20 Favoriting Memes 02:24:25 Favorites Page 02:40:30 Authorization Checks 02:44:24 Favorite Counts 02:56:16 Clean up 02:57:13 Other Imagekit Features --- Become a YT Members to get extra perks! https://www.youtube.com/@WebDevCody/join My Products π Scary Story Generator: https://scarystorygenerator.com ποΈ WDC StarterKit: https://wdcstarterkit.com π ProjectPlannerAI: https://projectplannerai.com π€ IconGeneratorAI: https://icongeneratorai.com Useful Links π¬ Discord: https://discord.gg/4kGbBaa π Newsletter: https://newsletter.webdevcody.com/ π GitHub: https://github.com/webdevcody πΊ Twitch: https://www.twitch.tv/webdevcody π€ Website: https://webdevcody.com π¦ Twitter: https://twitter.com/webdevcody
2024. 9. 20.
Learn the simplest way to fetch data in Next.js with this easy-to-follow tutorial. Next video to watch: https://www.youtube.com/watch?v=BfQZ-nTcCKc&ab_channel=OrcDev βοΈ Join The Horde - Newsletter: https://www.orcdev.com/newsletter - Discord: https://discord.com/invite/uFB5YzH9YG - Github: https://github.com/TheOrcDev Some of the projects to check: Connector: https://github.com/TheOrcDev/orcish-openai-connector AI Framework: https://github.com/TheOrcDev/orcish-ai-nextjs-framework Orcish Admin: https://github.com/TheOrcDev/orcish-admin My first SaaS project, register and get 5 free tokens! https://www.textualgames.com/ #webdevelopment #orcdev #fetch #react #nextjs #typescript
2024. 9. 6.
κ°λ° μ 무λ₯Ό νλ©΄μ κ°μ§κ² λλ μ¬λ¬ λ Ένμ°μ μμ λ§μ μ€ν¬μ κ°μ§κ³ μ± λ μ°κ³ κ°μλ λ§λ€κ³ λ©ν λ§λ νκ³ λ€μν μ¬μ΄λ μ‘μ κ°μ§ μ μλ΅λλ€. κ·Έλ¬κΈ° μν΄μλ μ¬λ¬ μλλ₯Ό ν΄λ΄μΌνμ£ μ΄λ² μμμμλ μΈκ°μ λν μ΄μΌκΈ°λ₯Ό ν΄λ립λλ€. ν¨μΊ , μΈνλ° κ°μλ₯Ό μμ νλ μ΄μΌκΈ°μ 컨ν μΈ λ₯Ό λ§λ€κΈ° μν΄ ν΄λ³΄μ€ μ μλ λ°©λ²μ μκ°ν΄λ립λλ€. #μμ’ μ€ #κ°λ°μ #μ¬μ΄λμ‘ #ν¨μΊ μΈκ° #μΈνλ°κ°μ #κ°λ°μNμ‘λ¬
2024. 10. 3.
μλ νμΈμ μ¬λ¬λΆ, 컀리μ΄ν΄μ»€ μλ μ€μ λλ€! μ΄λ² μμμμλ μΈκ³΅μ§λ₯μΌλ‘ μνκ°μ CG μμ λ§λλ λ² μμΈνκ² μλ €λλ¦¬κ² μ΅λλ€! μ¬μ©ν μΈκ³΅μ§λ₯ λꡬλ€: - μ΄λ―Έμ§ μ μ: Midjourney (https://midjourney.com/) - μμ μ μ: Runway Gen-3 (https://runwayml.com/) - μμ μ μ: Suno (https://suno.com/) - MJ Prompt Generator GPTs: https://chatgpt.com/g/g-tc0eHXdgb-romidjourneyro-mj-prompt-generator-v6 π» 컀리μ΄ν΄μ»€ μλ μ€μ 2500λ§ μ§μ₯μΈλ€μ μν μ±GPT κ°μ: https://bit.ly/3U3iulH π 컀리μ΄ν΄μ»€ μΉμ¬μ΄νΈ: https://www.careerhackeralex.com π₯ 컀리μ΄ν΄μ»€ λμ€μ½λ: https://discord.gg/Kp3SUkttKt πΌ 컀리μ΄ν΄μ»€ μλ μ€ λ§ν¬λμΈ: https://www.linkedin.com/in/alexsanghyeonahn/ π· 컀리μ΄ν΄μ»€ μλ μ€ μΈμ€νκ·Έλ¨: https://www.instagram.com/careerhackeralex/ π§ 컀리μ΄ν΄μ»€ μλ μ€ μ΄λ©μΌ: careerhackeralex@gmail.com π 컀리μ΄ν΄μ»€ μλ μ€ ν둬ννΈ μμ±κΈ°: https://chat.openai.com/g/g-yrFEX3EHs-keorieohaekeo-peurompeuteu-saengseonggi-v2-0 #μΈκ³΅μ§λ₯ #μμ #CG #μν 0:00 - μΈνΈλ‘ 1:03- AI μ΄λ―Έμ§ μμ± λꡬ μκ° 4:23 - Midjourneyλ‘ μ΄λ―Έμ§ λ§λ€κΈ° 10:05 - ChatGPTλ₯Ό μ΄μ©ν λ―Έλμ λ ν둬ννΈ μμ± 14:30 - μ΄λ―Έμ§λ‘ λΉλμ€ μμ±νκΈ° 19:10 - Runway Gen-3 μκ° 23:35 - Runway Gen-3 λ‘ λΉλμ€ λ§λ€κΈ° 28:16 - AI μμ μμ± λꡬ μκ° 30:45 - Suno λ‘ λ°°κ²½ μμ λ§λ€κΈ° 35:00 - CapCut μμ λΉλμ€μ μμ ν©μΉκΈ° 38:45 - μ΅μ’ λΉλμ€ μμ° λ° λ¦¬λ·° 40:15 - μ½ν μΈ μ μμ λν΄μ
2024. 8. 23.
π₯ κ°λ°μ μ·¨μ λ Ένμ° ν νλ¦Ώ λ€μ΄λ‘λ : https://bit.ly/4a10f5N λ¬Έκ³Όμμ μν IT μ©μ΄ ν΄μ€ λ¬΄λ£ κ°μ : https://bit.ly/3UdCkdL ChatGPTλ‘ λ Έμ½λ μΉμ¬μ΄νΈ λ§λ€κΈ° : https://bit.ly/3vuiEs7 κ°λ°μμ νμ μ μν κΈ°μ΄ μ½λ© μ©μ΄ : https://bit.ly/3tDdzNI μ·¨μ , μ΄μ§μ μ€λΉνμλ λΆλ€μ μν λ λ§μ μ 보λ μλλ₯Ό μ°Έμ‘°ν΄μ£ΌμΈμ. 2024λ λ΄μΌλ°°μμΉ΄λ λ°κΈ, μ¬μ©λ°©λ² : https://bit.ly/3vCX2tV λΆνΈμΊ ν μ νμ κΌ μ²΄ν¬ν΄μΌ ν 5κ°μ§ : https://bit.ly/4aFdKZA λΆνΈμΊ νλ 9to9μ μ νν΄μΌ νλ μ΄μ : https://bit.ly/3vnSfMH λλ₯Ό λͺ°μ νκ² λ§λλ λΆνΈμΊ νκ° μ€μν μ΄μ : https://bit.ly/4aGmIWv νμ§μκ° λ§νλ AI μλμ κ°μΆ°μΌ νλ μ΄μ : https://bit.ly/3HcZae9 λΉμ 곡μμ λ€μν μ΄μΌκΈ°λ€ μ격 λΆνΈμΊ νλ‘ κΈμ΅κΆ IT ν©κ²©νμ΄μ! : https://bit.ly/3NMqZOn μμ μ¬μ νλ€κ° κ°λ°μλ‘ μ ν₯νμ΄μ! : https://bit.ly/3S35V8P λ κΆκΈνμ κ²λ€μ λκΈλ‘ λ¨κ²¨μ£ΌμΈμ! μμμ΄λ λΈλ‘κ·Έλ₯Ό ν΅ν΄ κ°μ₯ μ΅μ μ λ³΄λ‘ μλ €λλ¦¬κ² μ΅λλ€. κ°μ¬ν©λλ€.
2024. 10. 8.