Revue

#products #vue #js #tech


























This is a continuation of an ongoing project, for the introduction, visit Part 1 



The tool aims to analyze the results of an import/export process from Google sheets into the PostgreSQL database. The tool is primarily javascript based, and connects to the database server, fetches and parses raw data from spreadsheets, then finally, matches and maps the data to the corresponding employee or office.

Overview


    Who is the tool for?


  • Adminitstration Staff

  • Business management

  • Record keeping staff

    What does the tool do?


  • Locates Discrepencies

  • Evaluates Success Rates

  • Validates and Support

    Why does this help?


  • Ensures accuracy

  • Reduce staff hours

  • Supports growth

Where does a tool like this allow us to go? It allows a management company to add to the number of offices they simultaneously support, or a school to reduce the labor hours required of teachers and hired administration staff.

How does it make life easier? To start, having professionally built tooling in place allowed for one customer to extract 100,000s of data points effortlessly and generate consistent results with confidence. Doing so allowed them to scale their process to support dozens of practices each with a growing amount of data.

When do you know your business is ready for such tooling? It could be when regulatory constraints require a higher level of detail for submissions, or everyone at the office is busy writing macros and queries to meet report deadlines. Whenever it is, you'll know because you ended up here reading it.

In-depth Technical Dive


Connecting securely to the spreadsheet API, OAuth2 protocol fit every need for a one-off CLI authentication flow.

The data points represented an employee or office-level performance ratings corresponding to a date and a customizable KPI in a set of metrics being tracked to improve operations.

Now comes the interface, we used Vue.js to build this tool because it is fast, thin, and expressive. Dynamic tables, props, and vuex store management allowed quickly create a stunning UI and responsive experience when examining collisions and misfires from the data set.

The tool's backend is nearly serverless and has the potential to run headless anywhere that has a javascript runtime. Requests from vue to the server are handled and expressed to the administrator with ease because of how the actions and vuex store handle state properties. This allows for a better understanding of what's going on and prevents the user from confusion or falling into pitfalls.

The reusability of Vue components allowed parts of the interactive interface to be aggregated neatly into a report as a PDF for saving and printing. Doing so assists with your responsibilities as a business and helps operations run as lean as possible. The outcome is having fewer conflicts in your data and major increase to the overall reporting process efficiency.