Garrett Conn

This code represents a full-stack implementation of a game list viewer using React and a Netlify serverless function to fetch data from Google Sheets. The backend component (exports.handler) is a Netlify serverless function that securely manages the connection to Google Sheets. It uses environment variables to store sensitive API credentials and accepts a sheet name parameter through query parameters, allowing dynamic selection of different game lists. The frontend component (GameList) is a React component that presents the data in a paginated, interactive interface. It features a toggle system between two different game lists ("Personal" and "Most Influential") using styled buttons, and displays games in a responsive layout with 20 items per page. The component implements pagination controls for navigating through the list and uses Chakra UI for consistent styling. The two parts communicate through the fetchSheetData function, which makes API calls to the Netlify function endpoint, passing the selected sheet name and receiving the corresponding game data. This architecture ensures secure API key handling while providing a smooth, responsive user experience for viewing and navigating between different game lists.