Final Project Plan

dependencies/list.txt

@@ -0,0 +1,19 @@
+NPM Dependencies
+
+  1. crypto === require('node:crypto')    --- This builtin node 
+  2. ua-parser-js === npm i ua-parser-js  --- To view customers device information
+  3. redux-react-session === npm i redux-react-session  --- Sessions to ensure information travels to firebase to the proper doc
+  4. react-hook-form === npm install react-hook-form  ---in line form validition
+  5. react-session === npm install react-client-session --save   ---manages clients session 
+            // not sure which session manager is easier to implemen...kepping both for reference
+
+  6. react-bootstrap === npm install react-bootstrap bootstrap  ---bootstrap
+  7. mui === npm install @mui/material @emotion/react @emotion/styled   ---materialUI
+API Dependencies
+
+  https://ipinfo.io/    API key is needed in deployment
+
+Database
+
+  firebase === npm i firebase
+

design/executionPlan.txt

@@ -0,0 +1,10 @@
+THIS IS IN REFERENCE TO task.txt FILE
+
+Week 1: 6/1 - 6/6
+  Complete task 1 - 6
+
+Week 2: 6/6 - 6/10
+  Complete task 7 - 13
+
+week 3: 6/10 - 6/15
+  Complete task 14-19

design/fireBaseDBDesign.txt

@@ -0,0 +1,5 @@
+COLLECTIONS             DOCUMENT                            FIELDS
+
+users              forEach(users_username)  ->    {username, email, sha256(password), UA([deviceName_collection]), UA([deviceBrowser_collection]), UA([ip_collections]) sex, age, race, purchaseHist(total) }
+
+items              forEach(item)            ->     {item_name, item_gender, item_price, item_quantity, isOnSale}

design/routeDesign.txt

@@ -0,0 +1,48 @@
+/create_user_profile
+    query for username inside firebase 
+      if(username !=db){
+        createUser(
+          entries: {reference firebaseDBDesign}
+        )
+      }else{
+        {validations.js}
+      }
+
+/login
+
+    query username and match password field
+      pass password field through sha256 algo to match the string in firebase
+
+    if(match){
+      login()
+    }else{
+      {login_validations.js}
+    }
+
+
+/admin
+  * heres where the admin will be able to interact with firbase by updating, creating or deleting store items with a form 
+  * it will render entire items list as card components plus delete and update buttons  
+
+/index
+  <nav> logo <login/createUser> </nav>
+  <carusel> {this can only be updated by dev for the moment } </carusel>
+    <items>
+      ....query by gender or all
+     </items>
+
+/cart
+
+  * display cart plus add checkout button 
+
+    if(user_isLogin){
+      update(purchaseHist+ new_total)
+    }else if{
+      asktoLogin()
+    }else{
+      continue
+    }
+
+
+  * the cart is a prefill form where only the quantity can be updated or item deleted 
+  ** the form will be a component that gets maps the useState([])

design/task.txt

@@ -0,0 +1,103 @@
+Task 1: BUILD front end COMPONENTS FOR /admin 
+
+    component 1: Form for admin to admin to send information to firebase 
+                must take in images ie: import {ref, uploadBytes} from "firebase/storage";
+    component 2: card for firebase items to display
+
+Task 2: CONNECT firebase TO react
+
+Task 3: TEST firebase IN react
+
+    from /admin send info to firabase and see if card components map()
+
+    from /admin delete item 
+
+    from /admin update item quantity
+
+    from /admin update price 
+
+    from /admin update isOnSale
+
+Task 4: BUILD front end COMPONENTS FOR /index
+
+    component 1: Nav bar(logo  signin / create account)
+
+    component 2: carusel using bootstrap pull items from firebase if(isOnSale) limit 3
+
+    component 3: firebase query navbar that returns items
+
+Task 5: BUILD front end COMPONENTS FOR /cart 
+
+    component 1: item card with update and delete buttons
+    buttons: buy
+
+Task 6: TEST items IN cart
+
+  send items to /cart with useState() from /index 
+
+Task 7: IN firebase CREATE new COLLECTION users
+
+Task 8: BUILD front end COMPONENTS FOR /create_user_profile
+
+    component 1: form(email, username, password, firstName, lastName, gender, race) 
+      *ensure form validation
+
+Task 9: LINK /create_user_profile TO firebase IN collection=users
+
+Task 10: FROM /create_user_profile SEND newUsers TO firebase IN collection=users AND CREATE new doc
+
+Task 11: usernames cant repeat in firebase therefore useState() to query firebase and if it matches return error 
+
+Task 12: UPDATE /create_user_profile COMPONENT form(password) must pass through sha256() AND sha256(password) IS new PASSWORD
+
+Task 13: BUILD front end COMPONENTS FOR /signin
+
+        component 1: form(username, password)
+                  passsword field will go through sha256() and match the string in firbase and username 
+
+Task 14: IN firebase CREATE new COLLECTION admin 
+
+Task 15: IN firebase COLLECTION admin CREATE newDoc = key
+
+        * the key will be a manually hash password that will be set via the firabase store 
+        **when the key is entered in ui it will get hashed to match the firabase string
+
+Task 16: BUILD front end COMPONENTS FOR /admin
+
+      component 1: form(key)
+
+Task 17: LOCK visability of /admin until key is entered
+
+Task 18: CREATE user sessions BY USING local storage
+
+Task 19: CREATE /index/{username}
+
+        **it will be the same UI as /index BUT it will remove signin/create_user_profile buttons AND REPLACE WITH hello {username}
+
+
+TASK 20: Deploy on AWS Amplify
+
+********** AT THIS POINT THE REQUIREMENTS HAVE BEEN MET FOR UW **************************
+
+
+***********IF THERES TIME***************************************
+
+
+Task 21: implement ua-parser-js library to /create_user_profile and signin and update firebase fields 
+
+Task 22: implement ip_collections API  to /create_user_profile and signin and update firebase fields
+
+Task 23: BUILD front end COMPONENTS FOR /admin
+
+        component 1: Top 3 customers from firebase(purchaseHist && mostView)
+        component 2: Top 2 devices from firebase
+        component 3: Top 3 cities from firebase
+        component 4: total user count 
+
+Task 24: create 100 fake accounts and render analaytics in /admin
+
+Task 25: create new gitBranch called SDK 
+
+Task 26: disconnect firabase deleting env file
+
+Task 27: begin SDK building

elevatorPitch/pitch.txt

@@ -0,0 +1,13 @@
+Project Name: react-firebase-ecomerce-sdk
+
+Who Will Use it: Developers who want to quickly setup the front end for an online store and use firebase as a db service
+
+Value it will provide end user: It will bring a devloper speed by giving boilerplate code to build online store
+
+
+Pitch: 
+
+    What I intend this project to be is an SDK for future projects that I may encounter by having a cookie
+    cutter type site I can easily modify to clients needs. For this class what I will build is the sample app
+    for the SDK that will be deployed on AWS amplify. 
+

sha256.js

@@ -0,0 +1,11 @@
+const crypto = require('node:crypto');
+
+const secret = 'abcdefg';
+const hash = crypto.createHmac('sha256', secret).update('test').digest('hex');
+const hash2 = crypto.createHmac('sha256', secret).update('test').digest('hex');
+
+if(hash === hash2){
+  console.log('Hashes match');
+}else{
+  console.log('Hashes do not match');
+}