Plugins
Templates
Blocks
Template Setup Guides

Slackly - Team Messaging like Slack Template

Template page link: https://zeroqode.com/template/slackly---team-messaging-like-slack-template-1478252723434x439380206150746100

Introduction

Slackly is a team messaging and collaboration tool built without code. It is similar to Slack, where users can create multiple teams and invite others to join them. Slackly also features channel and direct messaging with team users as well as a user profile page. This is a great template for tools built for inside use purpose, but could be used out of the box. For example, use as an app itself, or integrate it in a bigger project.

Features

  • Collaboration

  • Messaging

  • Landing page

  • Responsive design

Data Structure

Channel

Channels which may represent groups are created bearing a Name, Purpose, Team, and TeamName. A user may belong to more than one channel.

Channel Conversation

Every channel conversation belongs to a Channel, may contain File and Link, and also carry a Message, New message? and Picture.

Direct Conversation

This is a private conversation between a user and another. Contained here is the Channel, possibly carrying a File, Link, Message, and New message?. This data structure also shows Parties (list of users which is basically the Recipient and Sender), Picture (of users) and Team (which they belong to).

Team

Teams are identified by a Name, the Users, and various Channels the users belong to.

TeamUser

This contains the Name of the team, the user Name, and other details of the user.

User

The bio of the user is contained here such as First Name, Last Name, Photo, Phone, email, etc.

Pages

Index

The index page is the landing page of this template. The simple and colorful page upon loading contains a sign-in card, signup button and social media links.

Create New Team

A user is able to create a new team on this page. Also visible on this page are teams the current user is signed in to. To create a new team requires just a name for the new team to be created.

Settings

A user's account is managed on this page. This includes editing profile, managing teams and messages. This page also makes use of custom states

Custom state:

State

Element

Note

tab

Group Account

this custom state is used for navigation in the Group Account. It carries values such as "profile", "teamman", "accountset", and "mesarch" when accessing group profile, and messages.

team

Popup Invite members

this custom state is used for inviting and adding users to a team

teamuser

Popup remove user

this state is used to remove users from teams

Complete Profile

A user can add more information to be displayed on his/her profile.

Home

The channels and direct messages are viewed on this page.

Custom states:

State

Element

Note

channel

Group Channel Conversation1

this is used to navigate in the channels

user

Group Direct ConversationFull

this state allows a user navigate through private messages

Reusable Elements

The footer contains social media links.

Signup / Login Popup

This element basically allows users to signup or/and login to the app.

Custom state:

State

Element

Note

mode

Signup/Login Popup

Depending on the action to be taken, this state allows a user "signup" or "login" to the app.

Demo to preview the template