Big Update

- Big site UI / styles overhaul, adding many custom styles, shadows, borders, css animations
- Moved some CSSs and deleted redundant files
- Fixed multiple CSS issues with responsive behavior, adding proper mobile styles
- Added site footer and links
- Fixed women/men incorrect name/path

README.md

@@ -29,7 +29,7 @@ My React experience has been on and off as my career led to be a Senior Frontend
 - Cart/Minicart quantity changes + product removal + counter update
 - Categories data comes from Firebase.
 - Code performance improvements:
-  - added `useCallback` to avoid redefininig functions;
+  - added `useCallback` to avoid redefining functions;
   - added `memo` to some components to avoind unnecessary re-renders;
   - added react `lazy` and `Suspense` to App for better bundle/code splitting;
 - Added Unit Test for basic testing + Redux Reducer and Selectors.
@@ -47,18 +47,25 @@ My React experience has been on and off as my career led to be a Senior Frontend
 - Semantic / accessible HTML (course code has divs nested into spans, divs/spans having click events...)
 - Optimized arrays methods, course teaches bad practices doing 2 (or even more) transverse on the same arrays for no reason.
 - Github Actions Workflow implemented to auto-publish when a new version gets pushed to /releases branch
-- Navigation style to be position fixed and with glass effect.
 - Added **Redux-Persist** for minicart with **Redux-Toolkit**.
-- Added Loading element on categories async fecth using **Redux-Toolkit** `createAsyncThunk` approach.
+- Added Loading element on categories async fetch using **Redux-Toolkit** `createAsyncThunk` approach.
 - Added scroll position reset when navigating to checkout
 - Unit Test added with **Vitest** + **Testing-Library** + as I built the project using Vite and not CRA.
+- Site UI / CSS / Styles customized
+  - Navigation fixed position
+  - Minicart shadow, fixed position
+  - Round corners and shadows added on many elements
+  - Implemented proper mobile/responsive behavior/styles
+  - Checkout total element has fixed positions for better UX if having scroll (different between mobile/desktop)
+  - Product card image effect, shadows, corners and button appearing css animation added
+  - Added site footer with bottom position.
 
 ## About the Course
 While I'm still doing the course and plan to finish all modules, I'm not sure I recommend it. I can't judge the React part itself too much, and the course still has its values to introduce many different topics needed for someone wanting to learn React, but I expected way more from it.
 
 On the pure Front-End side of things (proper UX for e-commerce sites, good practices for HTML/JS/CSS, responsive layout) the course **lacks tremendously** and **actually teaches bad practices** (double array transverse, nesting divs inside spans, attaching onClick events do spans/divs...).
 
-Also, the teaching method can be frustrating as it's based on refactoring over and over the same features (without explaining that this was going to happen). This resulted in features being developed with icomplete solutions on a specific approach, and then in a few lessons it was completelly refactored to show another way, but always with some flaw. At the end, it becomes overwhelming and you not clear what is the best way to do XYZ feature.
+Also, the teaching method can be frustrating as it's based on refactoring over and over the same features (without explaining that this was going to happen). This resulted in features being developed with incomplete solutions on a specific approach, and then in a few lessons it was completely refactored to show another way, but always with some flaw. At the end, it becomes overwhelming and you not clear what is the best way to do XYZ feature.
 
 ## What's Next
 My idea is to keep working on this to finish all modules and at the end build a "v2" that resembles more an e-commerce site, with better (AND RESPONSIVE)  UI, more features and refactoring some things the course taught on a way that doesn't seems the best approach according to my readings.

src/components/button/button.styles.scss

