Introduction

Hi there! I'm moving from North America back to Japan, and as a token of appreciation for all the amazing people I've met here, I decided to host a free garage sale.

Rather than just using a spreadsheet, I thought it would be nice to build and share a dedicated web page for the garage sale. So, I created one using Cursor (an LLM-powered dev environment) and Google Spreadsheet, displaying the item list on my portfolio site.

The result? A fully functional, nicely styled web page—built in just about 2 hours. Here's how I did it.

👉 Final site: https://www.kenimamura.com/garage-sale

Tech Stack

Cursor (LLM-based coding and dev environment)
Google Sheets API (for item data source)
Vercel (hosting)
Next.js (frontend framework)
Tailwind CSS (styling)

Workflow Overview

Step 1: Building the Garage Sale Item Page

1. Fetching Data via Google Sheets API

Installed necessary packages like googleapis
Wrote utility functions to fetch data server-side
Configured the Google Cloud Console:
- Created a new project
- Enabled the Sheets API
- Created a service account and downloaded its key (JSON)
- Shared the spreadsheet with read access to the service account

2. Creating the Item List Page

Built the page using Next.js components
Styled it using Tailwind CSS for a clean, responsive layout

3. Authentication & Error Handling

Resolved net module errors from client-side calls
Created an API route to handle authentication on the server
Switched from @google-cloud/local-auth to service account authentication

4. Environment Variable Setup

Configured .env.local with spreadsheet ID and credentials
Verified JSON key file placement

Step 2: Adding Search and Filter Features

1. Search Bar Implementation

Enabled search by item name and description
Case-insensitive and updates results in real-time

2. Status Filter (On Sale / Sold Out)

Added dropdown to filter item status
Works in combination with search input

3. UI/UX Enhancements

Search bar and filter aligned horizontally (stacked vertically on small screens)
Modern input styling with hover and focus effects

Results & Reflections

Thanks to Cursor and AI-assisted coding, I was able to create a polished and useful site in just two hours.

Even if you're not a seasoned web developer, tools like Cursor can help you build practical, real-world solutions quickly.

If you ever want to create something meaningful for a farewell or gratitude event, this kind of project might be a great idea to try.

Live Site

👉 https://www.kenimamura.com/garage-sale

Feel free to grab anything you like—everything is free!