Built a Slack clone with Tailwind & Alpine.js

#javascript #css #showdev

After the sidebar last week, I thought let's build something bigger. And so Slackish came into existence - a quick prototype build of Slack. Links to demo and source are included in this article.

Intro

So, here's a quick preview of what it looks like.

Features

Switch between conversations
Channels and direct messages
Indicate active conversation in sidebar.
Display user online status indicator on title bar & sidebar for DMs.
Auto scroll chat on new message.
Custom scroll bars similar to Slack.

Demo & Code

Take this project for a spin here: https://tailpine.netlify.app/slack/
And here's the source code: https://github.com/zaxwebs/tailwind-alpine/tree/main/slack

Develop Further

Feel free to fork and add to it.
Here's a few ideas:

Responsiveness
Dropdown for channels & DMs.

Conclusion

Tailwind and Alpine is a sweet combo to get up and running quick for setting up prototypes and more! The ecosystem is growing and there's so much more to come.

Thanks for reading.