Manoa Xchange

Overview

Living on campus tends to be a short lived experience. Many students either move into off campus housing or go abroad after finishing their degree(s). Lots of campus specific goods are built up, and there is a need for a marketplace where students can buy and sell them. Introducing Manoa Xchange, a convenient marketplace application that does just that! For more information continue reading or check out our organization page.

Goals

Large masses of students quickly come and go in the dorms of UH Manoa. This leads to lots of campus specific items that are discarded by previous students. Our goal is to create an application that helps to promote and incentivize buying and selling goods between the students of UH Manoa. This allows students to reuse and repurpose items that were used by other students, reducing the amount of items that were going to be discarded.

What our Application provides

Our application provides a marketplace for students to purchase and sell goods. Anybody can browse the marketplace, and can easily search the marketplace by using a search bar or using one of many premade filters. However, there is more site functionality when people log in as a User (aka UHM student). Users are able to browse the marketplace, and are able to browse sellers and their user profile page (that lists the user’s wares and rating). Users are also able to order/offer/buy goods from the marketplace, and create/list goods on the marketplace. Users are also able to report users and/or items on the markertplace. Admins are able to remove items on the marketplace that are deemed as unsafe, inappropriate, or illegal.

Deployment

You can access our (in working) deployed website here: Manoa Xchange

User Guide

The following sections provides a walkthrough of ManoaXchange’s user interface and application features. As this project is in development, every page is accessible but not fully functional.

Landing Page

This page is visible to people who first land on the site and contains a welcome message for everyone.

Not Logged In

If you are not logged in, then you will have a landing page with ‘shop’ and ‘categories’ as navbar options. Also, there is a sign up prompt underneath the welcome message. Landing Landing

Logged In

If you are logged in as a user, then the navbar will have an added ‘sell’, ‘sellers’, and ‘my items’ option. Admin accounts have all that was stated previously with an addition ‘ADMIN’ option. Logged In User

New users without an account can sign up on this page. SignUp

Users with an existing account or after registering, users can now login to the site on this page. SignIn

Shop Page

The shop page is available for anybody, and it shows items. There is also a side menu where users can select what category they are interested in or they can search for items. Shop Shop

Admin

The admin can see all of the users, and all of the items. Reports will be displayed on the admin’s home page. Admin Admins can remove items by clicking on the red button in the Remove column. Admin Remove Admins can also dismiss reports by clicking on the blue button in the Dismiss column.

Item Page

The item page contains all of the information about the item. The item can be reported, and the user can message the seller.

Reporting Button

When the user clicks on the inappropriate item text, there is a pop-up where a report can be submitted. Report

Message Seller

Messaging the seller will show a confirmation message, and upon clicking Message an email will be sent to both the buyer and the seller.

My Items Page

There is also a My Items page, where users can see the items that they put up for sale, and they can edit, mark as sold, or remove the item by clicking on the options dropdown button.

Sell Page

Users can post items for sale. Sell Item

Sellers Page

Users can view a collection of other user profiles that have items for sale. Sellers

Profile

Each member has a profile page that can be visited by other users.

Sellers Profile

Profiles visited by other users. Users have the ability to give users ratings based on how they feel about the him/her. Other users can also view the items that are being sold by that specific user.

Development History

The following sections document the development history of ManoaXchange.

Milestone 1 - Basic Necessities

For the first milestone, the goal is to create the mockup pages, and creating the basic schema of the items. Milestone 1 was managed using Manoaxchange GitHub Project Board M1

Milestone 2 - Connecting Databases & Refining UI

For the second milestone, the goal is to polish up and refine our application. Existing pages will look less bare with additional CSS/bootstrap properties, and our collection database will have connections between each other and function correctly. Milestone 2 was managed using Manoaxchange GitHub Project Board M2

Milestone 3 - Finish Implementing Rating and Seller’s Page & Refine UI

For the third milestone, the goal is to finish implementing the last features and refining the user interface. On top of that, community feedback will be need to ensure user friendliness and usability. Milestone 3 was managed using ManoaXchange Github Project Board M3.

Team Members

Manoa Xchange was designed and implemented by Nicholas Kaw, Gian Portillo, and Giorgio Tran. Since this project was not supervised by a project manager, all members contributed and adhered to the Team Contract.

If you have any comments or questions, feel free to contact us on our via GitHub or email:

Community Feedback

Here’s a link to our Community Feed Form

Manoa Xchange is a website that is made by us for our community members. We’ve asked some community members what their opinion about Manoa Xchange is. Here are some of their thoughts:

