Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)
Code With Antonio
2024. 1. 29.
⭐️ Source Code & More: https://www.codewithantonio.com/projects/miro-clone 💬 Discord & Help: https://www.codewithantonio.com/discord Clerk: https://dub.sh/mz7fwfW Convex: https://convex.dev/c/cwa Liveblocks: https://liveblocks.io/ Logoipsum: https://logoipsum.com/ Sally 3D illustrations: https://www.figma.com/community/file/890095002328610853/saly-3d-illustration-pack In this 10 hour tutorial, you will learn how to create your very own Miro clone - A collaborative, real-time whiteboard. Packed with features such as real-time database, whiteboard from scratch with ability to add shapes like Rectangles and Ellipses, Sticky notes and Pencil drawing. Using the newest technologies such as Next.js. 14, Clerk, Convex and LiveBlocks. Key Features: - 🛠️ Whiteboard from scratch - 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil - 🪄 Layering functionality - 🎨 Coloring system - ↩️ Undo & Redo functionality - ⌨️ Keyboard shortcuts - 🤝 Real-time collaboration - 💾 Real-time database - 🔐 Auth, organisations and invites - ⭐️ Favoriting functionality - 🌐 Next.js 14 framework - 💅 TailwindCSS & ShadcnUI styling Timestamps 00:00 Intro & Demo 03:42 Additional information 04:07 Project setup 12:33 Project structure 30:41 Convex & Clerk 56:51 Dashboard layout 01:10:25 Sidebar 01:35:01 Organization Sidebar 01:49:49 Navbar 02:04:04 Empty States 02:23:22 Create Mutation 02:41:57 Board List 03:14:28 Card Actions 03:55:36 Favoriting Functionality 04:18:12 Search Querying 04:31:52 Canvas Layout 04:42:50 Liveblocks setup 05:00:13 Room Authentication 05:19:44 Room Info 05:36:23 Room Participants 05:49:46 Room Toolbar 05:56:45 Canvas State 06:22:01 Cursors Presence 06:47:41 Insert Layer 07:20:07 Select Layer 07:36:02 Selection Box 07:59:34 Resize Layer 08:17:52 Translate Layer 08:31:29 Color change & Deletion 08:50:09 Layer Depth 08:56:46 Selection Net 09:11:53 Other Elements 09:32:51 Pencil & Drawing 10:13:02 Deployment
Recommanded Videos
These Coding Niches Will Make You $$$$ in 2024
Watch full video here: https://youtu.be/j2akjMAT8gQ If you want to land a developer job check out my program with CourseCareers: https://techwithtim.net/dev #shorts #techwithtim #coding
2024. 9. 15.
Build a HackerNews Clone: Hono, Tanstack Router, Drizzle, React Query, Lucia & more
Let's implement some of HackerNews's core features: posts, comments, nested comments, authentication, and deployment (Docker / Fly.io). We will use this project to learn some important concepts and tools for modern web development. Let's learn Hono, Drizzle ORM, Authentication, Tanstack Router, React Query, and more! Project Code: https://github.com/betterstack-community/betternews-hono-tanstack Hono: https://hono.dev/ Bun: https://bun.sh/ Drizzle: https://orm.drizzle.team/ TanStack: https://tanstack.com/ Lucia: https://lucia-auth.com/ Bun Compiler Options: https://bun.sh/docs/typescript#suggested-compileroptions shadcn/ui: https://ui.shadcn.com/ Key Features: - Hono - Bun - Tanstack Router - React Query - Tanstack Form - Authentication - Drizzle - Drizzle Relational Queries / SQL-based queries - Paginated Queries with InfiniteQueries - Caching and Cache-control - Optimistic Updates Chapters: 00:00:00 Intro 00:00:36 Site Demo 00:02:44 Stack Explanation 00:12:56 Project Setup (Step 1) 00:25:30 Drizzle Setup (Step 2) 00:37:53 Hono Error Handler (Step 3) 00:48:20 Lucia Auth (Step 4) 01:26:02 Tables Setup (Step 5) 01:46:33 Posts Route (Step 6) 03:17:21 Comments Route (Step 7) 03:44:39 Frontend Setup (Step 8) 04:12:52 Layouts and Helpers (Step 9) 04:47:43 Auth Routes (Step 10) 05:50:44 Homepage Posts (Step 11) 07:03:50 Submit Post Form (Step 12) 07:27:50 Setup posts page (Step 13) 07:45:22:22 Comments and upvotes (Step 14) 08:48:30:51 Comment form (Step 15) 09:17:27 Loaders and checks (Step 16) 09:33:24 Docker and Fly Deployment (Step 17) 09:59:43 Recommendations / What next 10:02:30 Outro ► HACKING SCALE NEWSLETTER https://newsletter.betterstack.com/ ► READ MORE More about Better Stack: https://betterstack.com/ Community pages: https://betterstack.com/community/ ► STAY TUNED GitHub: https://github.com/BetterStackHQ Twitter: https://twitter.com/betterstackhq LinkedIn: https://www.linkedin.com/company/betterstack Instagram: https://www.instagram.com/betterstackhq/ TikTok: https://www.tiktok.com/@betterstack
2024. 10. 11.
Electron Course - Code Desktop Applications (inc. React and Typescript)
Learn how to use Electron, React, and TypeScript to build desktop applications. Throughout this course, you'll learn everything from setting up your development environment to implementing advanced features like data visualization, secure communication, and custom window frames, all while ensuring a seamless user experience. Course developed by @NiklasZiermann Code: https://github.com/N-Ziermann-YouTube/electron-course ⭐️ Contents ⭐️ ⌨️ (0:00:00) Intro & How electron works ⌨️ (0:08:31) Setting up React ⌨️ (0:11:45) Setting up Electron ⌨️ (0:17:41) Adding TypeScript ⌨️ (0:22:47) Configuring Electron-Builder ⌨️ (0:29:07) DX Improvements ⌨️ (0:35:16) Reading System Resources ⌨️ (0:46:25) Communicating with the UI ⌨️ (1:09:34) Making IPC Typesafe ⌨️ (1:32:10) Event Validation ⌨️ (1:39:55) Unsubscribing from Events ⌨️ (1:43:55) Data Visualisation ⌨️ (2:00:24) Securing the App ⌨️ (2:06:53) Creating Tray Elements ⌨️ (2:14:40) Hiding to the Tray ⌨️ (2:27:31) Customising the Menu Bar ⌨️ (2:35:01) Enable View Switching ⌨️ (2:40:02) Custom Window Frames ⌨️ (2:51:00) Testing Theory ⌨️ (2:53:26) E2E Tests ⌨️ (3:06:27) Unit Tests ⌨️ (3:19:19) Finalising the UI ⌨️ (3:33:03) Outro 🎉 Thanks to our Champion and Sponsor supporters: 👾 Drake Milly 👾 Ulises Moralez 👾 Goddard Tan 👾 David MG 👾 Matthew Springman 👾 Claudio 👾 Oscar R. 👾 jedi-or-sith 👾 Nattira Maneerat 👾 Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
2024. 10. 7.
![[강의 미리보기] ChatGPT 는 이렇게 쓰는겁니다. 실리콘밸리식 ChatGPT 해킹하기](https://i4.ytimg.com/vi/K1mCgq6RYhI/hqdefault.jpg)
[강의 미리보기] ChatGPT 는 이렇게 쓰는겁니다. 실리콘밸리식 ChatGPT 해킹하기
[유료 강의 미리보기, 딱 5편만 공개합니다!!] ChatGPT, 이렇게 한번 배워보는건 어떨까요? 제대로 공부해서 커리어해킹 하는법, 알려드립니다. 💻 커리어해커 알렉스의 2500만 직장인들을 위한 챗GPT 강의: https://bit.ly/3U3iulH 🔗 커리어해커 웹사이트: https://www.careerhackeralex.com 👥 커리어해커 디스코드: https://discord.gg/Kp3SUkttKt 📧 커리어해커 이메일: careerhackeralex@gmail.com #챗gpt #인공지능 #커리어해커 #강의 0:00 - 인트로 0:36 - 강의 구조 3:07 - 기본편 8:54 - 실전편 15:16 - 고급편 18:16 - 핵심 구독자 여러분들에게 감사한 마음을 돌려드리기 위해 무료 이벤트도 진행하게 되었습니다! 아래의 무료 수강 이벤트도 참여해서 꼭 무료로 수강 신청하실 수 있길 바랍니다 :) 쿠폰명 : "2500만 직장인을 위한 챗GPT 강의" 수강료 100% 할인 무료 쿠폰 발급 대상 : 설문지 작성자 대상 10인 추첨 진행 진행 기간 : 4월 12일 (금) ~ 4월 21일 (일) 23:59 까지 쿠폰 당첨자 발표 : 4월 23일 (화) 링크 : https://forms.gle/FJczAuyASM69v2Cw6 (해당 설문조사에 참여만 하더라도 15% 할인쿠폰 발급해 드립니다!) [필독] 주의 사항 안내 - 구글폼 설문지를 작성해주셔야 이벤트 참여가 가능합니다. - 해당 이벤트 구글폼을 중복으로 제출하시더라도 당첨율과는 상관이 없으며, 중복 참여 시 제일 마지막에 제출된 건에 한해 참여 신청을 확인합니다. - 본 이벤트는 2024년 4/21(일) 23:59까지 참여 기한이며, 기한 이후 제출 건은 참여가 불가능합니다. - 구글폼 이벤트 참여와 함께, 커리어해커 알렉스 채널 본 영상 콘텐츠에 강의 관련하여 - 아쉽게도, 강의를 기존에 구매해주셨던 분들은 소급적용 되지 않습니다. (대신 제가 더 열심히 강의를 준비해서, 반드시 보답하겠습니다!) - 구독자분들의 사연을 댓글로 남겨주시면, 더욱 더 참고하여 추첨하도록 하겠습니다!
2024. 4. 17.
React's Future: Tejas Kumar on Server Components
🎟️ Get Your Tickets for React Day Berlin: https://ti.to/gitnation/react-day-berlin-2023/discount/Codestackr10 Join me in this insightful interview with Tejas Kumar, a seasoned engineer with 22 years of experience, and will be speaking at React Day Berlin on the topic of React server components. Discover how these components can revolutionize your React applications and get a sneak peek of what Tejas will be discussing at the upcoming React Day Berlin conference. Get ready to dive into the Reactverse on December 8 & 12, both in Berlin and online. Explore the latest insights on Webpack, Turbopack, React Native, and Typescript from over 50 React professionals. Secure your spot today and enjoy a 10% discount: https://ti.to/gitnation/react-day-berlin-2023/discount/Codestackr10 🔗 RSC from Dan Abramov: https://github.com/reactwg/server-components/discussions/5 🎟️ Get Your Tickets for React Day Berlin: https://ti.to/gitnation/react-day-berlin-2023/discount/Codestackr10 In this conversation, Tejas shares his remarkable journey in tech, starting from his early days dealing with illness to becoming an international keynote speaker. We also explore the nuances of server components in React and how they can significantly enhance the performance and functionality of your applications. Don't miss out on this opportunity to learn from one of the best in the industry. Whether you're a seasoned developer or just starting out, there's something in this talk for everyone. _____________________________________ 🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com 🧑🏾🤝🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ _____________________________________ 🛠️ Tools I use: 🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme 🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com) 🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions _____________________________________ 💖 Show support! PayPal: https://paypal.me/codeSTACKr _____________________________________ 👀 Watch Next: Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt _____________________________________ 🌐 Connect With Me: Website: https://www.codestackr.com Twitter: https://twitter.com/codeSTACKr Instagram: https://instagram.com/codeSTACKr Facebook: https://facebook.com/codeSTACKr _____________________________________ ** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you. #codeSTACKr #React #learntocode
2023. 11. 14.
현재 한국에서 AI 기술로 3년째 영업이익을 내고 있는 회사
오늘 인터뷰 영상에서는 IT 분야에서 20년 넘게 사업을 해온 유승재 대표님의 페르소나 AI 창업 스토리를 담아보았습니다. 최근 몇년간 AI는 가장 주목받는 기술이었지만 이를 활용해 유의미한 매출과 비즈니스 임팩트를 만드는 회사는 많지 않았는데요. 페르소나AI는 디지털 트랜스포메이션이 가장 활발이 일어나는 금융 산업과 자동차 산업 등을 중심으로 AICC(AI Contact Center) 영역을 혁신해나가며 작년 대비 매출 3배 성장, 3년째 영업이익을 내고 있는 회사로서 자리매김하였습니다. 영상을 통해, 유승재 대표님의 창업 스토리와 한국의 AI 기업으로서 꿈꾸는 비전은 무엇인지 살펴보세요. * 이 영상은 페르소나AI로부터 제작지원을 받아 만들었습니다. 🌎 EO 글로벌 채널 구독하기 👉🏻👉🏻 https://bit.ly/3S0Pacc 👽 eo PLANET 뉴스레터 구독하기 👉🏻👉🏻 https://bit.ly/3cIKLuL
2024. 10. 7.