verajpatel / ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.

Project Information

This is a project that spans from the beginning of the semester to the end, which is 15 weeks. Throughout those 15 weeks, the designer's task is to create a pattern library for a e-commerce website that sells a certain demographic of items online. It can range from anything from figurines to bubbles. You will begin by figuring out what your brand and what you want to sell, as well as wire framing the looks of the website. After that, through the weeks, you will be building your pieces of the website, bit by bit each week.

About Eggheads

Eggheads is a company that sells many different eggs. Many of these eggs can be used for many things, such as cooking, breeding purposes, or because you want a pet. Many rare and amazing eggs could be sold online, ranging from a chicken, to a dinosaur of your own choosing.

Before Eggheads became the Eggheads many people know of, it was previously called Yolk for Folk, which started up in 1974 as a black market/small secret shop for eggs alike. The original owner of the company, Alexander E. White, wanted to share the discovery of eggs with the entire world, so he created this company to spread the world of eggs.

Installation

The pattern library is a Jekyll & Patternbot based application, so it requires certain programs to be installed for the pattern library to function. Ruby is one of those programs that is installed.

☛ Follow these instructions to get Ruby & Bundler installed

Initialize Ruby & Bundler

1. Begin by forking and cloning the "ecommerce-pattern-library" repository from the website.
2. After forking the repository, begin by creating a file called ".ruby-version", adding just the numbers "2.6.2"
3. Navigate to the correct folder in Terminal. Use GitHub Desktop’s Repository > Open in Terminal command to open the repository's Terminal page.
4. Type the following command bundle init

Gemfile

1. Once you return to your repository, there is a file called Gemfile.
2. Add the following code to your Gemfile before installing Jekyll & Patternbot: gem: "jekyll"

group: :jekyll_plugins do gem "jekyll_patternbot" end

Installing Jekyll & Patternbot

1. Navigate to the correct folder in Terminal. Use GitHub Desktop’s Repository > Open in Terminal command.
2. Type the following command bundle install
3. Configure Jekyll by using Patternbot by creating a config.yml with the following code:

permalink: pretty; theme: "jekyll_patternbot"

---

Starting the server

The pattern library is a Jekyll & Patternbot based application that requires a running Terminal instance.

1. Navigate to the correct folder in Terminal. Use GitHub Desktop’s Repository > Open in Termal command.
2. Type the following command: bundle exec jekyll serve
3. View the functional website at: http://localhost:4000
4. View the pattern library at: http://localhost:4000/pattern-library/

To view the website on Netlify, you can visit the website domain at: [https://thirsty-shockley-543bcd.netlify.com/pattern-library/#brand] (https://thirsty-shockley-543bcd.netlify.com/pattern-library/#brand)

Copyright Notice

The website is used for learning purposes only, instead of creating an actual website. All images and icons used, alongside the logo, belong to the appropriate users. Forking and cloning the website, and changing the code for your own purposes is prohibited.

ecommerce-pattern-library's Issues

No WebPageTest

Pattern library and webpage wouldn't load :(

Last Minute Grades

I have not implemented them physically into the website, but I have created what the follow templates would look like. I am not sure if they would count as grades though. Anyways, the following that are involved are:
Week 10: Homeplate Template
Week 11: Product list page template
Week 12: Product details page template
Week 13: Checkout form page template.

As well as Week 7: Informal browser testing.

@thomasjbradley

Grades for certain parts

@thomasjbradley

Can you check off/check to see if I've done it correctly for the following:

• Images & Cards from Week 4
• Forms & Fields from Week 5
• Headers & Footers from Week 7?

Netlify & Images

Images won't load for my Netlify website. The link is down below.
https://thirsty-shockley-543bcd.netlify.com/pattern-library/#brand

@thomasjbradley

Testing Completion + Grades

Finished testing all the other websites, as well as pinging you in one of them. As well, can you give me the grade for Week 11's "Finalizing Pattern Docs", as I completed it?

@thomasjbradley

Mobile Chrome Browser Testing Issues

Website link does not work, cannot access

Final Grade

This website does not follow the standard qualities of a e-commerce website. The website is heavily incomplete, and there is no information or design used to make this website and promote the brand. Everything about this is broken or there is no to barely any information placed on there, or is styled to look like a proper website. The website itself does not represent the components and the variations needed, nor does it explain everything to someone else. The process was a tough an exhausting experience, trying to create all the components, or link them to one another, but was left a broken mess, or was not linked up properly with the right informaiton.

Quite honestly, the pattern library deserves an F. The website itself is bordering between heavily incomplete to nothingness, with only a few pieces of text and icons just placed on there. Not only that, but when clicking on the link for the pattern library, you can only see spinning gears, nothing else. While the pattern library itself has almost all the items inside, it is not used to its fullest potential, or implemented to the highest degree it can be used.

---

Style & design — 0

The style of the design was supposed to be looking homely, almost like you're on a farm. The lines and words about the website and the product were supposed to reflect the atmosphere of the website itself. However, due to technical issues, and confusion/uncertainty of creation, there is no style and design with the final website, only nothingness.

Patterns — 0

Multiple patterns with the pattern library have been created for the website. Not only that, but they can be duplicated or change to work with the flow with the website and all of the links. However, many of the patterns or HTML tags were not used in the physical website, or contradicts with one another due to color problems.

Git and Commits — 1

The commits were decent messages explaining what the general task was done. However, one message were used for every single change instead of one change at a time.

Sematics — 1

Very little HTML tags were used in the assignment. Mainly basic tags were used, as well as some grid and type tags used.

Git and Commits — 2

Although the explanations were not clear of the website, most of them are found in the pattern library. They are quick to explain what the tab is all about, as well as information about the website in general.

---

4/24 — 16.6666666667%

@thomasjbradley

Firefox mobile homepage

Webpage is inaccessible and nothing in the library is loading.

testing

@tomasjbradley there was no home page to go to and in the pattern library nothing loaded in opera all the patterns were showing up as gears and when i clicked on the arrow to issolate a pattern in a seperate tab i got a page not found error

More grades for certain parts

Could you enter grades for the following parts:

Week 6: Informal accessibility testing.
Week 9: Showing codes with layouts, Building pages with patterns, The leftovers
Week 10: Preparing product data, Jekyll generators.
Week 11: Finalizing product docs.

@thomasjbradley

Opera Mobile pattern library issue

Unfortunately not much for me to look at, you must have a link broken somewhere cus all I'm seeing are gears.

Edge Testing

@thomasjbradley

No content displayed.
On both popping content out and in the pattern library.

Even the 'Brand' page on your pattern library was blank. I think this is caused by missing or corrupted .yml files.

Netlify Website Not Working

@thomasjbradley

There are problems with my pattern library Netlify link, mainly the images in the pattern library not loading, and the website url not physically loading the website, only giving an error.