Overview — Web Scraping
The process began by identifying relevant websites containing the necessary data, then searching their HTML structure using classNames and IDs. A dataSelector variable stored key-value pairs for easy DOM element access.
A GET request retrieves HTML content and parses it as JSON using JSDOM. The code loops through responses checking for matching key-value pairs, adding new players to a tableData array. Finally, a database endpoint stores the collected information for frontend display.
Frontend and Cron Jobs
The primary function of this project is to provide users with up-to-date information. Vercel's cron job automation monitors the source website for changes and updates the database when differences are detected.
Card Slider
The card slider component enables the display of the top 5 players, with options for sorting by various metrics. Embla was used for customization and auto-scroll functionality.
Data Table
The table provides search functionality, filtering by defensive and offensive points, and sorting options. ShadCN was used for performance optimization and accessibility features.