maddycpierce / ecommerce-pattern-library

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

#Surf 1685 Pattern Library

Version 1.0

A pattern library for a fictitious surf apparel company.

Project Description & Motivation

Throughout the term for Web Development 4 we worked on the design of a complete eCommerce website. Each week we designed different components of the website. In the second half of the term we took all those common components and use them to build out a home page, and a product list page. And finally, near the end of the term, we handed each of our pattern libraries off to one of our class peers who created the product details page and our checkout form page.

I chose to create a pattern library for surf apparel because I have always wanted to surf, and this project provided me an opportunity to learn more about the sport.

Surf 1685's vision is to be known as the top of the market for all surf gear. The website allows surfers of every experience level to purchase items such as wetsuits, swimwear, and cover-ups, while ensuring quality and top-of-the-line trends.

Context

The primary goals to this large-scale assignment are:

1. To think in terms of components and pieces instead of pages—major websites are just made up of many, many small pieces; pages are nothing more than groupings of those pieces To start to think about working with other people, and how to create a system that someone else can step into and take over
2. Pretend in this project that we're the “designer” working on a team-we're creating a system of possible patterns and some example pages Eventually you’ll hand off the whole system to a “developer” (your peer) to finalize the rest of the pages and make the whole thing work
3. To get lots of practice coding—because we need it

Taken from (Learn the Web-Week 2)[https://learn-the-web.algonquindesign.ca/courses/web-dev-4/week-02/#ecommerce-ux]

Installation

The pattern library is a Jekyll & Patternbot based application, so it requires Ruby to be installed.

☛ Follow these instructions to get Ruby & Bundler installed

1. Navigate to the correct folder in Terminal. Use GitHub Desktop’s Repository > Open in Terminal command.
2. Type the following command bundle install

---

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 Terminal 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/

Helpful Links

• The Netlify site.

Contributions & how to get involved

Created by Madeleine Pierce @maddycpierce, with help from Thomas J Bradley @thomasjbradley. To report bugs or offer other assistance, visit issues. To help create parts of this pattern library, follow the installation instructions above.

Collaborators

• @patricia568
• @natduboiss

---

License & copyright

© 2019 Madeleine Pierce
Licensed under the MIT License