Inspiration
Someone on a small island can weave a really good basket. But mailing one basket overseas by air costs more than the basket, and it burns a lot of fuel for one parcel. We wanted a store that deals with that; it helps you pick the right thing, it prices in the real cost of getting it to you, and it gives you a discount when lots of orders ship together.
What it does
hopyland is an online store for craft groups on a remote island. It has three parts.
In the recommendation tool, you answer four questions: what the purchase is for (gift, personal, or bulk for a community), how often you'll use it, how many people are in your home, and how much you care about sustainability. The site scores every product against your answers and keeps track of which answer caused each match. An AI then picks the top few and gives the reason, but it can only mention the things the score already matched. So every suggestion tells you exactly why it's there. If your cart already has items from one island group, it leans toward more items from that same group so everything ships in one box.
Pricing that follows the ferry. There's one shared ferry container with a real weight limit. When you check out, the server weighs your cart, checks how full your order would leave the ferry, and gives a discount: 10% off once the ferry is 60% full, 20% off at 85%, plus a small discount for buying five or more. The server decides the final price, so the browser can't fake it. On the product page there's one slider for quantity. It shows the suggested amount and the seller's bulk prices, and it never drops below the price the maker set as their minimum.
The shipping route. The site works out the path from the artisan to the harbor to the port to you, with real distances and the CO2 for each leg, and draws it on a map based on where you are.
How we built it
Next.js and TypeScript for the site, Tailwind for the styling. The data lives in a Supabase Postgres database with nine tables. If the database can't be reached, the app falls back to in-memory data and keeps working. The AI part uses OpenAI's gpt-4o-mini. Sign-in uses a signed cookie. There's a health check endpoint that tests the database and the model. It's hosted on Render and redeploys every time we push.
Challenges we ran into
Keeping the AI honest. The tricky part was making sure it can only explain a pick using reasons the score actually found, instead of making up something that sounds good.
Pricing had to live on the server. The discount depends on the live ferry weight, so we couldn't let the browser work out the total. Moving all of that to the server while keeping the slider fast took a few tries.
The database was missing some columns the scoring needed, so early on every suggestion came back with almost the same reason. We fixed it with a migration and by re-seeding the data on every startup.
Accomplishments that we're proud of
All three parts the prompt asked for actually work and run off a real shared database.
Every suggestion says why it's there. That's built into how it works, not just a label.
The ferry meter is really shared. An order from anyone moves the discount for everyone, and you can watch the row appear in the database.
What we learned
A simple scoring system with a thin AI layer on top is easier to trust and easier to fix than one big model doing everything.
Anything that affects money has to be worked out on the server.
For a demo, being clear about what's real and what's sample data goes further with judges than overselling.
What's next for Shopyland
- Real sign-in emails once we have an email provider set up.
- A better seller page for editing bulk prices and minimums, not just adding stock.
- A separate ferry and weight limit for each route instead of one shared container.
- Real sellers and real product photos to replace the sample catalog and the placeholder icons.
Built With
- gpt-4o-mini
- jose
- next.js
- node.js
- nodemailer
- openai
- postgresql
- react
- render
- supabase
- tailwindcss
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.