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 and Apollo - Portfolio App (w/ React, GraphQL, Node)
By: UdemyGraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to28h 38m -
Updated 2y agoNext.js 14 & React - The Complete Guide
By: Udemy, Academind Pro (Maximilian Schwarzmüller)I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame36h 13m5/5 -
Updated 2y agoNext JS & Open AI / GPT: Next-generation Next JS & AI apps
By: UdemyDon't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects!5h 8m -
Updated 2y agoMERN React Node Next.js Multi User SEO Blogging Platform
By: UdemyMaster the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b20h 25m -
FreeUpdated 2y agoBuild a Google Docs Clone
By: Antonio Erdeljac (Code With Antonio)In this 10-hour course, you will learn how to create a fully functional Google Docs clone from scratch.10h3/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.