Planet Wine 🍷

Team Members: Karen Mok, Steven Lai, Jianming tu, Wayne Lee, Kalvin Tang

An eccommerce website to order wine!

Roles:

Project Lead: Karen Mok

• WireFrame: Karen, Steven, Kalvin

• HTML: Kalvin, Karen, Wayne

• CSS: Karen, Steven, Kalvin, Jimmy

• Javascript: Wayne, Jimmy, Steven

• Github to do list: Everyone

Site Description & Purpose

Functional:

• Login/Register- Where a customer can login or create a new account to the website.

• Navigation- Which will let users easily browse through various pages.

• Shopping cart- will hold the item and tally the price based on the customer selection.

Non-functional:

• Message pop ups after contact and registration if passes form validations
• Sorting/Filtering - Allows a user filter out different wine selections
• User shopping cart interactions - Allows a user to adjust the quantity of the selected item within the cart.

Pages

• Login
• Register
• Gallery
• Landing Page
• Shop
• Cart
• Checkout
• Contact

Designs

Color Palette:

• #f0ece3
• #dfd3c3
• #c7b198
• #596e79

Font Choice:

• link: href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,500;0,700;1,400&display=swap" rel="stylesheet"

Design Principles:

• Contrast
• Alignment
• Repetition
• Proximity

Prototype/Wireframe

Header:

• Navbar (Nav items, Login link, Register link)

Sign In:

• Labels/Inputs: Account & Password
• Login Button
• Sign Up link

Sign Up:

• Labels/Inputs: First Name, Last Name, Email, Address, Password & Confirm Password
• Sign up button
• Sign In link

Landing Page:

• Brand / Logo
• Banner / Carousel
• Heading / Introduction

Gallery:

• Picture gallery with a variety of images

Shop:

• Search
• Filter
• Wine Products (Picture, Types, Price, Name, Descrption)
• Input for quantity(type=number)

Cart:

• Checkout Item list
• Price/Total Price
• Continue Shopping Link
• Checkout Button

Checkout:

• Shipping Info Form
• Submit Button
• Receipt
• Back to Cart Link

Contact

• Feedback Form (Name, Customer Email, Message, Submit)

Footer

• Address
• Social Media

Technology

• HTML
• CSS/SASS/Bootstrap/JQuery
• Javascript
  1. LocalStorage Data Structure: 1: {3}, 3: {4}, 4:{5}, 7:{1} (Key is the wine ID, Value is the quantity purchased)
• JSON (Optional)

References

• Gallery. Images from Walla Walla Vinters