relakqs

relakqs is a simple messaging app by Riki Kaneshiro

Table of Contents

• relakqs at a Glance
• Application Architecture & Technologies Used
• Frontend Overview
• Backend Overview
• Conclusion & Next Steps

Relakqs at a glance

Relakqs is a simple chatting web application where users can create and join channels to chat in!

Sending a message

Creators of channels are given admin privledges, which include updating the topic of a channel or deleting a channel.

Updating a channel topic

Application Architecture

Relakqs's stack includes React, Redux, Node, Flask, and PostgreSQL. For styling, relakqs uses Material-UI.

Messaging, and updates that admins make to a channel topic are all handled using socket.io and it's Flask-compatible version, Flask-SocketIO. This not only enables real-time messaging, but allows for all users currently in a channel to instantly see the updated channel topic when an admin updates it.

Frontend Overview

Below are the frontend technologies used with some notes regarding their implementation.

Frontend Technologies Used

React/Redux

Relakqs is a React app, and makes use of Redux for state management, allowing for a snappy user experience. The react-redux library is used extensively throughout the app, using the useSelector hook to access the Redux store and the useDispatch hook to call actions.

socket.io

Socket.io responsible for most of the logic in relakqs. Any time input from one user needs to instantly update the page for many other users, socket.io was used to implement the feature. It would have been extremely difficult to develop relakqs without using socket.io or a very similar technology.

When a user in a channel sends a message, socket.io is what delivers it to the backend, not a fetch call. The backend recieves the message and stores it in the postgres database, and then emits the message, also using socket.io, to other users who are in the same 'room'. This also happens in the same way when an admin updates the topic of a channel.

socket.io message event handler in Channel component (edited for brevity)

  useEffect(() => {
    // ...
    // more handlers above

    props.socket.on('message', ({msg}) => {
      if (msg.username) {
        setMessages([...messages, msg])
      } else {
        setMessages([...messages, msg.message])
      }
    })

    //...
    // more handlers below

  }, [messages, currentUserId, typingUsers, dispatch, props.socket, props.history])

Material-UI

Relakqs uses Material-UI for styling. Making custom styling when the default styling needs changes is very easy by using the makeStyles hook. Some of Material-UI's pre-styled components like Divider and collapsing menus Collapse were also used, which allowed me to spend the bulk of my time working on the chatting features.

Relakqs logo animation

Backend Overview

Relakqs uses a PostgreSQL database with a Flask server, which communicates with the client using Flask-SocketIO. Below are the backend technologies that make this application possible.

Backend Technologies Used

Flask

Using Flask allowed me to get the server up and running very quickly with its simple and easy to understand syntax. Making a jwt token validator was very easy with Python's function decorators.

Flask-SocketIO

The most involved portions of the backend of relakqs come from Flask-SocketIO. As mentioned above, most of the communication between the client and server happens using socket.io and Flask-SocketIO. The use of Flask-SocketIO's custom event handler's is what allows relakqs to handle multiple types of events instantly.

Flask-SocketIO message event handler

@socket.on('message')
def message_sender(data):
    tokenObj = jwt.decode(data['authToken'], Configuration.SECRET_KEY)
    sender = User.query.filter_by(id=tokenObj['user_id']).first()
    message = data['message']

    new_msg = Message(
        messager=sender,
        container_id=data['channelId'],
        message=message,
    )

    db.session.add(new_msg)
    db.session.commit()

    room = int(data['channelId'])
    send({'msg': {'message': message,
                  'messageId': new_msg.id,
                  'userId': sender.id,
                  'username': sender.username,
                  'avi_url': sender.avi_url,
                  'bio': sender.bio,
                  }
          },
         broadcast=True,
         room=room
         )

PostgreSQL

Relakqs uses a PostgreSQL database, and uses the ORM SQLAlchemy to access and update it. Using table relationships with postgres was crucial in querying the database, and making CRUD operations easy to implement.

Conclusion and Further Development

Developing Relakqs was one of the most exciting full stack solo projects I have worked on! The use of socket.io with this application's architecture may be somewhat novel, as it was difficult to find examples of others doing the same. This made it a really fun challenge to piece together how to make relakqs work using a variety of examples. It was this project that made me really love working with Flask and socket.io.

Further Development: I have a somewhat exhaustive list of features and some ideas for features in the futures found Here!

u made it to the end of the page! thanks for reading ;)