React Project - E commerce store

Fixed: Line 14 in ProductList.js

<div className="row">
NOT <div className="row" />
Now it's displaying in four rows instead of one.

Resume Project

cd desktop
cd store
code .
npm start

Ctrl + C - stop and start server

Structure

-Create components in src - Navbar.js, Product.js, ProductList.js, Default.js, Details.js, Button.js, Title.js
- Create img in public - product-1.png... product-8.png (400 x 400)
- Create context.js in src
- Place logo.svg in src

Preparation

Vector Paint - SVG Editor

SVG Viewer

Google Fonts

Font Awesome Code

<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
crossorigin="anonymous"
/>

App.css

:root {
--mainBlue: #2a2a72;
--lightBlue: #009ffd;
--mainWhite: #f3f3f3;
--mainDark: #232528;
--mainYellow: #ffa400;
transition: all 1s linear;
}
body {
font-family: "Oswald", sans-serif !important;
background: var(--mainWhite) !important;
color: var(--mainDark) !important;
}
.text-title {
font-family: "Ubuntu";
letter-spacing: 0.3rem;
text-transform: uppercase;
}
.text-blue {
color: var(--mainBlue);
}
.text-bright {
color: var(--lightBlue);
}

Install React-router-dom

npm install -g create-react-app
create-react-app demo-app

• Fragment component allows a component to return a set of children without a wrapper DOM element.

Install Styled Components

npm installed --save styled-components

App.js

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import logo from "./logo.svg";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
import ProductList from "./components/ProductList";
import Details from "./components/Details";
import Cart from "./components/Cart";
import Default from "./components/Default";

class App extends Component {
render() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={ProductList} />
<Route path="/details" component={Details} />
<Route path="/cart" component={Cart} />
<Route component={Default} />
</Switch>
</React.Fragment>
);
}
}
export default App;

Button.js

Building the yellow hover button (3:13:54)

border-color: ${props =>
props.cart ? "var(--mainYellow)" : "var(--lightBlue)"};

Bootstrap Shorthand

Using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

• m = margin, p = padding
• tblr = top, bottom, left, right; x= left and right; y = top and bottom
• 0-5 = 0 eliminate margin or padding, 1 = *0.25, 2= *0.5, 3 default, 4 = *1.5, 5 = *3, auto
• rgba = red, green, blue, alpha ---> rgba (0,0,255,.1)
• container-fluid takes up the whole screen

<div className="row">
<div className="col-10 mx-auto col-md-6 my-3 text-capitalize">
<img src={img} className="img-fluid" alt="product" />
</div>

Modal.js

4:06:30 - Your Cart Page

Create cart folder - Cart.js, package.json, CartColumns.js, CartItem.js, EmptyCart.js, CartTotals.js

Tip: to move file, write package.json

{
"main": "Cart.js"
}

5:13:29 - Total and tax computations at Context.js

addTotals = () => {
let subTotal = 0;
this.state.cart.map(item => (subTotal += item.total));
const tempTax = subTotal * 0.1;
const tax = parseFloat(tempTax.toFixed(2));
const total = subTotal + tax;
this.setState(() => {
return {
cartSubTotal: subTotal,
cartTax: tax,
cartTotal: total
};
});

5:16:56 - Clear Cart

5:28:41 - Incremention and Decrementation

5:40:50 - 404 Default Page

 <div className="container">
<div className="row">
<div className="col-10 mx-auto text-center text-title text-uppercase pt-5">
<h1 className="display-3">404</h1>
<h2>page not found</h2>
<h3>
the requested URL
<span className="text-danger">
{this.props.location.pathname}
</span>{" "}
was not found
</h3>
</div>
</div>
</div>

5:47:15 - Deploy on Netlify 

https://jewellery-store.netlify.com/

6:00:11 - Paypal APM Package

PayPal Developer

• Accounts: faciliator and buyer email address
• My Apps & Credentials > REST API apps > Create app

Login Sandbox Paypal with faciliator and buyer email address to verify payment

Notification occur when there's error

6:11:00 - Create env.development in root

Prevent API keys from being seen

Include .env.development in .gitignore #dependencies

Copy API key from PayPalButton to .env file

REACT_APP_APP_ID={insert API key}

Access environment variable. Replace line 33 PayPalButton.js with

sandbox: process.env.REACT_APP_APP_ID,

Stop and restart server

Copy dependent key to netlify

6:50:03 - Github

Create new repository

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/account-name/repository-name.git (not required for amendments)
git push -u origin master

Domain setting in Netlify

Upon making changes in github, Netlify have hook in github and will deploy again