I can see the potential of this application. It reminds me of Facebook marketplace, but for UH students. I think there are several improvements or features that could be added to improve the experience of the users. For example, adding a stock system when selling items in bulk, or adding another box for sellers to write their preferred method of delivery (meeting on campus, etc.). Overall, this application is really useful and would allow students to buy/sell items to each other really easily.

– Micheal Tran, Biology

I enjoy the idea of creating a buying/selling website which will cater towards only University of Hawaii students/alumni. The good thing about choosing a specific target, which will most likely be dorm students, is that getting items will be convenient/accessible. Also, having the variety of categories this website includes will make it easier for people to look up or sell items. Lastly, the website is very simplistic to know where to find items, without being distracted/confused by unnecessary imagery. One improvement that could be made is when more items are added to the website, specifically in each category, there doesn’t seem to have some sort of organization of how items are listed. This could create the issue of being overwhelmed when you browse through the .

– Paul Derick Cabuyao, Biology

Overall the users liked the idea of having an online marketplace where students can buy or sell goods. There was positive feedback in regards to user friendliness of the site and some of the UI/UX decisions. One user also liked the ‘Report as inappropriate’ button. In regards to functional improvements, the users suggested:

Adding an item count and an option for sellers to select their preferred method of delivery
More categories, and the ability to have items in multiple categories organized alphabetically
Have an internal messaging system instead of communication only happening via email

These are all valid concerns and can definitely be implement in the future. To add on to one of the suggestions, there could potentially be an internal messaging system that uses the Gmail API to inform users that they have received messages, similar to Reddit.

Developer Guide

Meteor

Install meteor. Please follow the instructions from the Meteor Documentation

API Credentials

Gmail API

Create a Gmail account to be used for the project
Follow the instructions in the section Gmail API Setup in Node.js on this guide to obtain credentials
Keep note of: Client ID, Client Secret, and Refresh Token. They will be used as environmental variables.
Enable the Gmail API

Cloudinary API

Create a Cloudinary account
Log in, go to Settings → Upload, and add an ‘Upload Preset’
Adjust settings if desired, and continue by pressing ‘Save’
Keep note of the upload preset’s name
Going back to the home page, keep note of: Cloudinary URL, Cloud Name, API Key, and API secret. They will be used as environmental variables.

Running Application

Clone the application to your local machine
Navigate to the root directory of the application and enter cd app in the terminal to navigate to the app directory
Run meteor npm install
Inside of the config directory create a file called settings.devauth.json. This file will be gitignored, and it contains default data to be loaded as well as Gmail and Cloudinary secrets.

In settings.devauth.json paste the following code:

 {
   "defaultAccounts": [
     { "email": "kawn@hawaii.edu", "password": "changeme", "role": "admin" },
     { "email": "gtp@hawaii.edu", "password": "changeme", "role": "admin" },
     { "email": "ttran2@hawaii.edu", "password": "changeme" }
    
   ],
    
   "defaultItems": [
     { "name": "Organic Chemistry 7th Edition", "image":  "https://via.placeholder.com/500.png?text=Item", "price":  20.00, "owner": "kawn@hawaii.edu", "description":  "Brand new, only used for one semester.", "category": "Books",
       "sold": false
     },
     { "name": "Keyboard", "image": "https://via.placeholder.com/500.png?text=Item", "price":  30.00, "owner": "kawn@hawaii.edu", "description":  "Brand new, all keys are functional.", "category": "Electronics",
       "sold": true
     },
     { "name": "Bike", "image":  "https://via.placeholder.com/500.png?text=Item", "price":  20.00, "owner": "gtp@hawaii.edu", "description":  "Brand new, only used for one semester.", "category": "Transportation", "sold": false },
     { "name": "Dish", "image":  "https://via.placeholder.com/500.png?text=Item", "price":  20.00, "owner": "gtp@hawaii.edu", "description":  "Brand new, only used for one semester.", "category": "Housewares", "sold": true },
     { "name": "Tshirt", "image":  "https://via.placeholder.com/500.png?text=Item", "price":  20.00, "owner": "ttran2@hawaii.edu", "description":  "Brand new, only used for one semester.", "category": "Clothing", "sold": false },
     { "name": "Some random stuff", "image":  "https://via.placeholder.com/500.png?text=Item", "price":  20.00, "owner": "ttran2@hawaii.edu", "description":  "Brand new, only used for one semester.", "category": "Miscellaneous", "sold": false }
   ],
    
   "defaultProfiles": [
     { "email": "kawn@hawaii.edu", "firstName": "Nicholas", "lastName": "Kaw", "bio": "Econ Major, Ics Minor", "picture": "https://github.com/nickkaw.png", "owner": "kawn@hawaii.edu" },
     { "email": "ttran2@hawaii.edu", "firstName": "Giorgio", "lastName": "Tran", "bio": "Kinesiology Graduate, Ics MD", "picture": "https://github.com/.png", "owner": "ttran2@hawaii.edu" },
     { "email": "gtp@hawaii.edu", "firstName": "Gian", "lastName": "Portillo", "bio": "Ics Major", "picture": "https://github.com/.png", "owner": "gtp@hawaii.edu" }
   ],
    
   "gmailAuth": {
     "TYPE": "OAuth2",
     "USER": "<gmail-email>",
     "CLIENT_ID": "<gcloud-client-id>",
     "CLIENT_SECRET": "<gcloud-secret>",
     "REFRESH_TOKEN": "<gcloud-refresh-token>"
   },
    
   "REDIRECT_URI": "https://developers.google.com/oauthplayground",
    
   "CLOUDINARY_URL": "<cloudinary-url>",
   "CLOUDINARY_NAME": "<cloudinary-name",
   "CLOUDINARY_APIKEY": "<cloudinary-api-key",
   "CLOUDINARY_APISECRET": "<cloudinary-api-secret",
   "CLOUDINARY_UPLOADPRESET": "<cloudinary-uploadpreset>"
    
 }

