Echo

• 

  Home Page Dark Theme

• 

  Home Page Light Theme

• 

  Create Group

• 

  Chat Page Light Theme

• 

  Chat Page

• 

  Audio Call

• 

  Landing Page Dark

• 

  OTP Box

• 

  Group Info

• 

  Video Call

• 

  Login Page

• 

  Real Time Messaging

• 

  Signup Page

• 

  Landing Page Light theme

• 

  Accepted Video Call

• 

  Accepted Audio Call

Inspiration

Since school, I have been very interested in how all these web and mobile applications work and most of all how these calling applications work. This project at that time was my dream project so I took small steps, learned all the basics, made smaller projects, and gradually increased its difficulty and now here I am.

What it does

It's a messaging and calling application that allows you to communicate with your friends and family seamlessly, it allows video and audio calls and even group chats.

How we built it

I already had a good knowledge of react and tailwind css but express.js and MongoDb were relatively new for me. So I learned it along with some tools like web sockets and webrtc and how they work, and I am very proud of how it turned out.

Challenges we ran into

Most of the challenges we ran into were from the backend or with web socket and webrct as we were relatively new with those tools. For example, while getting the new messages using socket the same message was being rendered several times and we fixed it using socket.off in return on the useEffect hook. Another one was with sending the caller's video to the receiver which was not working even after the p2p connection was established and I fixed it by sending the video just after getting it from the user using " .then ".

Accomplishments that we're proud of

The video calling feature itself was an accomplishment as it took us around 4-5 days to get it working.

What we learned

we learned how web sockets and webrtc work, how to create rooms with socket.io, its significance, how to establish a p2p connection between two users, and how to authenticate users and encrypt their passwords before saving them in the database.

What's next for Echo

we want to make Echo an everything kind of application where you can even book a cab or a hotel etc and send or receive money through UPI, and use it as a social media application too where you can post photos and videos

Built With

• express.js
• javascript
• mongodb
• node.js
• react.js
• redux
• simple-peer
• socket.io
• tailwind
• webrtc