inflearn logo

Slack Clone Coding [Real-time Chat with React]

Let's start full-scale React web development by building a Slack clone! From sign-up and login to creating rooms and real-time chat!

(4.8) 97 reviews

2,896 learners

Level Intermediate

Course period Unlimited

Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel

Reviews from Early Learners

Reviews from Early Learners

4.8

5.0

shut up and squat

96% enrolled

It's really great. It covers a lot of the overall front-end technology. The answers are almost like Slack clone coding, so they're quick to the point of real-time socket communication, so communication is really good. If you listen to Zerocho's free React lecture and listen to this, you'll get a lot out of it.

5.0

Milkyway

100% enrolled

I haven't finished the lecture yet, but I think it's a good enough lecture, and I'm writing it in advance because a pop-up popped up on Inflearn asking me to write a course review. First of all, as the course introduction says, it uses TypeScript, but you can think of it as a React, Webpack, SWR, Emotion, and Socket.IO course. If you're taking the course to study React + TypeScript, you might be a little disappointed. On the other hand, even if you don't know TypeScript, there's no problem taking the course. However, I recommend the All-in-One TypeScript course, and I think it's a good course for those who want to study React + TypeScript while also using TypeScript. First of all, since it's a lecture that's faithful to React, it's good for setting up React structure and development direction. Second, it tells you the initial settings of Webpack and starts, but even if you don't know it, you can still develop, but since I think the initial settings are really important later, the content on the initial settings was really good. Third, it was good that it suggested which units to create style components in when applying styles and proceeded with the class as is. Lastly, it was good to give basic explanations and tips on socket communication, but I can't give you a definitive answer because I'm listening to it now. The downside is that, in my opinion, it's been a while since the lecture came out, so there are a lot of changes in the code. However, since they are consistently uploading updated codes to GitHub, and if you have any difficulties, you can ask questions on the Inflearn Q&A board or Slack and they will answer quickly, so if you want to study on your own, you can sufficiently supplement it. I'm listening while reflecting the contents of GitHub react-query in parallel with the lecture contents, and I was able to search and solve the contents that changed due to library updates. Lastly, as for the lecture listening tip, for the initial setup, there are some changes, so instead of following along, copy and paste the GitHub code, listen to the lecture step by step, and try setting it up on your own, I think it's a good idea. Also, since it's a basic lecture, if you're already using React and TypeScript well in practice and have experience applying socket communication, there may be less content than you think. Personally, I gained a lot from it, so it was a good lecture experience.

5.0

넉리

50% enrolled

Originally, I thought I wasn't suited for online lectures because there weren't many solid lectures.... But I'm currently taking this course and it's really fun.

What you will gain after the course

  • React Web Development

  • Initial Frontend Setup (without CRA)

  • SWR (Redux alternative)

  • Emotion (Styled Components)

  • Socket.io Real-time Chat

A chat application you build with your own hands,
effectively and more simply! 💬

In this course?

Slack clone coding to start your
full-scale React web development!
(Slack+React, aka Sleact!)

React web development,
how should you learn it?

I heard people don't use Redux much these days...
I heard everyone is moving from JavaScript to TypeScript...
Is that true?

Have you heard this a lot? Sadly, it's true. That's why in this course, we've removed Redux and applied TypeScript instead of JavaScript. I'll show you that it's possible to develop React apps without Redux, and that TypeScript isn't as difficult as you might think!


I recommend this to the following people!

Those who want to learn how to develop React web applications

Those who want to learn TypeScript for the first time

Those who want to implement the front-end part through clone coding


ZeroCho Slack Clone,
Perfectly solving your front-end concerns!

  • Build a service with TypeScript in line with the latest frontend trends. However, for those who are hesitant about TypeScript, the course is structured so that you can also proceed with JavaScript. (JavaScript source code provided!)
  • We do not use Redux. Instead, we use a library called SWR.
  • We will implement all the features necessary for a chat application, including sign-up, login, creating chat rooms, inviting users, real-time chat, user mentions, and image uploads.
  • Although not explained in the lecture, the backend source code is also provided.

You will learn these skills.

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


Build it yourself!

회원가입, 로그인, 워크스페이스
각종 워크스페이스 기능 구현

Real-time chat and online list


#1
The source code is

provided.

https://github.com/zerocho/sleact (Go to link)

#2
I provide quick answers
to your questions.

The strength of my course is the Q&A. If you ask a question, I will answer within a day.
Please feel free to ask questions related to the course and study actively.
It will be more helpful for understanding the content!