Change the Gmail and Cloudinary credentials with your own
Navigate back into app via the terminal
Run meteor npm run start

This is the result of successfully starting the application:

 giorgio@Giorgios-MacBook-Air app % meteor npm run start
    
 > meteor-application-template-react@ start /Users/giorgio/repos/manoaxchange/app
 > meteor --no-release-check --exclude-archs web.browser.legacy,web.cordova --settings ../config/settings.devauth.json
    
 [[[[[ ~/repos/manoaxchange/app ]]]]]          
    
 => Started proxy.                             
 => Started HMR server.                        
 Browserslist: caniuse-lite is outdated. Please run:
   npx browserslist@latest --update-db
   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
 Browserslist: caniuse-lite is outdated. Please run:
   npx browserslist@latest --update-db
   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
 => Started MongoDB.                           
 I20221129-13:56:19.926(-10)? Creating the default user(s)
 I20221129-13:56:19.934(-10)?   Creating user: kawn@hawaii.edu.
 I20221129-13:56:19.999(-10)?   Creating user: gtp@hawaii.edu.
 I20221129-13:56:20.063(-10)?   Creating user: ttran2@hawaii.edu.
 I20221129-13:56:20.125(-10)? Creating default items.
 I20221129-13:56:20.126(-10)?   Adding: Organic Chemistry 7th Edition (kawn@hawaii.edu)
 I20221129-13:56:20.148(-10)?   Adding: Keyboard (kawn@hawaii.edu)
 I20221129-13:56:20.149(-10)?   Adding: Bike (gtp@hawaii.edu)
 I20221129-13:56:20.150(-10)?   Adding: Dish (gtp@hawaii.edu)
 I20221129-13:56:20.150(-10)?   Adding: Tshirt (ttran2@hawaii.edu)
 I20221129-13:56:20.151(-10)?   Adding: Some random stuff (ttran2@hawaii.edu)
 I20221129-13:56:20.153(-10)? Creating default profiles.
 I20221129-13:56:20.153(-10)?   Adding: kawn@hawaii.edu (kawn@hawaii.edu)
 I20221129-13:56:20.172(-10)?   Adding: ttran2@hawaii.edu (ttran2@hawaii.edu)
 I20221129-13:56:20.172(-10)?   Adding: gtp@hawaii.edu (gtp@hawaii.edu)
 I20221129-13:56:20.212(-10)? Monti APM: completed instrumenting the app
 => Started your app.
    
 => App running at: http://localhost:3000/
    

The application can be accessed via https://localhost:3000/

Quality Assurance

For quality assurance, eslint is used in order to standardize the overall style of the code.

cd into the app directory and run meteor npm run lint

There should not be any errors that show up, and this is an example of what it looks like with no errors:

 giorgio@Giorgios-MacBook-Air app % meteor npm run lint
    
 > meteor-application-template-react@ lint /Users/giorgio/repos/manoaxchange/app
 > eslint --quiet --ext .jsx --ext .js ./imports && eslint --quiet --ext .js ./tests
    
 giorgio@Giorgios-MacBook-Air app %