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 6mo agoNestJS + Next.js: Event Driven Architecture
By: Michael GuayLearn how to create an event-driven architecture with NestJS and Next.js. The course covers EventEmitter and SSE for developing real-time systems.45m -
FreeUpdated 2y agoBuild an LMS Platform
By: Antonio Erdeljac (Code With Antonio)In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch.10h 41m -
Updated 2y agoFULL Authentication WITH REACT JS NEXT JS TYPESCRIPT
By: UdemyThis is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects6h 52m -
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 10mo 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 -
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 Projects: Build an Issue Tracker
By: Mosh Hamedani (Code with Mosh)Learn to Build Full-stack Apps with Next.js, TypeScript, Prisma, Tailwind, and Radix UI. Clear. Concise. Comprehensive. Tired of piecing together disconnected t7h 1m -
Updated 2y agoFull Stack Development
By: NeetCodeThis course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up.4h 24m
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.