Instructor Introduction

Author of the web development bestseller
<Node.js Textbook>

CTO of Today's Pickup
Co., Ltd.


Frequently Asked Questions 💬

Q. Is TypeScript a must-know?

Personally, I recommend learning TypeScript. The JavaScript ecosystem is increasingly moving toward TypeScript. However, since this course provides JavaScript source code and explains how to apply TypeScript in the videos, you can still proceed with just JavaScript. (Simply change .tsx and .ts files to .jsx and .js, and remove the :type and <type> parts. It's very simple.)

Q. Is SWR a proven library?

It is a library created by Vercel (formerly Zeit), the creators of Next.js and now.sh. You can use it with confidence. It has 16,000 GitHub stars!

Q. Is there a reason why you didn't use CRA for the setup?

I always make it a rule to set things up manually instead of using CRA in my lectures. You need to know how to set it up manually to understand the principles behind CRA. I recommend using CRA only after you understand those principles.

Please note before taking the course!

  • Socket.io uses version 2. You must install version 2.
  • The actual deployed service can be checked at sleact.nodebird.com .
  • I will compile frequently asked questions into an FAQ and post them on the Inflearn blog.
  • If there are any issues with the video or content, please contact me, and I will re-edit and upload it.
  • If there is something you are curious about implementing that is not covered in the lecture, I will create a bonus video if many people ask about it.

Prerequisite Knowledge & Related Courses

Required Prerequisite Knowledge

Learn React, Babel, and even Webpack with eight web games!

To learn more TypeScript!

The latest trend! The world of TS, more stable than JS

Curious about other clone coding courses?

An incredible 22-hour Twitter clone!

 

Recommended for
these people

Who is this course right for?

  • Those who have learned React syntax and want to start web development in earnest

  • Those who want to follow along and build a proper service instead of a simple tutorial.

  • Those who want to learn development with enhanced stability using TypeScript

Need to know before starting?

  • HTML/CSS

  • JS Basic Knowledge

  • React Basic Syntax (Please watch the free course first)

Hello
This is zerocho

67,605

Learners

1,737

Reviews

9,765

Answers

4.8

Rating

25

Courses

One of the key strengths of my courses is the Q&A support (Winner of the Inflearn Q&A King award twice). I respond to your questions within 24 hours, doing my best to help you out! I’ll answer your questions with the mindset that we are tackling the problems together!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
ZeroCho's full lecture roadmap. A complete roadmap of all my courses is available here.

– Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
ZeroCho.com Operator
– Currently) Broadcasting development-related content on ZeroCho TV via YouTube
– Formerly) Smoretalk CTO
– Formerly) CTO of Today's Pickup (Youngest Development Team Lead at Kakao Mobility after exit to Kakao Mobility)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • Former CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

More

Curriculum

All

46 lectures ∙ (11hr 1min)

Published: 
Last updated: 

Reviews

All

97 reviews

4.8

