subiendo producto final

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "keyword-spacing": 1,
+    "space-before-function-paren": [1, "never"],
+    "eqeqeq": 1,
+    "space-infix-ops": 1,
+    "comma-spacing": 1,
+    "brace-style": 1,
+    "no-multiple-empty-lines": 1,
+    "camelcase": 1,
+    "func-call-spacing": 1,
+    "key-spacing": 1,
+    "semi": 1,
+    "no-floating-decimal": 1,
+    "no-multi-spaces": 1,
+    "object-property-newline": 1,
+    "padded-blocks": [1, "never"],
+    "space-before-blocks": 1,
+    "space-in-parens": 1,
+    "spaced-comment": 1,
+    "quotes": [1, "single"],
+    "id-length": [1, { "exceptions": ["i", "j", "x"] }],
+    "indent": [1, 2],
+    "no-array-constructor": 1
+  }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,25 +1,24 @@
-# E-commerce
+# Nerd Bookstore
+**Nerd Bookstore** es el demo de una tienda online de venta de libros, cómics y mangas, cuyo sitio web es una Single Page Application (SPA).
 
-* **Track:** _Especialización Front-end_
-* **Curso:** _CONSTRUYE UNA SINGLE PAGE APP (SPA) MULTI-USUARIO CONSUMIENDO DATA REMOTA_
-* **Unidad:** _Producto final_
+## Desarrollo
+Para crear Nerd Bookstore partimos por utilizar un web scraper hecho por nosotras para recopilar los datos desde Book Depository (puedes verlo [aquí](https://github.com/malditoprotozoo/bookScrape)).
 
-***
+Nuestro proyecto cuenta con cuatro vistas diferentes y para desarrollarlas utilizamos la librería [Sammy JS](http://sammyjs.org/) y su plugin para el uso de templates.
 
-## Flujo de trabajo
+Para almacenar la información de compra utilizamos Local Storage a través de un plugin del mencionado Sammy.
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+## Templates
 
-2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar
-   es `git clone` y su estructura normalmente se ve así:
+* La vista inicial corresponde a todos los items disponibles:
+![All Items View](assets/img/all-items.png)
+* Al hacer click en un producto se pueden ver más detalles sobre el mismo y además se entrega la opción de comprarlo en Book Depository:
+![Item Detail View](assets/img/item-detail.png)
+* El carro de compras es otra vista. En él se pueden encontrar todos los productos que han sido agregados, con su título correspondiente, la cantidad y el precio total.
+![Cart View](assets/img/cart.png)
+* Para las búsquedas desarrollamos otro template, similar a la vista inicial, con la diferencia de que sólo muestra los items que se corresponden con la búsqueda:
+![Search View](assets/img/search.png)
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
-
-3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
-
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` y también desplegar tu web a Github Pages :smiley:.
+## Desarrolladoras
+* Leticia Ferreira /helvette/
+* Victoria Tori Rodríguez /malditoprotozoo/

assets/css/main.css

@@ -0,0 +1,100 @@
+body {
+  overflow-x: hidden;
+}
+
+/* sección de productos */
+body #products {
+  margin: 0;
+  margin-top: 2em;
+  padding: 1em;
+  position: relative;
+}
+
+
+/* card */
+body #products .card {
+  position: relative;
+  padding: 1em;
+  height: 500px;
+  font-size: 14px;
+  border-radius: 0;
+  border: 1px solid #332C1F;
+  box-shadow: 7px 7px 0px 0px #332C1F;
+}
+
+body #products .card:hover {
+  bottom: -7px;
+  right: -7px;
+  box-shadow: 0px 0px 0px 0px;
+}
+
+body #products .item.col {
+  margin-bottom: 3em;
+  max-width: 250px;
+}
+
+/* imagen de card */
+body #products .item.col .item-image {
+  text-align: center;
+}
+
+body #products .item.col .item-image img {
+  width: 160px;
+  height: 260px;
+  object-fit: cover;
+}
+
+/* cuerpo de card */
+body #products .card .card-body {
+  padding: 20px 0;
+}
+
+/* título card */
+body #products .card .card-title {
+  font-size: 16px;
+}
+
+/* subtítulo */
+body #products .card .card-subtitle {
+  font-size: 14px;
+}
+
+/* botón de card */
+body #products .card .btn {
+  position: absolute;
+  bottom: 20px;
+  width: 25%;
+  padding: 8px 0;
+  background-color: #0FAAB1;
+  color: white;
+}
+
+body #products .card .btn:hover {
+  background-color: #EB265D;
+}
+
+/* precio */
+body #products .card .item-price {
+  position: absolute;
+  bottom: -1px;
+  right: 14px;
+  padding: 10px;
+  background-color: #FF9326;
+  color: white;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+/* links */
+body #products a {
+  color: #0FAAB1;
+}
+
+body #products a:hover {
+  color: #EB265D;
+}
+
+/* otros de card */
+body #products .card hr {
+  margin: 0;
+}