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
netmodule errors from client-side calls - Created an API route to handle authentication on the server
- Switched from
@google-cloud/local-authto service account authentication
4. Environment Variable Setup
- Configured
.env.localwith 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!