UH Marketplace

Table of Contents

Overview

UH Marketplace is a UH Manoa-exclusive online marketplace designed for students and faculty to buy, sell, and trade items like textbooks, furniture, electronics, clothes, and more. This app fosters sustainability, convenience, and campus connection by allowing only UH-verified users to post and explore listings.

Unlike general platforms like Facebook Marketplace, UH Marketplace prioritizes security, simplicity, and community—every user is authenticated with a @hawaii.edu email, and all transactions are arranged outside the app after users connect through in-app messaging.

Deployment

UH Marketplace will be deployed using Vercel, ensuring fast and reliable delivery of the app. Our project codebase is maintained in GitHub and built using Next.js and Bootstrap 5.

GitHub Pages will be used to host this homepage (uh-marketplace.github.io) with updates about the platform and progress.

ci-uh-marketplace-app

User Guide

  1. Sign Up with your @hawaii.edu email. SignUp

  2. Create a Profile with basic information and contact preferences. Bio

  3. Post Items for sale or trade, including photos, descriptions, and prices. post

  4. Explore Listings using filters for category, price, date posted, and more. image

  5. Favorite Items to save them to your account’s “heart list.” image

Features

UH Manoa Focus

UH Marketplace is deeply integrated with the UH Manoa identity:

Milestones

M1 Project

For Milestone 1 we focused on the visuals of our project to get our skeleton of the project up and running. Completing our landing page, mockup pages, and deploying our application to Vercel were the most important issues we had to complete for milestone 1.

Project deployed to Vercel

Mockup Pages

Landing Page

Explore Page

Profile Page

Favorites Page

Messages Page

M2 Project

For Milestone 2 we focused on core functionality by integrating the database and implementing key user features. Creating the Explore, Favorites, Profile, and Messages pages, enabling users to read and write data, and setting up Playwright tests and CI on GitHub Actions were the most important issues we had to complete for milestone 2.

M3 Project

For Milestone 3, we focused on enhancing the overall functionality and user experience of our application as we approached the final stages of the project. This included refining existing features, addressing bugs, and optimizing performance to ensure a seamless experience for our users. We gathered and integrated real data into our database, allowing us to validate the system’s functionality with realistic scenarios and improve its reliability. These efforts brought us closer to delivering a polished and fully functional product.

Additional Features:

Development

First, install PostgreSQL. Then create a database for your application.


$ createdb nextjs-application-template
Password:
$

Second, go to https://github.com/uh-marketplace/uh-marketplace-app, and click the “Code” button. You can either clone the repo thru Github Desktop or with git clone to download the repo to your local file system.

Third, cd into the directory of your local copy of the repo, and install third party libraries with:


$ npm install

Fifth, create a .env file from the sample.env. Set the DATABASE_URL variable to match your PostgreSQL database that you created in the first step. See the Prisma docs Connect your database. Then run the Prisma migration npx prisma migrate dev to set up the PostgreSQL tables.


$ npx prisma migrate dev
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "<your database name>", schema "public" at "localhost:5432"

Applying migration `20240708195109_init`

The following migration(s) have been applied:

migrations/
└─ 20240708195109_init/
└─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (v5.16.1) to ./node_modules/@prisma/client in 51ms

$

Then seed the database with the /config/settings.development.json data using npx prisma db seed.


$ npx prisma db seed
Environment variables loaded from .env
Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ...
Seeding the database
  Creating user: admin@foo.com with role: ADMIN
  Creating user: john@foo.com with role: USER
  Adding stuff: {"name":"Basket","quantity":3,"owner":"john@foo.com","condition":"excellent"}
  Adding stuff: {"name":"Bicycle","quantity":2,"owner":"john@foo.com","condition":"poor"}
  Adding stuff: {"name":"Banana","quantity":2,"owner":"admin@foo.com","condition":"good"}
  Adding stuff: {"name":"Boogie Board","quantity":2,"owner":"admin@foo.com","condition":"excellent"}
  Adding item: {"name":"Keyboard","condition":"fair","price":199.99,"location":"Campus Center","owner":"john@foo.com","imageUrl":"https://images.unsplash.com/photo-1618384887929-16ec33fab9ef?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","description":"Used Keychron K2 Mechanical Wireless Keyboard."}
  Adding item: {"name":"Laptop","condition":"good","price":899.99,"location":"Hamilton Library","owner":"admin@foo.com","imageUrl":"https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","description":"Lightly used M1 Macbook Air with 16GB RAM and 512GB SSD."}
  Adding item: {"name":"Headphones","condition":"excellent","price":299.99,"location":"Paradise Palms","owner":"john@foo.com","imageUrl":"https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","description":"Sony WH-1000XM4 noise-canceling headphones."}
🌱 Seeding complete

🌱  The seed command has been executed.
$

Running the system

Once the libraries are installed and the database seeded, you can run the application by invoking the “dev” script:


$ npm run dev

> nextjs-application-template-1@0.1.0 dev
> next dev

▲ Next.js 14.2.4

- Local: http://localhost:3000
- Environments: .env

✓ Starting...
✓ Ready in 1619ms

Viewing the running app

If all goes well, the template application will appear at http://localhost:3000. You can login using the credentials in settings.development.json, or else register a new account.

ESLint

You can verify that the code obeys our coding standards by running ESLint over the code in the src/ directory with:

$ npm run lint

> nextjs-application-template-1@0.1.0 lint
> next lint

✔ No ESLint warnings or errors
$

Community Feedback

Quang: “Good: Easy to use UI Bad: Needs to have more options for the user like for example, add like a credibility feature so people don’t get scammed.”

Donnie: “The UI is really clean and easy to navigate. I dont like how it sends you to the add a product page after you register, i think it should send u to the home page. I like how theres a search bar and a favorites page but a small thing is when u look at someones profile all their listings are marked as favorited idk if that was intentional. Another small thing is i think clicking on the picture should also open up the little window but overall very nice.”

Kendric: “Interface is nice, easy to naviagte good colorway, but when adding an item personally, the containers are too close in the profile section.”

Matthew: “I think overall the design is very straightforward and easy to navigate (i like the ui and how listings popup without having to load a new tab), however it may also be too simple. Areas like the top picks section when going to the explore tab could be improved on by including a view count for each item and have them be ranked from highest to lowest for the day. I also think the area for inputting images in the item listing creation area could be simplified by including other ways to input the image besides url (ex: button that leads to opening camera roll or browsing files on the computer). I also feel like the area to expand the listing when browsing could be bigger. The only way to expand the listing is by clicking on the title, however, i think most people would gravitate to clicking on the image instead (which leads to no response).”

Colby: “Unfortunately I was unable to use this application on a computer, so I used by phone instead. Overall I liked how simple the UI was but I feel like the dropdown menu was a little bit bugged, I wish there were more features to interact and message the seller as well.”

Team

UH Marketplace is the result of a collaborative effort by Hargun Juneja, Josh Golez, Erhan Huang, Bryan Nakasone, Koalani Okada, and Jane Davis.

Team Contract

🌈 UH Marketplace – A sustainable way to trade on campus. Built with aloha by UH Manoa students.