UH Marketplace

View the Project on GitHub

Welcome to UHM Marketplace

ci-nextjs-application-template

Table of contents

Team Contract

UHM Marketplace Project Team Contract

Deployment

View UHM Marketplace

ER Diagram

Project Pages

We decided to use Linear for issue management instead of the GitHub template.

M1 Project Page

M2 Project Page

M3 Project Page

Playwright-Test

About UHM Marketplace

UHM Marketplace is a comprehensive platform for University of Hawai‘i students and staff to buy, sell, and trade a wide variety of items, from electronics and textbooks to collectibles and accessories. Modeled after popular platforms like Amazon and eBay, UH Marketplace aims to provide users with a seamless and secure shopping experience tailored to the university community.

UHM Marketplace displays various different technologies useful for Software Engineering students such as:

This platform also demonstrates useful design principles and functionalities:

Through these features and technologies, UH Marketplace aims to become an essential platform for buying, selling, and trading within the UH community.

Key Features

User Guide

  1. Getting Started
    • Sign Up
    • Click on the Sign Up button in the top-right corner of the homepage.
    • Provide your email, create a password, and complete the required information.
    • Verify your account via the confirmation email sent to you.
    • Once signed in, you can access additional features like creating listings, managing your profile, and viewing transaction history.
    • Log In
      • Already have an account? Use the Sign In option from the same menu to access your account.
      • Forgot your password? Use the “Forgot Password” link to reset it.
  2. Browse Items:
    • Search Bar
      • Use the search bar at the top of the page to quickly find items by name, category, or keywords.
      • Suggestions may appear as you type for faster navigation.
    • Categories
      • Explore items by categories like Digital HQ, Dorm Life, Self-Care, and more.
      • Categories are accessible through the dropdown menu in the navbar or from the homepage.
    • Filters
      • Narrow your search using filters:
      • Price Range: Set a minimum and maximum price.
      • Popularity: Sort by ratings or number of reviews.
  3. Make Transactions:
    • For Buyers:
      • Add Items to Cart:
    • Click the “Add to Cart” button on the item page.
    • View your cart to adjust quantities or remove items. - Checkout:
    • Proceed to checkout and review your items.
    • Enter your shipping and payment details.
    • Confirm your order to complete the purchase. - Order Tracking:
    • Check the status of your order in your Account Dashboard under the Orders section.
  1. Leave Feedback:
    • Write a Review
      • Go to the Reviews section after completing a transaction.
      • Provide a rating (1–5 stars) and leave a detailed review about the product and/or the seller.
      • Be honest and constructive in your feedback.
    • Read Reviews
      • Check reviews on product pages to learn about other users’ experiences before buying.
      • Use reviews to guide your purchasing decisions.

Community Feedback

We invited five community members to test UHM Marketplace and collected their insights. Below are their thoughts, which helped us understand the user experience and identify areas for improvement.

1. Alex (Student - Regular Online Shopper)

2. Jamie (Faculty - New to Online Marketplaces)

3. Sam (Alumni - Tech Enthusiast)

4. Mia (Undergraduate - Small Business Owner)

5. Ethan (Graduate - Accessibility Advocate)

We will prioritize addressing the suggestions to make UHM Marketplace even better for its users.

Developer Guide

Prerequisites

Step 1: Prepare the Project

  1. Find the BowFolios Template:
    • Google for the template “BowFolios”, which is a web application designed by Cam Moore and Phillip Johnson for ICS software engineering students.
    • Then go to the template’s GitHub page.
  2. Create a New Repository:
    • On the GitHub page, click on “View on GitHub”.
    • Click on “Use this template” and then click “Create a new repository”.
    • Fill out the repository details, such as the repository name, description, and visibility (private/public), then click “Create repository”.

Step 2: Initialize the Postgres Database

  1. Open a terminal window in VSCode:
    • Open your project folder in VSCode.
    • Open the integrated terminal by selecting Terminal > New Terminal or using the shortcut Ctrl+`.
  2. Create the PostgreSQL Database: Run the following command to create the bowfolios database in PostgreSQL: 
    createdb bowfolios
    • This command will create a new database named bowfolios on your local PostgreSQL server.

Step 3: Configure the .env file

  1. Copy the sample.env File:
    • Copy the file sample.env (which is already provided in the project template)
    • Rename the copied file to .env
  2. Edit the .env File:
    • Open the .env file in VSCode and modify the DATABASE_URL connection string to match your PostgreSQL setup. It should look like this: 
      “DATABASE_URL=postgresql://<username>:<password>@localhost:5432/bowfolios?schema=public”
    • Replace and with your actual PostgreSQL username and password.
    • If your PostgreSQL server is running on a different port, adjust the port number (default is 5432)

Step 4: Initialize Prisma

  1. Install Dependencies:
    • Before initializing Prisma, you need to install the necessary dependencies. Run the following command in the terminal: 
      npm install react-bootstrap prisma @prisma/client next-auth react-bootstrap-icons
    • This will install the required dependencies for React, Prisma, Bootstrap, NextAuth, and React Bootstrap Icons
  2. Install Bootstrap CSS:
    • In your pages/app.js(or pages/app.tsx for TypeScript), import Boostrap CSS: 
      import 'bootstrap/dist/css/bootstrap.min.css';
  3. Initialize Prisma:
    • Run the following command to initialize Prisma and generate the Prisma client: 
      npx prisma init

      Step 5: Configure the Database Connection in Prisma

  4. Configure the schema.prisma File:
    • Open the prisma/schema.prisma file.
    • Modify the datasource block to match your database configuration: 
      datasource db {
provider = "postgresql"  // Change this if using a different database
url      = env("DATABASE_URL")
}
    • This tells Prisma to use the connection URL from the .env file.

Step 6: Migrate the Database

  1. Run the Database Migration:
    • Run the following command to apply the migrations and create the necessary tables in your PostgreSQL database: 
      npx prisma migrate dev
    • This will apply the migration and create tables in the bowfolios database based on your Prisma schema

Step 7: Seed the Database

  1. Seed the Database with Sample Data:
    • To populate your database with sample data, run the following command: 
      npx prisma db seed
    • This command will insert sample data into the database, which is typically defined in the prisma/seed.js (or seed.ts if using TypeScript)

Step 8: Run the Next.js Application

  1. Start the Next.js Development Server:
    • Run the following command to start the development server: 
      npm run dev
    • This will start the Next.js app, and it should now be running locally.
  2. Open the Application in your browser:
    • Go to http://localhost:3000 in your web browser.
    • Check the console for any errors and make sure the new landing page displays correctly.

Get Started

Visit the Marketplace to explore items or Sign Up to create an account today.

Support

Have questions or need assistance? Visit our Help Center or contact support at .

Stay Connected

Follow us on: