잠시만 기다려 주세요.
code with lari
2024. 7. 24.
• Get UIKits with 10,000 free mins: https://bit.ly/4d1aSqp • Take Advantage of ZEGOCLOUD: https://bit.ly/4cSiNWI • Top 10 WebRTC API Platforms: https://bit.ly/4dgbjNN • Top 10 Next.js Alternatives: https://bit.ly/3S3vaaE ZEGOCLOUD SDK &API allows you to easily build video call apps/voice call apps/live streaming apps/chat apps in low code within minutes. Welcome to the most comprehensive Next.js course on YouTube! Over the next 11 hours, you'll master building a Signal clone + Google Meet from scratch, using cutting-edge technologies and best practices. This course is perfect for beginners and experienced developers looking to deepen their knowledge of Next.js and full-stack development. Technologies and Tools Covered: Next.js 15 TypeScript Supabase (Storage) Tailwind CSS Shadcn UI Google Auth Zod React Hook Form Pusher JS Zustand Bun react-filepond Course Features: Detailed, step-by-step guidance Timestamps for easy navigation (see below) Discord group for mentorship, questions, and recommendations Access to all SQL scripts used in the course App Features: AUTH CREATE GROUP FRIEND REQUEST DIRECT MESSAGING VIDEO CALL AUDIO CALL SCREEN SHARING LEAVE GROUP DELETE GROUP BLOCK USER GROUP CALL FILE SHARING READ RECEIPT UNREAD MESSAGE COUNT DARK AND LIGHT THEME Middleware in Next.js Advanced practices Let's connect on linkedIn: https://linkedin.com/in/laribright Email: itslaribright@gmail.com Github: https://github.com/laribright/signal-clone (Please give a star 🙏🏽) What You'll Learn: Building a modern, responsive UI with Tailwind CSS and Shadcn UI Implementing secure authentication with Clerk, Managing state with Zustand and React Hook Form, Video and voice calls, Handling file uploads with Supabase Applying advanced Next.js features and middleware No Prior Knowledge Required: This course is designed to be beginner-friendly. I'll guide you through each concept, ensuring you understand everything from the basics to advanced practices. Timestamps: 0:00 - Intro 09:32 - Zegocloud 11:44 - Shadcn UI Setup 20:19 - Layout Build 01:15:52 - Profile Dialog Content / Theming 01:47:51 - Convex Setup / Clerk Auth 02:10:41 - User Signup (Convex - Clerk) 02:33:07 - User Status Convex 02:38:27 - User Status Frontend 02:56:14 - Complete Convex Schema 03:03:07 - Convex Friend Request 04:04:48 - Chat Sidebar UI 04:14:29 - Conversations Convex 04:33:41 - Display Conversations UI 05:01:15 - Create Group Conversation Convex 05:11:31 - New Group UI 05:54:54 - Chat Page 05:57:59 - Convex Create Message Chat 06:30:04 - Chat Page (Chat Header) 06:55:14 - Profile Sheet 07:35:00 - Block Contact Convex 07:40:24 - Block Contact (Profile Sheet) 07:48:48 - Group Sheet (Sidebar) 08:12:09 - Chat Content 08:35:42 - Chat Footer 09:06:15 - Supabase Storage Setup 09:14:10 - Sending PDF / Image Chat 09:42:38 - Sending Audio Message 09:51:02 - Typing chat indicator 10:08:09 - Video Call 10:25:41 - Google Meet Clone 10:48:55 - Landing Page Setup 10:53:38 - Deployment Start Coding: Ready to dive in? Let’s get started and build something amazing together! Fullstack Signal Clone: Next.js 15, Convex, Supabase Storage, Clerk, Zustand, Vercel. #nextjs #convex #supabase #clerk #zustand #vercel #codewithlari
What if your AI Assistant could ENGINEER and SHIP while you THINK! What if your AI Assistant could WORK in parallel to you? 💻 Get Your Assistant (CODEBASE) https://github.com/disler/poc-realtime-ai-assistant 🎥 Featured Media: - Watch Part 1: https://youtu.be/vN0t-kcPOXo - OpenAI Structured Outputs: https://platform.openai.com/docs/guides/structured-outputs/introduction - OpenAI Swarm: https://github.com/openai/swarm - OpenAI Pricing: https://openai.com/api/pricing/ 🔥 Watch as we demo a cutting-edge AI Assistant that's about to revolutionize how engineers work. No typing, just speech to speech interactions - and getting things DONE! In this video, we showcase the power of AI assistants in accelerating information processing and manipulation - the core of software engineering. Watch as we effortlessly: 🚀 Scrape and clean web content 🖥️ Generate and run Python code 📊 Create and modify CSV files 🧠 Utilize active memory for enhanced context Witness firsthand how AI assistants can work in parallel with you, handling tasks while you focus on high-level thinking. We'll explore: 1. The game-changing combination of reasoning models and real-time speech-to-speech APIs 2. The importance of active memory in AI assistants 3. How specialized AI agents can be delegated tasks through natural language This isn't just about automating mundane tasks - it's about supercharging your productivity and creativity as an engineer. Imagine having a tireless assistant that understands context, learns from your work patterns, and executes complex tasks with minimal input. 💡 Key Takeaways: - The future of software engineering lies in parallel processing with AI assistants - Active memory management is crucial for effective AI assistance - Natural language control of specialized AI agents is becoming a reality - This technology is set to dramatically change how we approach building software Whether you're a seasoned developer or just starting out, this video offers a glimpse into the future of software engineering. Don't miss out on this opportunity to stay ahead of the curve! Like, subscribe, and share your thoughts on how AI assistants could revolutionize your workflow. The future of software engineering is here - are you ready? 📖 Chapters 00:00 Show not tell 00:25 AI Assistant Engineering 03:30 Speech to Speech Learning 06:50 File and Data Manipulation 09:33 Engineer's AI Assistant Discussion #aiassistant #aicoding #promptengineering
2024. 10. 14.
Do you want to understand what cookies are? 🔻 Click on SHOW MORE 🔻 In this short class, we will take a technical look at browser cookies and try to understand what they really are and why the internet as we know it today cannot work without cookies. We will also go a bit into the privacy concerns around cookies, and I will show you a way to get rid of all these cookie popups without impacting your privacy. ⭐️ Video contents ⭐️ ⌨️ 00:00 - Lesson 1: Introduction ⌨️ 00:24 - Lesson 2: The need for personalization ⌨️ 02:17 - Lesson 3: When were cookies invented? ⌨️ 03:35 - Lesson 4: Why are cookies called "COOKIES"? ⌨️ 04:14 - Lesson 5: How cookies work ⌨️ 06:17 - Lesson 6: Functional cookies ⌨️ 07:30 - Lesson 7: Cookies as a privacy issue ⌨️ 08:51 - Lesson 8: How does a tracking pixel work? ⌨️ 10:08 - Lesson 9: User identification and tracking with cookies ⌨️ 13:04 - Lesson 10: The end of 3rd party cookies ⌨️ 14:47 - Lesson 11: Browser fingerprinting ⌨️ 15:30 - Lesson 12: Getting rid of cookie banners ⌨️ 16:49 - Lesson 13: Conclusion ⭐️ Assignment 1 ⭐️ The purpose of this assignment is to understand how cookies are being handled by your browser. The examples are using Google Chrome. Getting Started - Watch the explanation given in Lesson 6. Tools needed - Google Chrome browser. Step 1: Open the Developer Tools in your browser. Step 2: Open this website: https://cookie-tracking.glitch.me/ (may take a minute to load) Step 3: Inspect the first request being sent. Notice the Set-Cookie header in the HTTP response. Step 4: Reload the page and inspect the second request being sent. Notice the Cookie header in the HTTP request. Step 5: Make two screenshots of your browser Developer Tools showing the Set-Cookie and Cookie header. Step 6: Delete the cookie using the Developer Tools. ⭐️ Assignment 2 ⭐️ The purpose of this assignment is to understand how a tracking pixel works. Getting Started - Watch the explanation given in Lesson 8. Step 1: Open the Developer Tools in your browser. Step 2: Open this website: https://cookie-tracking.glitch.me/ and delete the cookies. Step 3: Open this website: https://new-cookie-times.glitch.me/ Step 4: Go back to the https://cookie-tracking.glitch.me/ and notice how you are being recognized as a returning visitor. Step 5: Inspect the request to the tracking website that is being sent in the background. ⭐️ 📩 Contact & Imprint ⭐️ 👉 Follow me on Twitter: https://twitter.com/vdespa 👉 Follow me on Medium: https://vdespa.medium.com/ 👉 Follow me on Facebook: https://www.facebook.com/Valentin-Despa-113038143438826 👉 Let's connect on LinkedIn: https://www.linkedin.com/in/vdespa/ http://vdespa.com/imprint
2023. 1. 5.
In this video, I'll take you through 12 different demos that will unlock 12 concepts about flexbox that you might not have known about. By the end of the video, my mission is to help you start to understand flexbox so well that it becomes a tool you reach for often instead of one that you get frustrated with. Here’s what you’ll see in this video: 0:00 - Introduction 0:32 - Demo 1 1:19 - Demo 2 2:14 - Demo 3 3:28 - Demo 4 4:11 - Demo 5 4:53 - Demo 6 5:35 - Demo 7 5:55 - Demo 8 7:18 - Demo 9 7:55 - Demo 10 8:23 - Demo 11 8:58 - Demo 12 Hi! I’m Josh. On the Frontend Tribe channel, you will find videos to help you learn frontend development concepts. My mission is to help 10,000 people learn to code to get a great job, gain more freedom and change their life. #CSS #flexbox #frontenddevelopment #frontend Thank you for watching! 🙂
2024. 4. 13.
React real-time chat application using Firebase. React chat app project. Get Hostinger Discount: https://hostinger.com/lamadev Coupon Code: LAMADEV Join the upcoming React Master Course waitlist: https://list.lama.dev If it is valuable to you, you can support Lama Dev. Join: https://www.youtube.com/channel/UCOxWrX5MIdXIeRNaXC3sqIg/join Buy me a coffee: https://www.buymeacoffee.com/lamadev Join Lama Dev groups X / Twitter: [https://x.com/lamawebdev](https://twitter.com/lamawebdev) Facebook: https://www.facebook.com/groups/lamadev Instagram: https://www.instagram.com/lamawebdev Discord: https://discord.gg/yKremu4mPr Source Code: https://github.com/safak/react-firebase-chat VPS Deployment Commands: https://github.com/safak/youtube/tree/mern-deployment 00:00 Introduction 03:01 Installation 05:28 Chat App Database Structure 10:15 React Chat Application Design Tutorial 12:35 CSS Glass Background Effect 14:01 Chat App Components 18:15 Chat List Design 22:06 React Search Bar Design 27:23 User List Design 31:07 React Chat Component Design 33:38 React.js How to Add Emoji? (React Emoji Picker) 45:32 Chat Messages Design 50:45 Chat Detail Component Design 01:00:36 React Auto-Scroll using useRef Hook 01:03:50 React Login Page Design 01:14:20 React Notification Library (React Toastify) 01:17:25 Add New User Component 01:23:58 React Firebase Tutorial 2024 01:26:30 React Firebase Authentication Tutorial 01:31:55 React Firebase Sign Up with Email and Password 01:33:41 React Firebase How to Add the User Data to Firestore After the Authentication? 01:38:19 React Firebase How to Upload Image? 01:47:12 React Firebase Login (Sign in) with Email and Password 01:49:00 React Firebase How to Store the User After the Authentication? 01:51:30 React Why Do We Need State Management Tools? 01:56:07 React Firebase Auth with Zustand State Management Tool 02:05:44 React Firebase Fetching Real-time Data 02:07:30 Fetch User Chats from Firestore 02:14:14 React Search a User from Firebase Firestore 02:18:44 Create a New Chat in React 02:26:22 Fetch a Single Chat and Chat Messages 02:28:00 React Zustand Chat Store 02:38:42 Add a New Chat Message 02:50:44 Add an Image to the Chat Message 02:55:58 How to Block / Unblock User? 03:03:00 React Search Filter Tutorial 03:05:04 How to Deploy a React App to a VPS in 5 Minutes? 03:14:46 Outro
2024. 4. 10.
Explain how to properly refactor your legacy Junior React code to follow clean-code SOLID principles. We'll go through an old Button component I wrote back in 2020 that was very ugly and bad. 🎉Our Newsletter is live! Join thousands of other developers https://islemmaboud.com/join-newsletter ⭐ Timestamps ⭐ 00:00 Intro 01:39 Understanding our old code 05:17 Refactoring code 06:37 Refactoring component logic 14:02 From vanilla CSS to Tailwind 28:33 Cleaning up props 30:05 New component demo 🎥 Watch This is the Only Right Way to Write React clean-code - SOLID https://youtu.be/MSq_DCRxOxw -- Special Links ✨ Join Figma for Free and start designing now! https://psxid.figma.com/69wr7zzb1mxm 👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨ https://psxid.figma.com/ucwkx28d18fo-cb44ct ⚡️ S.O.L.I.D Principles implementation in React ✨ https://github.com/ipenywis/react-solid 📕S.O.L.I.D blogs get a better grasp on the principles https://medium.com/backticks-tildes/the-s-o-l-i-d-principles-in-pictures-b34ce2f1e898 -- Special Links ✨ Join Figma for Free and start designing now! https://psxid.figma.com/69wr7zzb1mxm 👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨ https://psxid.figma.com/ucwkx28d18fo-cb44ct -- Watch More Videos 🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize https://youtu.be/VWEJ-GhjU4U 🧭 Turn Design into React Code | From prototype to Full website in no time https://youtu.be/0xhu_vgKZ8k 🧭 Watch Tutorial on Designing the website on Figma https://youtu.be/SB3rt-cQZas 🧭 Watch Create a Modern React Login/Register Form with smooth Animations https://youtu.be/-bll7l-BKQI 🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools https://youtu.be/_rnxOD9NKAs 🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React https://youtu.be/M_Oes39FNuk 🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app https://youtu.be/_rnxOD9NKAs 🧭 Introduction to GraphQL with Apollo and React https://youtu.be/eCO6MvvRhXk 🐦 Follow me on Twitter: https://twitter.com/ipenywis 💻 Github Profile: https://github.com/ipenywis Made with 💗 by Coderone
2024. 5. 12.
Join this channel to get access to perks: https://www.youtube.com/@AICodeKing/join In this video, I'll be talking about Omni Engineer. Omni Engineer is an AI Coding Agent or Text-To-Application tool that is super easy to use. It can generate code with Claude-3.5-Sonnet, Gemini, OpenAI, Ollama and Any other Model and it can also generate whole NextJS, Python and other applications within seconds. It's very similar to Aider but it's better than that. I'll be generating some simple applications but you can also use it to generate Games, Applications, Web Applications, Websites, Frontend, Backend and multiple other things. You can also do Text-To-Frontend, Text-To-Application, Text-To-Game and other things with this. Omni Engineer can also be used with any opensource LLM, OpenAI models or the other Claude models such as GPT-4O, Claude-3, CodeQwen, Mixtral 8x22b, Mixtral 8x7b, GPT-4, Grok-1.5 & Gemini Code Assist. ------ Resources: Omni Engineer Github Repo : https://github.com/Doriandarko/omni-engineer ---- Key Takeaways: 🔧 Meet Omni Engineer: The latest AI tool from the developer of Claude Engineer and Ollama Engineer, Omni Engineer offers enhanced control and flexibility for developers looking to code with a powerful assistant. 🌐 Supports Multiple Models: Omni Engineer seamlessly integrates with various AI models via OpenRouter, including options for using OpenAI and Ollama, making it versatile for different coding projects. ⚙️ Enhanced Features: With features like multi-file editing, save/resume chat functions, and undo capabilities, Omni Engineer brings a new level of efficiency to your coding workflow. 📂 File Management & More: Whether it's managing files, web searching, or processing images, Omni Engineer is equipped with the tools you need to streamline your development process. 🧠 Inspired by Aider: Drawing inspiration from Aider, Omni Engineer is designed for developers who prefer a hands-on approach, offering simplicity while maintaining powerful automation features. 💻 User-Friendly Interface: The UI is familiar yet refined, ensuring that you can dive into your projects with minimal setup and maximum productivity. 🎮 Fun to Experiment: From creating games like Minesweeper to editing UI elements, Omni Engineer makes it easy and fun to experiment with your coding ideas. ----- Timestamps: 00:00 - Introduction 00:14 - About Omni Engineer 02:06 - Installation & Usage 07:53 - Ending
2024. 8. 14.