McElie-ECommerce

INTRODUCTION: > FULL STACK

	JUNIOR:
		> Professional React Developer
		> Create-App Create fully functional app
		> React BootStrap best website UI design
		> React Hooks (useState, useEffect) manage a state in component level
		> React Context manage state of app in a predictable way
		> Node.Js and Express.Js build a backend API for React App
		> Mondb and Mongos to save/retrieve Data in the Database
		> Json Web Token to authenticate usera
		> Paypal checkout button to make payment for the orders
		> Heroku cloud Application To deploy your website to the internet.

	SENIOR:
		> Working with Google MAP to show user location on the map to get customer address
		> Advanced Mongodb functions like aggregation to calculate summary data for admin dashboard
		> Config MailGun email service to send emails to customers
		> Display pro chart using google chart
		> Upload your files on Cloudinary services.

		> End built Pro ecom website

START UP TOOLS: > Google Chrome (Pro web dev test browser) > MS VSCode > NodeJS > LTS version > GIT (wind) - git-scm.com > Setup VS Code Terminal to Default (Git Bash) as terminal

>>> Install Extension in VS Code:
	* Prettier - Code
		> VSCode >> Setting: search for: 'defaultFormat' and Select Prettier in the dropdown list
		> VSCode >> Setting: Search for: 'formatonsave' and Checked  format on save option
		> VSCode >> Setting: search for: 'singlequote' and checked Single Quote (this will change all "" to ''
		> VSCode >> Ctrl + Shift + P: >json 'Open Settings (Json)':
		> Add new line: "editor.braketPairColorization.enabled":true
	* eslint - (shows all errors in the codes)
	* JavaScript (ES6) code snippets (code faster)
	* ES7+ React/Redux/React-Native snippets (for quick react code creation: imp or rfc)
	* Github pull request and issues
		Your authorization token:
			vscode://vscode.github-authentication/did-authenticate?windowid=1&code=a9421e6cea2a3839eba9&state=4a2aa80c-e63d-4a93-a05f-022df4658aad
			✅ Copied
			Copy the token.
			Switch back to VS code.
			Click Signing in to github.com... in the status bar.
			Paste the token and hit enter.
	* Console: npm install nodemon --save-dev (Auto reload express node Server)

===================================STARTER================================ STAGE - 1

1. Introduction to this course what you will build what you will learn who are audiences
2. Install Tools Code Editor Web Browser VS Code Extension
3. Website Template Create amazona folder create template folder create index.html add default HTML code link to style.css create header, main and footer style elements
4. Display Products create products div add product attributes add link, image, name and price
5. Create React App npx create-react-app frontend npm start Remove unused files copy index.html content to App.js copy style.css content to index.css replace class with className
6. Share Code On Github Initialize git repository Commit changes Create github account Create repo on github connect local repo to github repo push changes to github
7. Create Rating and Product Component create components/Rating.js create div.rating style div.rating, span and last span Create Product component Use Rating component
8. Build Product Screen Install react-router-dom Use BrowserRouter and Route for Home Screen Create HomeScreen.js Add product list code there Create ProductScreen.js Add new Route from product details to App.js Create 3 columns for product image, info and action