TechElectron Dashboard

TechElectron Dashboard

a dashboard made with Reactjs for displaying and accepting data.

24

The problem TechElectron Dashboard solves

It is challenging to track and visualize when working with a lot of data. It can be demonstrated in an appropriate way using graphs, tables, and pie charts.

Challenges I ran into

  1. I was given a task to implement a functionality to create a pdf of labels (6*2) from a table of labels, but the problem was that I had to start printing in pdf from the index that users choose from all the data that is selected by the user. For example, if the user chooses index 5 then I have to show the next labels that are 12-5 = 7. The labels earlier should be blank with just gray borders. I solved this by creating a modal containing a template of how the pdf will look, in which just empty labels were present, and when the user selected any index, I stored it in a react state. Further, I have used react pdf make library for this purpose.
  2. I became stuck in calling API repeatedly in each component, making my code harder to read. By creating a combined function for API calls in the utils folder, I was able to solve this problem with just one line of code.
  3. Using the state and city APIs was challenging because I was directly passing data into the city API without modifying it using the corresponding filters. Later on, I created an object for storing it and then passed the state credentials.

Discussion