Build A Slack Clone
15h 13m 30s
English
Free
Added to CourseFlix
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
- Language
- English
- Added to CourseFlix
- September 2024
- 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 |
Enjoying this free course? One payment unlocks 2,000+ premium courses, from $6.67/mo. No auto-renew.
See plansWhat courses are similar to Build A Slack Clone?
Updated 2mo agoPlanning with Claude Code
By: Mckay WrigleyBuild a landing-page generator with Next.js while learning to plan, structure, and hand off real coding tasks to Claude Code step by step.47m
Updated 2y agoNext40. Master Next.js 14 in 40 days of epic projects
By: Reed Barger, Next40Become a Next.js pro in the best way - by building tons of amazing apps, from admin dashboards, personal websites, full-stack apps and more.4h 52m
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 1y agoMagic UI Pro
By: Dillion Verma (Magic UI)Discover Magic UI Pro, your go-to platform for creating modern landing pages. With 50+ animated sections, this tool uses React and Next.js for fast and visually
Updated 3y agoReact Node AWS - Build infinitely Scaling MERN Stack App
By: UdemyMaster the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could25h 1m5/5
ClassicThe Joy of React
By: Josh ComeauThe all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let s be real. Learning React is hard.25h 35m5/5
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 2mo agoNext Auth V5 - Advanced Guide
Free 8-hour course: build a complete Next Auth v5 (Auth.js) toolkit with 2FA, password recovery, email verification, and Google/GitHub OAuth.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 2mo agoBuild A Finance Platform
Build a full SaaS finance platform over 11 hours: import transactions via CSV, connect a bank with Plaid, and monetize with Lemon Squeezy.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.