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 3y agoServer side rendering with Next + React
By: UdemyDo you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't e29h 43m
Updated 3y agoBedrock: Jumpstart your next SaaS product
By: Max StoiberThe modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.5/5
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 3y agoMERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
By: UdemyIf you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies.13h 2m5/5
Updated 2y agoBuild a Jira clone
By: Antonio Erdeljac (Code With Antonio)In this 16-hour course, consisting of two parts (by the way, this is my longest course!).16h 26m
ClassicComplete Next.js Developer in 2023: Zero to Mastery
By: Zero To MasteryLearn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R27h 12m5/5
Updated 1y agoBuild and Deploy a SaaS AI Agent Platform
By: Antonio Erdeljac (Code With Antonio)Embark on an innovative journey with our comprehensive course designed to teach you how to build and deploy a cutting-edge SaaS AI Agent Platform .13h 24m
More courses by Antonio Erdeljac (Code With Antonio)
- Updated 2y ago
Build 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.