KillrChat front end layout

In this blog post, I’ll introduce the general front end design for KillrChat and its REST API.

If you have missed the previous posts on KillrChat, please go there

The application is completely open-sourced, you can get it here

I Front end design

The KillrChat front-end is built using AngularJS and Twitter Bootstrap theme and is designed as a single page application.

A Login page

The login screen is composed of a simple login form. You can tick the “Remember me” option to skip the login page every time you refresh you browser, as long as the remember-me cookie is still valid.

Login Screen

Login Screen

B Signup form

If you don’t have an account, you can create one quickly by filling a simple registration form. It is just a modal panel that appears as an overlay on the login screen.

Registration Form

Registration Form

Some constraints are applied on the registration form:

  1. the login should be an alpha-numeric character (_, – and . are allowed but not at the first position). The login should be of 2 characters minimum and 30 characters maximum
  2. there is no particular requirement on the password (in term of complexity or length). It could be a future improvement to enforce strong password
  3. login, password, firstname and lastname are mandatory fields. Email address and user bio are optional

After you successfully create your account, the registration form is removed and the login form is automatically filled with the login and password you entered during the account creation. This small optimisation makes the registration process as fast as possible.

Login Form Auto Fill

Login Form Auto Fill

C Main layout

After logging into KillrChat you’ll land at the home page. The main layout consists of
3 zones:

  • a top navigation bar with the sign-out icon Sign Out icon on the right hand-side
  • a left panel with some icons Navigation Icons to navigate in the application and a list of all chatrooms you have joined
  • a right panel which displays contextual information
Main Layout

Main Layout

D Home page

The home page is simply a page with the welcome message and some indications to use the application

Home Page

Home Page

E Chat room creation

By clicking on the New Chat Room Icon icon on the top-left corner, you can create a new chat room.

Chat Room Creation

Chat Room Creation

The room name has to respect some format to avoid abuse (name having special characters like smileys etc.). Optionally you can set a chat room banner message.

Once the chat room is created, it will appears on the left column, under “My rooms”. Naturally the creator of the room will be added as the first participant of the room.

F Rooms listing

You can also have a listing of some random 100 existing chat rooms. Right now there is no feature to search room by name, it can be a future improvement.

The room listing is a table showing the room name, the creator, the number of participants and their name.

Chat Room Listing

Chat Room Listing

A room is displayed in bold blue if you already joined it, and in black if you’re not in.

From the listing, you can join Join Room Icon or leave Leave Icon any room. The “My rooms” list on the left panel will be updated accordingly.

G “My rooms” list

On the left panel are listed all rooms you have joined so far

My Rooms

To enter a room, just click on its name: Click To Enter

To leave a room, click on the icon on the far right: Click To Leave

H Chat window

When entering the room, you’ll see a new layout:

Chat Room Layout

Chat Room Layout

  • on the top, it’s the chat room header, with the room name and banner
  • in the center of the screen is the chat messages zone, order by descending with respect to their creation time
  • on the bottom is the input field where you can enter your chat message
  • on the left is a list of all participants in the chat rooms

By hovering the mouse over each participant on the left, you can have detailed information on him/her

Participant Detailed Info

Participant Detailed Info

To be continued …

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.