Build A Slack Clone
15h 13m 30s
English
Free
Build A Slack Clone is a 42-lesson 15 hours 13 minutes self-paced course by Antonio Erdeljac (Code With Antonio). In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.
Course facts
- Lessons
- 42
- Duration
- 15 hours 13 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Antonio Erdeljac (Code With Antonio)
- Price
- Free
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others. You will learn how to create a professional collaboration tool with a wide range of features.
Who teaches Build A Slack Clone? Antonio Erdeljac (Code With Antonio)
Antonio Erdeljac is a Croatian developer behind the Code With Antonio YouTube channel — one of the more active independent full-stack JavaScript channels online, with a focus on long-form, project-based clones of well-known applications (Netflix clone, Spotify clone, Notion clone, Discord clone, Trello clone). The channel's distinctive contribution is the depth of those clone tutorials — each typically runs 8-15 hours and covers the full back-end-to-front-end implementation of a working app.
The course catalog covers the modern Next.js / React stack: App Router patterns, server components, server actions, Prisma + PostgreSQL, NextAuth / Clerk authentication, Stripe billing, file uploads, real-time features with Pusher, and the deployment workflow with Vercel. Material is paid extended versions of the YouTube content with additional features and context.
The CourseFlix listing under this source carries over 15 Code With Antonio courses spanning that range. Material is aimed at intermediate-and-up React developers building real full-stack applications.
What lessons are included in Build A Slack Clone?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Intro | 01:57 |
| 2 | Setup | 10:42 |
| 3 | Auth screens | 21:54 |
| 4 | Database setup | 11:42 |
| 5 | Github authentication | 25:07 |
| 6 | Google authentication | 09:52 |
| 7 | Password authentication | 11:44 |
| 8 | User information | 19:34 |
| 9 | Workspace creation | 52:57 |
| 10 | Toolbar component | 19:23 |
| 11 | Sidebar component | 24:22 |
| 12 | Members functionality | 15:33 |
| 13 | Workspace sidebar component | 30:12 |
| 14 | Workspace preferences | 40:49 |
| 15 | Workspace members & channels | 41:41 |
| 16 | Channel creation | 16:04 |
| 17 | Invite modal | 17:13 |
| 18 | Join workspace page | 24:08 |
| 19 | Channel page | 18:35 |
| 20 | Channel header component | 35:49 |
| 21 | Editor component | 54:42 |
| 22 | Emoji picker component | 14:12 |
| 23 | Image picker component | 08:07 |
| 24 | Editor submit functionality | 28:31 |
| 25 | Image upload functionality | 12:17 |
| 26 | Schema completion | 10:18 |
| 27 | Messages GET API | 36:00 |
| 28 | Messages list component | 49:57 |
| 29 | Channel hero component | 07:14 |
| 30 | Message toolbar component | 10:37 |
| 31 | Edit & delete message functionality | 20:59 |
| 32 | Message reactions | 22:01 |
| 33 | Infinite load | 05:42 |
| 34 | Thread functionality | 30:32 |
| 35 | Thread messages | 16:37 |
| 36 | Conversation page | 42:12 |
| 37 | Thread bar component | 13:12 |
| 38 | Member profile panel | 17:19 |
| 39 | Update & remove member functionality | 29:11 |
| 40 | Search dialog component | 13:16 |
| 41 | Layout shift fix & new emoji picker | 06:16 |
| 42 | Deployment to Vercel | 15:00 |
What courses are similar to Build A Slack Clone?
-
Updated 2y agoNext.js Complex State Management Patterns with RSC
By: Fullstack.ioIn the dynamic world of web development, mastering complex state management is an essential skills. And since version 13, Next.js introduced a new type of compo2h 56m5/5 -
Updated 2y agoBuilding an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
By: WebDevCodyAre you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with5h 53m -
Updated 1y agoBuild a Youtube Clone
By: Antonio Erdeljac (Code With Antonio)In this course, you build a full YouTube‑style app from scratch. You use Next.js 15 , React 19 , and tRPC to create a clear and fast stack.23h 42m -
Updated 11mo agoBuild a Multi-Tenant E-Commerce with Next.js, Tailwind v4, Stripe Connect
By: Antonio Erdeljac (Code With Antonio)Learn to build a multi tenant e commerce app with Next.js, Tailwind v4 and Stripe Connect. You create stores, manage files and handle safe pay flows.19h 52m5/5 -
ClassicThe Road to Next
By: Robin WieruchAs a full-stack developer, you have numerous opportunities. Whether it's launching a successful startup, building a career in a corporate company, or.30h 40m5/5 -
NewBuild a full stack Next.js app with Cursor
By: Gregory JohnLearn how to create applications with Next.js: UI design, authentication, databases, UX, payments via Stripe, and email automation. Suitable for beginners.8h -
Updated 1y agoBuild Your SaaS AI Web Platform From Zero to Production
By: Code4StartupDiscover the new trend in the world of startups and indie hackers - the creation of microservice AI-SaaS products that not only meet market needs but also.8h 36m5/5 -
Updated 2y agoNext JS: The Complete Developer's Guide
By: Udemy, Stephen GriderCongratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, fe15h 35m
More courses by Antonio Erdeljac (Code With Antonio)
-
Updated 2y agoBuild a Jira clone
In this 16-hour course, consisting of two parts (by the way, this is my longest course!).16h 26m -
FreeUpdated 2y agoNext Auth V5 - Advanced Guide
In this 8-hour course, you will learn how to create your own authentication toolkit using the latest version of Next Auth v5 (Auth.js).8h 1m -
Updated 2y agoDuolingo Clone
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language11h 12m -
Updated 2y agoCode With Antonio Workshops
These workshops show you how to build real apps with modern tools. You follow clear steps in each task. You learn by doing and test ideas as you go.17h 3m -
Updated 2y agoBuild A Finance Platform
In this 11-hour course, you will learn how to create your own SaaS financial platform with the ability to track income and expenses, categorize transactions.13h 43m5/5 -
ClassicBuild A Canva Clone
In this 18-hour course, we will create a graphic design platform with a variety of features.17h 48m5/5
Frequently asked questions
What are the prerequisites for enrolling in this course?
Before enrolling in this course, you should have a foundational understanding of web development. Familiarity with JavaScript, HTML, and CSS is crucial, as the course involves using advanced technologies like Next.js and Tailwind CSS. Prior experience with authentication methods such as OAuth and basic database concepts will also be beneficial, given the course covers GitHub and Google authentication, as well as database setup.
What tools and technologies will I learn to use in the course?
The course teaches you to use several advanced tools and technologies to build a Slack clone. Key technologies include Next.js for server-side rendering, Convex for managing data, Tailwind CSS for styling, and Shadcn UI for user interface components. Additionally, you will learn about authentication methods and deploying your application using Vercel.
What specific features will I build in this Slack clone project?
In this project, you will build a wide range of features typical of a professional collaboration tool. These features include user authentication (GitHub, Google, and password), workspace creation, channel and message functionalities, emoji and image pickers, message threading, and a search dialog. You will also implement components such as toolbars, sidebars, and member profile panels.
How does the depth of this course compare to similar courses?
This course offers a detailed, hands-on approach to building a Slack clone, focusing heavily on practical implementation. With 42 lessons that cover both frontend and backend development, it provides a comprehensive look at creating a real-time collaboration tool using modern technologies. It covers more technical ground than introductory courses by integrating complex features like infinite loading, message reactions, and deployment strategies.
What is the estimated time commitment required for this course?
The course has a total runtime of 15 hours spread across 42 lessons. The time commitment will vary depending on your existing knowledge and how much time you spend on exercises and coding along with the lessons. It's recommended to set aside additional time for practice and to consolidate your learning, potentially doubling the course duration for a thorough understanding.
Is there anything that is not covered in this course?
The course does not cover other possible authentication methods beyond GitHub, Google, and password authentications. It also does not delve into alternative deployment platforms aside from Vercel. Furthermore, while it provides a strong foundation in building a Slack clone, it does not cover other types of real-time applications or the specifics of scaling such applications for high traffic.
Will the skills learned in this course be transferable to other projects or careers?
Yes, the skills and technologies learned in this course are highly transferable to other web development projects and careers. Understanding Next.js, Tailwind CSS, and real-time data handling with Convex is valuable for developing modern web applications. Experience with authentication, component structuring, and deployment on platforms like Vercel is applicable in many professional settings, making this knowledge beneficial for a career in full-stack development.