97 reviews

  • dla14347593님의 프로필 이미지
    dla14347593

    Reviews 4

    Average Rating 4.3

    4

    100% enrolled

    I've been listening to Zerocho's lectures consistently, and I feel that the explanations and examples are good enough to be used in practice. However, one thing I regret is that sometimes the lectures are copied and pasted, or the source code that is not very important is processed quickly, so it takes time to apply the code. If git branches are separated by lecture, it would be easier to check and test the examples. Also, if you leave links to the explanations or mentioned sites or documents in the middle, it would be easier to refer to them. Lastly, thank you for always giving great lectures.

    • milkyway님의 프로필 이미지
      milkyway

      Reviews 6

      Average Rating 5.0

      5

      100% enrolled

      I haven't finished the lecture yet, but I think it's a good enough lecture, and I'm writing it in advance because a pop-up popped up on Inflearn asking me to write a course review. First of all, as the course introduction says, it uses TypeScript, but you can think of it as a React, Webpack, SWR, Emotion, and Socket.IO course. If you're taking the course to study React + TypeScript, you might be a little disappointed. On the other hand, even if you don't know TypeScript, there's no problem taking the course. However, I recommend the All-in-One TypeScript course, and I think it's a good course for those who want to study React + TypeScript while also using TypeScript. First of all, since it's a lecture that's faithful to React, it's good for setting up React structure and development direction. Second, it tells you the initial settings of Webpack and starts, but even if you don't know it, you can still develop, but since I think the initial settings are really important later, the content on the initial settings was really good. Third, it was good that it suggested which units to create style components in when applying styles and proceeded with the class as is. Lastly, it was good to give basic explanations and tips on socket communication, but I can't give you a definitive answer because I'm listening to it now. The downside is that, in my opinion, it's been a while since the lecture came out, so there are a lot of changes in the code. However, since they are consistently uploading updated codes to GitHub, and if you have any difficulties, you can ask questions on the Inflearn Q&A board or Slack and they will answer quickly, so if you want to study on your own, you can sufficiently supplement it. I'm listening while reflecting the contents of GitHub react-query in parallel with the lecture contents, and I was able to search and solve the contents that changed due to library updates. Lastly, as for the lecture listening tip, for the initial setup, there are some changes, so instead of following along, copy and paste the GitHub code, listen to the lecture step by step, and try setting it up on your own, I think it's a good idea. Also, since it's a basic lecture, if you're already using React and TypeScript well in practice and have experience applying socket communication, there may be less content than you think. Personally, I gained a lot from it, so it was a good lecture experience.

      • dongwooklee96님의 프로필 이미지
        dongwooklee96

        Reviews 5

        Average Rating 4.4

        5

        50% enrolled

        Originally, I thought I wasn't suited for online lectures because there weren't many solid lectures.... But I'm currently taking this course and it's really fun.

        • dyonglove님의 프로필 이미지
          dyonglove

          Reviews 25

          Average Rating 4.2

          4

          100% enrolled

          It's not cheap, but it's so hard to take the class. If it's a lecture that's free on YouTube, you can listen to it, but it's not organized, and they always tell you to look at the official document because it's all in it... It's good to provide the official document, but there is a basic math textbook, but isn't that the role of the instructor? Just because there's a textbook doesn't mean everyone gets a first-class grade. If you say that it's all in the textbook, so you can look at it, and if you explain some parts roughly, it can be very difficult and confusing for some people. I think that separating the backend and the frontend is also a way to raise the price. The two lectures don't feel naturally connected, and when I first create the backend, when I come to the frontend and look at it, the part that the instructor created doesn't have the configuration part in the part that I created... I feel uneasy every time that happens. Also, since the previous level is already known, as a busy office worker, I can't invest time in all the lectures. It's like I'm not very good at math, but I can't just look at sets all the time. Even if you record a lecture at a higher level than the previous lecture, I hope you make it an independent lecture. In fact, I thought a lot about how to convey the inconveniences I felt while listening to several lectures without being too exaggerated, so I think this part came from my impressions while listening to the TypeScript lecture.. You just change what you already made in JavaScript to TypeScript, so I didn't feel like I gained much since I didn't listen to the previous lecture. So I'm trying to listen to it a few more times to understand it, but since I'm also busy with my main job, the burden of listening to the lecture increases, and I feel sorry that my complaints are directed at the instructor, but I hope you understand that there are opinions like this. The last part about distribution is also like that, so I feel like my curiosity about how to actually distribute it and see visible results is not resolved. I think everyone has a different style, but I personally don't think it's a good quality lecture for the price. However, I think this front-end lecture is the best among the lectures I've listened to from Zerocho. I think that the fact that you turned off the music at the beginning and end was a consideration for the opinions of the students, so I'm grateful. I hope that you will continue to develop as a Zerocho.

          • zerocho
            Instructor

            Thank you for your valuable opinion. I am currently writing lecture notes and making more systematic classes for the course, but TypeScript is a very early course, so it must have felt much more chaotic. If I were to release a course these days, I would have released a combined JavaScript + TypeScript course and released the JavaScript part for free on YouTube. I will gradually renew and improve this part. Regarding the Slack Clone Coding course, I originally planned to release it for 90,000 to 100,000 won for the front and backend courses, but many people found full-stack courses burdensome, so I separated the target groups. However, since I released them separately, there were bugs and course improvements piled up, so there were some parts that were not connected. I will practice again and fix it. It would be better if you could tell me what you know. I know you had a lot of complaints, but I feel that you were as considerate as possible when leaving your review. Thank you for leaving a sincere review, and I apologize.

        • ckdduf6651459님의 프로필 이미지
          ckdduf6651459

          Reviews 2

          Average Rating 5.0

          5

          96% enrolled

          It's really great. It covers a lot of the overall front-end technology. The answers are almost like Slack clone coding, so they're quick to the point of real-time socket communication, so communication is really good. If you listen to Zerocho's free React lecture and listen to this, you'll get a lot out of it.

          zerocho's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!

          $30.80