@@ -1,10 +1,9 @@
 .button-container {
-  min-width: 165px;
   width: auto;
   height: 50px;
   letter-spacing: 0.5px;
   line-height: 50px;
-  padding: 0 35px 0 35px;
+  padding: 0 30px;
   font-size: 15px;
   background-color: black;
   color: white;
@@ -15,6 +14,8 @@
   cursor: pointer;
   display: flex;
   justify-content: center;
+  border: 1px solid black;
+  border-radius: 8px;
 
   &:hover {
     background-color: white;
@@ -24,11 +25,11 @@
 
   &.google-sign-in {
     background-color: #4285f4;
+    border-color: #4285f4;
     color: white;
 
     &:hover {
       background-color: #357ae8;
-      border: none;
     }
   }
 

src/components/cart/cart-item.styles.scss

@@ -8,6 +8,7 @@
   img {
     width: 30%;
     object-fit: cover;
+    border-radius: 8px;
   }
 
   .item-details {

src/components/cart/minicart.component.jsx

@@ -7,6 +7,7 @@ import { toggleMinicart } from '../../store/minicart.reducer';
 
 import CartItem from './cart-item.component.jsx';
 import './minicart.styles.scss';
+import './../button/button.styles.scss';
 
 // eslint-disable-next-line react/display-name
 const Minicart = memo(() => {

src/components/cart/minicart.styles.scss

@@ -8,11 +8,12 @@
   top: 60px;
   right: 22px;
   z-index: 5;
-  box-shadow: 5px 5px 10px #00000070;
+  box-shadow: 2px 2px 10px #00000071;
   opacity: 0;
   visibility: hidden;
   transition: opacity 150ms ease-in, visibility 0s;
   transition-delay: 0ms, 150ms;
+  border-radius: 8px;
 
   &.to-show {
     opacity: 1;

src/components/category-item/category-item.component.jsx

@@ -5,13 +5,12 @@ const CategoryItem = ({ category }) => {
   const { title, imageUrl, route } = category;
 
   return (
-    <div className='category-container'>
+    <div className='category-container large'>
       <Link to={route} className='background-image' style={{
           backgroundImage: `url(${imageUrl})`
         }}></Link>
         <div className='category-body-container'>
           <h2>{title}</h2>
-          <p>Shop Now</p>
         </div>
     </div>
   );

src/components/category-item/category-item.styles.scss

@@ -5,16 +5,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid black;
-  margin: 0 7.5px 15px;
+  margin: 0 10px 20px;
   overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  box-shadow: 2px 2px 10px #00000071;
+  transition: height .25s ease-in;
 
   &:hover {
     cursor: pointer;
 
     & .background-image {
       transform: scale(1.1);
-      transition: transform 2s cubic-bezier(0.25, 0.45, 0.45, 0.95);
     }
 
     & .category-body-container {
@@ -23,47 +25,52 @@
   }
 
   &.large {
-    height: 380px;
+    height: 230px;
+
+    @media only screen and (min-width: 820px ) {
+      height: 380px;
+    }
+  }
+
+  &:first-child,
+  &:nth-child(1) {
+    min-width: 40%;
   }
 
   &:first-child {
-    margin-right: 7.5px;
+    margin-right: 10px;
   }
 
   &:last-child {
-    margin-left: 7.5px;
+    margin-left: 10px;
+    margin-bottom: 5px;
   }
 
   .background-image {
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
+    transform: scale(1);
+    transition: transform 0.25s cubic-bezier(0.25, 0.45, 0.45, 0.95);
   }
 
   .category-body-container {
-    height: 90px;
-    padding: 0 25px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid black;
-    background-color: white;
+    padding: 10px 15px;
+    background-color: rgba(0, 0, 0, 0.5);
     position: absolute;
-    pointer-events: none;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    backdrop-filter: blur(5px);
 
     h2 {
       font-weight: bold;
-      margin: 0 6px 0;
-      font-size: 22px;
-      color: #4a4a4a;
+      margin: 0 0 2px 0;
+      padding: 0;
+      font-size: 25px;
+      color: #ffffff;
       text-transform: uppercase;
     }
-
-    p {
-      font-weight: lighter;
-      font-size: 16px;
-    }
   }
 }

src/components/category-list/category-list.component.jsx

@@ -4,34 +4,34 @@ import './categories.styles.scss';
 const categories = [
   {
     "id": 1,
+    "title": "women's",
+    "imageUrl": "https://i.ibb.co/GCCdy8t/womens.png",
+    "route": "shop/women's"
+  },
+  {
+    "id": 2,
+    "title": "men's",
+    "imageUrl": "https://i.ibb.co/R70vBrQ/men.png",
+    "route": "shop/men's"
+  },
+  {
+    "id": 3,
     "title": "hats",
     "imageUrl": "https://i.ibb.co/cvpntL1/hats.png",
     "route": "shop/hats"
   },
   {
-    "id": 2,
+    "id": 4,
     "title": "jackets",
     "imageUrl": "https://i.ibb.co/px2tCc3/jackets.png",
     "route": "shop/jackets"
   },
   {
-    "id": 3,
+    "id": 5,
     "title": "sneakers",
     "imageUrl": "https://i.ibb.co/0jqHpnp/sneakers.png",
     "route": "shop/sneakers"
   },
-  {
-    "id": 4,
-    "title": "womens",
-    "imageUrl": "https://i.ibb.co/GCCdy8t/womens.png",
-    "route": "shop/womens"
-  },
-  {
-    "id": 5,
-    "title": "mens",
-    "imageUrl": "https://i.ibb.co/R70vBrQ/men.png",
-    "route": "shop/mens"
-  }
 ]
 
 const CategoryList = () => {

src/components/footer/footer.component.jsx

@@ -0,0 +1,26 @@
+import './footer.styles.scss';
+
+import githubIcon from "../../assets/github-mark.svg";
+import linkedinIcon from "../../assets/linkedin.svg";
+
+const FooterComponent = () => {
+  return (
+    <div className='container footer'>
+      <div className='footer-content'>
+        <span>
+          2024 - React e-commerce demo site (<a href='https://github.com/fleps/clothing-store' className='underline' target='_blank'>repo</a>)
+        </span>
+        <div className='footer-icons'>
+          <a href='https://www.linkedin.com/in/fleps/' target='_blank'>
+            <img src={linkedinIcon} alt='LinkedIn' />
+          </a>
+          <a href='https://github.com/fleps' title='fleps github profile'>
+            <img src={githubIcon} alt='Github' />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FooterComponent;

src/components/footer/footer.styles.scss

@@ -0,0 +1,27 @@
+.footer {
+  background-color: #e7e7e7;
+  padding: 30px 20px;
+  margin: auto 0 0;
+  max-width: 100%;
+
+  .footer-content {
+    width: 100%;
+    max-width: 1440px;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @media only screen and (max-width: 1140px ) {
+    .checkout-container + & {
+      margin: auto 0 53px;
+    }
+  }
+
+  .footer-icons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+  }
+
+}

src/components/login-form/login-form.component.jsx

@@ -5,7 +5,6 @@ import {
 } from '../../utils/firebase/firebase.utils.js';
 import FormInput from '../form-input/form-input.component';
 import Button from '../button/button.component';
-import './login-form.styles.scss';
 
 const defaultFormFields = {
   email: '',

src/components/product-card/product-card.component.jsx

@@ -17,12 +17,12 @@ const ProductCard = ({ product }) => {
     <div className='product-card-container'>
       <div className='img-container'>
         <img src={imageUrl} alt={name} />
+        <Button type='button' style='' label='Add to cart' onClick={addProductToCart} />
       </div>
       <div className='product-footer'>
         <h3 className='name'>{name}</h3>
         <p className='price'>$ {price?.toFixed(2)}</p>
       </div>
-      <Button type='button' style='' label='Add to cart' onClick={addProductToCart} />
     </div>
   );
 }

src/components/product-card/product-card.styles.scss

@@ -12,6 +12,8 @@
     overflow: hidden;
     position: relative;
     margin-bottom: 10px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 10px #00000071;
   }
 
   img {
@@ -25,10 +27,14 @@
 
   button {
     width: 80%;
-    opacity: 0.7;
+    opacity: 0;
     position: absolute;
-    top: 60%;
-    display: none;
+    bottom: -50px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    display: flex;
+    transition: all 0.15s ease-out;
   }
 
   &:hover {
@@ -38,7 +44,7 @@
 
     button {
       opacity: 0.85;
-      display: flex;
+      bottom: 50px;
     }
   }