This is some text inside of a div block.
  • React
  • MySQL
  • Postgres DB
  • Bootstrap Table 4
  • Node.JS
  • Material UI
  • React Idle Timer
  • bcrypt
  • React Router
Project Overview
The Bug-Tracker application is a ticket management system that enables a group of users to effectively manage problems. This application includes many features such as authorization, role assignment, problem management, data management, etc. In this article, I will walk you through the steps I took to create this application. Enjoy!
Project presentation.

When you access the application for the first time, you will be redirected to the login page. Clicking on the registration link will direct you to the registration form displayed on the left. I created a POST API statement that sends the data to the database and stores this information in two tables.

The Users table stores the username, email, join date, and role. The Login table stores the users email and password. I used a npm package known as bcrypt to encrypt the password as a hash for security purposes. Below shows an example of how these passwords are stored in the database.

A user can be assigned to one of four roles:

Upon first logging in, you will be redirected to the dashboard. The dashboard provides an overview of all tickets within the system. There are four charts in the dashboard titled Tickets By Priority, Tickets By Type, Tickets By Status, and Tickets Assigned to User. I created the charts using an API called react-bootstrap-table2. The data for each graph comes from my database through a GET API request.
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.

Each ticket contains the details listed above. The end user, according to their permission level, can delete, modify, or add comments to the ticket. The History tab provides the end user with a timetable for changes to the ticket.
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.