UH Jewels

Market place for shell jewelry

Follow me on GitHub

UH Jewels ci-nextjs-application-template

View our organization on GitHub

Table of Contents

Overview

UH Jewels is a web application that allows users to browse and place orders for jewelery displayed on the site. These pieces will be made to order, solving the problem to affordable fashion to UH manoa students. The technologies we will be using include:

User Guide

Home Screen

Welcome to the UH Jewels Homescreen!

Screenshot 2024-12-15 at 1 11 25 PM

When you click the button ‘Shop Jewels’ it will be prompting the user to login in or make an account. That way all of their information and the products they add will be under the same name in the database.

Instagram

When logged in, users can click the button on the top left which takes you to our instagram page.

Screenshot 2024-11-21 at 4 59 31 PM

Customer Login page

Screenshot 2024-12-15 at 1 12 25 PM

Just sign in create an account with your email and a password.

After logging in, it will take you to back to the home page with a Shop Jewels tab. As a user you can either view the products by clicking the ‘Shop Jewels’ button or click the tab in the Nav bar. Screenshot 2024-12-15 at 1 13 55 PM

Products Page

Here you can view the pieces that are listed, viewing the prices and styles available. Screenshot 2024-12-15 at 1 15 03 PM

Add To Cart

To select the products that you want to purchase, simply click ‘add to cart’ on the products that you want and it’ll update your shopping cart.

Shopping Cart Page

Screenshot 2024-12-15 at 1 15 52 PM The shopping cart page which can be accessed through the Navbar cart logo or the ‘proceed to cart’ button will show you to your updated cart and its total. Users are also able to edit their cart by removing or adding the quanitity. Click the ‘Proceed To Payment’ Button which will take you to the payment page.

Edit Cart Items Page

Screenshot 2024-12-15 161149 This page allows you to edit the quantity of a product.

Payment Page

Screenshot 2024-12-15 at 1 18 56 PM

Complete all the information with your choice of payment. And when finished, click the ‘Continue to Shipping Form’

Shipping Page

Enter your shipping information so we can ship your jewels to your door!

Screenshot 2024-12-15 at 1 21 40 PM

The data inputted will be written into our database and your order will be submitted!

Admin Access

As an administrator, there is an admin exclusive access. Simply login with the admin email account.

Screenshot 2024-12-10 at 11 58 49 AM Screenshot 2024-12-15 at 1 24 15 PM

This access redirects you to the home page with a exclusive ‘List New Products Tab”

Simply list a new products to release onto the site! Screenshot 2024-12-15 at 1 26 50 PM

The newly listed product will immediately be listed and update on the ‘Shop Jewels’ page for the public. Screenshot 2024-12-15 at 1 27 09 PM Screenshot 2024-12-15 at 1 27 21 PM

The new product is updated to the public as a customer is logged into their account

Screenshot 2024-12-15 at 1 29 31 PM

Community Feedback

After getting responses from the UH community, many were excited and showed high interest in the products. The visualization and the design of the website was complimented to be trendy to the young adult audience. One suggestion that a few mentioned were not being used to having a button keep taking them to the next page in order. While this was made to make the shopping experience easier, a few people said they like the old style of just having different logos that would take them to other pages. We did implement the usage of both. Another suggested the usage of videos and more images of the products to be incorporated. Such as the usage of ‘models’ and how the pieces were styled. The logo was also said to be too small it gave some confusion on the brand name. Majority of the suggestions were more about the products and commercializing rather than the actual design of the webiste. Overall, majority enjoyed and thought the webiste was self explanatory.

Developer Guide

This section provides information of interest to developers wishing to use this code base as a basis for their own development tasks.

Installation

Visit the UH Jewels application github page, and click the “Use this template” button to create your own repository initialized with a copy of this application.

Then, cd into the uh-jewels-application-template/app directory and install libraries with:

$ npm install

Third, run the system with:

$ npm run start

If all goes well, the application will appear at http://localhost:3000.

Deployment

Click here to see our Vercel deployment.

Development

Milestone 1: Mockup Development

The goal of milestone 1 was to create a set of HTML pages providing a mockup of the pages in the system. Milestone 1 was managed using UH Jewels GitHub Project Board M1.

Milestone 2

The goal of milestone 2 was to significantly improve the functionality and quality of our application. Milestone 2 was managed using UH Jewels GitHub Project Board M2

Milestone 3

The goal of milesstone 3 was to signicantly improve the functionality of our system from milestone 2, incorperate a significant amount of “real” data into our system, and implement acceptance testing. Milestone 3 was managed using UH Jewels GitHub Project Board M3

Team Contract

View our team contract here.

Team

UH Jewels is designed, implemented, and maintained by Katelyn Sung, Jarren Seson, and Waltz Tuzon.