MySort
What is this site?
The idea for this site is to have an automatic way to sort through spreadsheet data and rank each entry based on user defined priorities. By default each column is weighted equally and each entry per column is given a 0-100 rating based the high and low value found in each column. Every row is then given an overall average rating (0-100) based on each column score.
Users can weigh each column in a a head to head comparison to give priority and add/suptract weight to each column, affecting the overall rating.
Essentially a user defines an algorithm to sort their table rows.
A color gradient is applied to each column to visualize 0-100 in a red to green spectrum. this allows the user to quickly get a feel for how a row value compares relative to its column.
A user provides a sharable google sheets link and using the google sheets API, the spreadsheet data is imported and displayed in a react material UI sort table.
Calibrations are made via a popup modal and since the application is fully client side rendered in React, results are calculated in the browser and displayed in real time after each adjustment.
Tech used
MySort is a full stack application written in React Hooks and styled with Material UI components. A Node/Express backend to serve the client app and API routes to collect user inputs and facilitate axios calls to the google sheet API.
Routes were tested with Postman.
Build Dependencies Front End
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.1",
"@mui/material": "^5.0.2",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.4",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
Build Dependencies Back End
"dependencies": {
"axios": "^0.22.0",
"dotenv": "^10.0.0",
"express": "^4.17.1"
}
