So I created Slack Clone in Vue(kinda)
Tags: javascript, frontend, vue, firebase
Published: 2020-08-28 14:30:54

## 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](https://dev-to-uploads.s3.amazonaws.com/i/bg5jx8ko19w3w926walp.png)

Char Room Page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l0zsiooym4nk6lj9dcrf.png)

Dynamic Slugs 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aqu8kq83np8bm9ez377l.png)

Dynamic Channels 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izvwydvyfluqv8f32pju.png)

User Data from Google

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t8fzkfyt78h7p49yl8gk.png)

## 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