DEV Community

Cover image for So I created Slack Clone in Vue(kinda)
Ferdo Vukojević
Ferdo Vukojević

Posted on

 

So I created Slack Clone in Vue(kinda)

Hello Community! 👋

Before I dive into the app, just wanted to give a few pointers, so nobody get's confused.

  • This app is only created for fun. So it is only working locally and I do not intend to host in anywhere. It would probably be illegal to do so, due to usage of Slack logo and their name in my application. So this is as said, only for fun and learning purposes.
  • The App is heavily inspired by Youtube channel Clever Programmer and their livestream, where they did the app using React. I created it again using Vue.js and plan on adding a lot more functionalities, because they only added a few in their 4 hours livestream.

How does it work

This app currently supports the following.
  • Login with Google
  • Get channels from database (I am using firebase - Cloud Firestore)
  • Adding new channels, switching between them, reading and adding messages
Things to be added in short future:
  • Editing and Deleting the messages
  • Adding Threads to messages
  • Notifications about unread messages
  • Editing channels (public/private, editing name, etc...)

Project Screenshots

Login Page

Alt Text

Char Room Page

Alt Text

Dynamic Slugs

Alt Text

Dynamic Channels

Alt Text

User Data from Google

Alt Text

What next?

Again, the app is still very much under construction. I intend to add more and more features, like threads, notifications, deleting messages, editing them, pushing files, and many more. If you would like to help and be a part of my journey you can always ping me and we will get you started! This is a good learning experience and I look forward to working with different people

Reflection

So at this point I just want to reflect on this app and why I decided to use it. So I have been working as a software developer for the last 2 years, and my main focus has been more on the backend side of things. So creating api's, microservices, interacting with databases (nosql, sql, key value stores, etc.) has always been my main focus.

Recently I decided to switch gears and try learning more about frontend and devops things. I picked up dockers, started learning them, and after a while got pretty good at it (this app will potentially be dockerized). When it comes to frontend I picked up Vue.js pretty fast as it is probably the fastest and easiest frontend language to start with. I created bunch of little small apps, just testing how everything works, how lifecycles works, how it all connects to Vuex, etc.

Now I am looking to expand and learn more advanced things and topics of Vue.

You can clearly see by my code, that I am no expert when it comes to frontend, so please bare with me while I am trying to improve the code and add new features. While it might take only few minutes to some, I still have to spend some time on stackoverflow and alike to seek help whenever I get into trouble.

And as said before, this is an app in development and there are many known issues and bugs that I will eventually fix.

APP Code and Setup:

App is fairly simple to setup. Only thing confusing might be firebase config, and if there is any trouble, as said in README.md, you can always ping me about that and I will help you get started.

Again, in case of being a contributor on this project, I am always looking for help and exchanging knowledge so you can ping me about that as well.

Github link: https://github.com/fvukojevic/Slack-Clone-Vue

Top comments (3)

Collapse
 
webdev710 profile image
webdev-710

Awesome!
It is always a good choice to develop a clone project. I love to help you or enjoy developing this slack clone app. I am vue lover, and have experience in developing backend using Laravel and node/express. If you find any hands needed in this project, I will willingly devote myself.

Thanks

Collapse
 
brendinv profile image
Brendin Venter

Hey man, that’s an awesome looking project! I’d love to contribute but I’m still studying software dev (6 months in) but just started getting into Vue which is a lot of fun so far.

Anyways keep the projects coming!

Collapse
 
benjaminrachi profile image
benjaminrachi

Awesome! Im looking for more projects like in the clever programmer chanel with vue, so please keep on your good work!