This is some text inside of a div block.
  • React
  • Google Firebase
  • Redux
  • Tailwind CSS
  • Daisy UI
  • Stream API
  • React Spinners
  • Universal Cookie
  • React Router
  • Font Awesome
  • bcrypt
Project Overview
Chatster is a messaging app which allows users to communicate through direct messages and group messages. This application includes numerous features such as profile personalization, file sharing, authentication, the ability to add and remove friends, and much more. I used a very powerful messaging API named Stream. In this article, I'll walk you through the process I took to integrate the Stream API into my application to create an enjoyable user experience. Enjoy!
Project presentation.

When you access the application for the first time, you will be redirected to the login page. Clicking on the sign up link will direct you to the registration form displayed on the left. Within the register component I created three fetch statements, posting data to Firebase Authentication, Firebase Realtime Database, and the Stream API.

Google Firebase is an API that removes the need to write back-end code. Firebase Authentication takes the user's email and password and attaches a token to it. That information is stored in my Firebase account as a user profile with a unique identifier. Firebase doesn't allow anybody, including myself, the account owner to view the user's password. Firebase Realtime Database takes the data entered by the user, such as display name, phone number, etcetera and creates a profile.  The data within each user profile I will later use throughout the app.

I created a server to take the user's data and configure a new user in the Stream API. The password entered by the user is saved in Stream as a hash through bcrypt. Below you can see the code that I wrote to send user data to Stream. You will notice in the code an api key, secret and id, that was given to me by Stream when I created an account.

When you login to the application your email, password and token is used for authentication. Once Firebase Authentication confirms your credentials another GET request is sent to the Firebase Realtime Database requesting the profile that matches the email inputted when logging in. Once this profile is found a POST request is sent to the Stream API containing your credentials. The Stream API responds with a token, userID, and the other data inputted on the sign up page. This data is stored in cookies so we can use it to connect the user to Stream after we are logged in.
The photo above shows an example of the homepage.

A user can be assigned to one of four roles:

Selecting the create ticket tab on the sidebar will direct you to the page shown above. In my database there is a table entitled bugs that contains all created tickets. When the end user completes the form and clicks on create ticket, a POST API request sends the data to the database as shown below.
The view tickets page contains another chart I created using react-bootstrap-table2. Each row consists of a new ticket, as shown below.

If you click the More details button, a modal will display showing the details for each ticket. I was able to pull the ticket details from the database by using the filter() method. In the filter method I compare the row ID and Title to the corresponding values in the database, then return only that value.

The My Tickets tab contains tickets which have been submitted by the end-user or assigned to the end-user. I retrieved this information from the database by using the user's unique ID number to filter out tickets. This was accomplished by taking the username and comparing it to the values in the Submitter or Assigned Dev's column.
The My Projects page allows the end user to create a new project, provided they are a Project Manager or Administrator. The end user can also view their assigned projects on this page. When an end-user creates a new project, the end-user will be asked to complete the Project Name, Project Description and Assigned Personnel fields. The Assigned Personnel field takes the user ID's of the selected users and inputs them into an array. Below, you can see below the POST API request that I created for exporting this data.

As a default, new users are assigned to the developer position. Only the administrator can change the end-user's role.

At the bottom of the Manage User Roles page you will find a react bootstrap table containing all the users name, email, and current role.

Lastly, for security reasons, I implemented an idle timer. The idle timer triggers a pop-up window after two minutes of inactivity. I used an npm package called react-idle-timer to achieve this functionality. In addition, I also used localStorage to store the end-user's login information. With this extra feature, the end user can open the web browser and be brought back to the current page without having to log back in.

Project Summary

I hope this presentation clarified my thinking process when creating this application. While coding this project, I acquired a large amount of knowledge, including things such as: the integration of the API, breaking down a complex idea into smaller pieces, and how to maintain state using class components and react hooks. My confidence in coding sky rocketed after completing this project and I know this is only the beginning. Don't hesitate to check out the other projects in this portfolio.


Have a project that could use a skilled designer hand? Get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.