Introduction
Hey guys! I am super excited to say that the Cream.io MVP is ready. You can check it out here. In this post, I will break it down to explain how I actually made it but note that in this post, I will not explain the code. The code is also on my GitHub.
Backend Tech
Firstly, the whole web app is based on MERN stack as in MongoDB-React-Express-Node.js. I have used several other node packages like email-validator, uuid etc. For MongoDB, I have used no third party plugins and I have used MongoDB Atlas which is the cloud based version of MongoDB. For MongoDB I have used this library called mongoose for interaction with the MongoDB client. I have also used Socket.io for socket communication or realtime communication. The authentication architecture is JWT or JSON Web Tokens for which I used jsonwebtoken library.
Frontend Tech
The frontend is built with React.js and Tailwind CSS. For the tailwind side, I have used a template by Brayden Coyer. The template is basically a Tailwind React dark mode starter for which he also wrote a blog post. Next, I used react-router-dom for routing in my application and then I used axios for requests to the backend. I have also used some miscellaneous stuff like a library for copy pasting which is react-copy-to-clipboard. I have used styled-components as well which would be a bit different since I already had Tailwind in my project but still. I also used react-icons in my project because the variety is a lot compared to other icon libraries. I have used simple-peer as a wrapper for WebRTC which is the technology I am using for video calling. I have socket.io-client which allows client communication to the socket.io backend which I have.
Deployment
The backend for this app is deployed on Digital Ocean and so was the frontend in the starting. For Digital Ocean though, I have used their latest app platform since I had some Digital Ocean credits.
To Do Features
I will also add a feature request page soon so that people can request features but for now my list for implementing features is as follows in no particular order:
- [ ] AI-based face filters and masks.
- [ ] Admin muting and kicking members.
- [ ] Enhance UI and UX.
- [ ] Image and video sending in chat.
These are the features from the top of my head. But if you all will have some suggestions or features please comment down below and I will consider them.
Conclusion
This was my submission a.k.a entry for the hackathon and hopefully, I win. I took some time to think through the tech stack and once upon a time I was even using Firebase but that didn't go through well. If you like my project then show some love with the reactions on this post.
EDIT: There were some build problems with Digital Ocean so I have migrated the app to heroku. The post is updated with the new app link. Deployed app: cream-io.herokuapp.com.