-
-
Chat App open in two windows
Inspiration
I was inspired by chat apps such as Discord and iMessage. When I started this hackathon, I was interested in how chat apps worked, and I decided to try and make one by myself.
What it does
This chat apps allows users to communicate without any delay. It also says who is sending the message and doesn't repeat the name if the previous message is by the same person.
How I built it
The server is built with express.js and socket.io, and the client is built with React and socket.io. When the user visits the page, they enter their name and connect to the server. When the user sends a message, socket.io sends the message to the server. The server then forwards the message to all the other clients, giving the effect of the user sending a message to everyone else.
Challenges I ran into
One of the main challenges was that the client and server wouldn't connect with each other. My first version used Next.js instead of React, but when I switched to React, the socket.io issue was resolved. Another one of the challenges was that I didn't know how to write CSS. I had to do a lot of research and trial and error to write CSS that looked good.
Accomplishments that I'm proud of
One of the biggest accomplishments that I'm proud of is managing my time and making a polished product in so little time. I am also proud of staying focused and continuing to work when I hit roadblocks and issues that I didn't know how to solve.
What we learned
I learned a lot about socket.io and CORS, since I had a lot of CORS issues. I also learned more about React and Express.
What's next for Chat App
The next thing I would like to do is make different conversations, instead of having one global chat. I would also like to show the time of the message and the day that the messages were sent.
Log in or sign up for Devpost to join the conversation.