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!
2,899 learners
Level Intermediate
Course period Unlimited
Image drag upload video production complete
I have uploaded the API source code for image drag upload to GitHub.
Due to differences in the WebSocket architecture, the real-time display mechanisms are slightly different in Channel and DM.
https://github.com/ZeroCho/sleact/blob/master/alecture/components/Chat/index.tsx
The part that recognizes the address in the chat component
https://github.com/ZeroCho/sleact/blob/master/alecture/pages/Channel/index.tsx
https://github.com/ZeroCho/sleact/blob/master/alecture/pages/DirectMessage/index.tsx
The main difference between the channel page and DM page is onDrop and onDragOver.
There is also an option to display the number of unread messages.