From 14f1737cf5173f3b44593378f96b4c6af99b5c72 Mon Sep 17 00:00:00 2001
From: Delly <agedel@bu.edu>
Date: Tue, 20 Dec 2022 20:21:48 -0500
Subject: [PATCH 01/12] Implement localstorage for language choice

---
 frontend/src/components/Select/Select.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Select/Select.tsx b/frontend/src/components/Select/Select.tsx
index 8c45d668c..6992ab46b 100644
--- a/frontend/src/components/Select/Select.tsx
+++ b/frontend/src/components/Select/Select.tsx
@@ -5,18 +5,24 @@ import MenuItem from "@mui/material/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 
 export default function BasicSelect() {
-  const [age, setAge] = React.useState("English");
+  const [lang, setlang] = React.useState("English");
 
   const handleChange = (event: SelectChangeEvent) => {
-    setAge(event.target.value as string);
+    setlang(event.target.value as string);
   };
   //Used for the dropdown button in the navigation menu, to be a trigger for Strapi content, i.e. when Spanish selected, switches to Spanish version, etc.
+
+  //Localstorage
+  React.useEffect(() => {
+    localStorage.setItem("selectedLanguage", lang);
+  }, [lang]);
+
   return (
     <Box sx={{ minWidth: 120 }}>
       <Select
         labelId="demo-simple-select-label"
         id="demo-simple-select"
-        value={age}
+        value={lang}
         onChange={handleChange}
       >
         <MenuItem value={"English"}>English</MenuItem>

From 0e284183dd6b5bd48a6efb89e01305fa5eefa585 Mon Sep 17 00:00:00 2001
From: XichengSpencer <74568012+XichengSpencer@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:34:46 -0500
Subject: [PATCH 02/12] add to Mychoices

---
 frontend/src/pages/MyChoices.tsx | 233 +++++++++++++++++++++----------
 1 file changed, 163 insertions(+), 70 deletions(-)

diff --git a/frontend/src/pages/MyChoices.tsx b/frontend/src/pages/MyChoices.tsx
index 1a13eee5c..af8dbb407 100644
--- a/frontend/src/pages/MyChoices.tsx
+++ b/frontend/src/pages/MyChoices.tsx
@@ -1,102 +1,195 @@
-import { Grid, ThemeProvider, Typography } from "@mui/material";
+import { Box, Divider, Grid, ThemeProvider, Typography } from "@mui/material";
+import { CircularProgress } from '@mui/material';
+import React from "react";
 import Layout from "../components/Layout";
-import WelcomeImg from "./pageStyle/welcome.png";
+import { ApiHomePageeHomePagee } from "../schemas";
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import { start } from "repl";
 
 const MyChoices = () => {
-  const textColor = "#0c3a25";
-  const lightGreen = "#dff0d8";
+  const darkGreen = "#0c3a25";
+  const lightGreen = '#dff0d8';
 
+  const titleToDivider = 2;
+  const toNextSection = 4;
+
+  //for strapi purpose:
+  // interface Response {
+  //   data: [] | ApiHomePageeHomePagee[];
+  // }
+  // const defaultResponse = { data: [] };
+
+  // const data: Response = useFetch<Response>(
+  //   "http://localhost:1337/api/home-pagees?populate=*", defaultResponse
+  // );
+
+
+  // console.log("data" + data.data[0].attributes);
   return (
+
     <Layout>
       {/* section for Title */}
-      <Grid
-        container
-        columns={{ xl: 12, lg: 12, md: 12 }}
-        item
-        xl={12}
-        lg={12}
-        md={12}
+      <Grid container columns={{ xl: 12, lg: 12, md: 12 }} item xl={12} lg={12} md={12}
         sx={{
-          backgroundColor: "white",
-          direction: "column",
-          pt: 8,
-          pb: 8,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
+          backgroundColor: "white", direction: "column",
+          mt: 1, pt: 8, pb: 8, display: "flex", alignItems: "center", justifyContent: "center"
+        }} >
         {/* Main title */}
 
         <Grid item xl={5} lg={5} md={5} sx={{ alignItems: "center" }}>
-          <Typography variant="h2" color={textColor} fontWeight="500">
-            Compare your choices
-          </Typography>
+          <Typography variant="h2" color={darkGreen} fontWeight="500">Compare Your Choices</Typography>
         </Grid>
 
         {/* Sub title */}
-        <Grid
-          container
-          item
-          xl={12}
-          lg={12}
-          md={12}
-          sx={{ alignItems: "center", justifyContent: "center", pt: 6, pb: 8 }}
-        >
-          <Grid
-            container
-            item
-            xl={8}
-            lg={8}
-            md={8}
-            sx={{ alignItems: "center", justifyContent: "space-between" }}
-          >
+        <Grid container item xl={12} lg={12} md={12} sx={{ alignItems: "center", justifyContent: "center", pt: 6, pb: 8 }}>
+          <Grid container item xl={7} lg={7} md={7} sx={{ alignItems: "center", justifyContent: "space-between" }}>
             <Grid item sx={{ alignItems: "center" }}>
-              <Typography variant="h5" color={textColor}>
-                Wait for Labor
-              </Typography>
+              <Typography variant="h5" color={darkGreen}>Wait for Labor</Typography>
             </Grid>
 
             <Grid item sx={{ alignItems: "center" }}>
-              <Typography variant="h5" color={textColor}>
-                41-42 Week Induction
-              </Typography>
+              <Typography variant="h5" color={darkGreen}>41-42 Week Induction</Typography>
             </Grid>
             <Grid item sx={{ alignItems: "center" }}>
-              <Typography variant="h5" color={textColor}>
-                39-41 Week Induction
-              </Typography>
+              <Typography variant="h5" color={darkGreen}>39-41 Week Induction</Typography>
             </Grid>
           </Grid>
         </Grid>
       </Grid>
 
-      <Grid container xl={12} lg={12} md={12} sx={{ alignItems: "center" }}>
-        <Grid item>
-          <Typography> Time</Typography>
-        </Grid>
-      </Grid>
-      <Grid
-        container
-        item
-        xl={12}
-        lg={12}
-        md={12}
-        sx={{ alignItems: "center" }}
+      {/* section Timing */}
+      <Grid item container xl={12} lg={12} md={12}
+        sx={{ alignItems: "center", justifyContent: "center" }}
       >
-        <Grid item>
-          <Typography> Most likely to happen between</Typography>
+        <Grid container item xl={8} lg={8} md={8}
+          direction="column">
+          <Grid itemProp="">
+            <Typography variant="h4" > Timing</Typography>
+          </Grid>
+          <Grid item sx={{ pb: titleToDivider }}>
+            <Typography> Most likely to happen between</Typography>
+          </Grid>
+          {/* line */}
+          <Divider sx={{ backgroundColor: lightGreen }} />
+          {/* section of data */}
+          <Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
+            <Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: lightGreen, alignContent: "center", p: 8 }}>
+              <Typography sx={{ textAlign: "center" }}> 37 - 42+</Typography>
+              <Typography sx={{ textAlign: "center" }}> Weeks</Typography>
+            </Grid>
+            <Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: lightGreen, alignContent: "center" }}>
+              <Typography sx={{ textAlign: "center" }}> 41 - 42</Typography>
+
+              <Typography sx={{ textAlign: "center" }}> Weeks</Typography>
+            </Grid>
+            <Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: lightGreen, alignContent: "center" }}>
+              <Typography sx={{ textAlign: "center" }}> 39 - 41</Typography>
+              <Typography sx={{ textAlign: "center" }}> Weeks</Typography>
+            </Grid>
+
+          </Grid>
+
+          {/* section Labor Time */}
+
+          <Grid item >
+            <Typography variant="h4"> Labor Time</Typography>
+          </Grid>
+          <Grid item sx={{ pb: titleToDivider, pt: toNextSection }}>
+            <Typography> Sometimes longer or shorter</Typography>
+          </Grid>
+          {/* line */}
+          <Divider sx={{ backgroundColor: lightGreen }} />
+
+          {/* data section */}
+
+          <Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
+            <Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: darkGreen, alignContent: "center", p: 8 }}>
+              <Typography color={lightGreen} sx={{ textAlign: "center" }}> 8 - 24</Typography>
+              <Typography color={lightGreen} sx={{ textAlign: "center" }}> Days</Typography>
+            </Grid>
+            <Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: darkGreen, alignContent: "center" }}>
+              <Typography color={lightGreen} sx={{ textAlign: "center" }}> 1 - 3</Typography>
+
+              <Typography color={lightGreen} sx={{ textAlign: "center" }}> Days</Typography>
+            </Grid>
+            <Grid container item xl={3} lg={3} md={3} sx={{ borderRadius: "50%", backgroundColor: darkGreen, alignContent: "center" }}>
+              <Typography color={lightGreen} sx={{ textAlign: "center" }}> 1 - 3</Typography>
+              <Typography color={lightGreen} sx={{ textAlign: "center" }}> Days</Typography>
+            </Grid>
+
+          </Grid>
+
+          {/* Experience Section */}
+          <Grid item sx={{ pb: titleToDivider, pt: toNextSection }}>
+            {/* parallel display */}
+            <Typography display="inline"
+              variant="h4"> Experience</Typography>
+            <Typography display="inline"> 6</Typography>
+          </Grid>
+
+          {/* line */}
+          <Divider sx={{ backgroundColor: lightGreen }} />
+          {/* 2 column data section */}
+          <Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
+            <Grid container item xl={4} lg={4} md={4} sx={{ pb: 4, direction: "column", alignItems: "center", justifyContent: "center" }}>
+              <Grid item ><FavoriteIcon sx={{ fontSize: 50 }} /></Grid>
+              <Grid item><Typography >More satisfied with care (less waiting, fewer interventions)</Typography></Grid>
+            </Grid>
+            <Grid container item xl={6} lg={6} md={6} sx={{ backgroundColor: lightGreen }}>
+              <Grid item xl={6} lg={6} md={6} ><Divider><FavoriteIcon sx={{ fontSize: 50 }} /></Divider></Grid>
+              <Grid item><Typography >More satisfied with care (less waiting, fewer interventions)</Typography></Grid>
+            </Grid>
+
+
+          </Grid>
+
+          {/* Pain Medication Section */}
+          <Grid item sx={{ pb: titleToDivider, pt: toNextSection }}>
+            {/* parallel display */}
+            <Typography display="inline" variant="h4"> Pain Medication</Typography>
+            <Typography display="inline"> 6</Typography>
+          </Grid>
+
+          <Divider sx={{ backgroundColor: lightGreen }} />
+
+          {/* two colomn data section */}
+          {/* Thought about using CircularProgress but it doesn't allow children inside */}
+
+          <Grid container item sx={{ pt: 4, justifyContent: "space-between" }}>
+            <Grid container item xl={4} lg={4} md={4} sx={{ alignContent: "center", p: 8 }}>
+              <Grid item >
+                <CircularProgress variant="determinate" value={49} />
+                <Typography>49 %</Typography>
+              </Grid>
+            </Grid>
+
+            <Grid container item xl={4} lg={4} md={4} sx={{ alignContent: "center" }}>
+              <Grid item >
+                <CircularProgress variant="determinate" value={52} />
+                <Typography>52 %</Typography>
+              </Grid>
+            </Grid>
+
+          </Grid>
+
+          {/* TODO: for all three options.. 
+                Potential Risks
+                learn about your choice
+                Source
+            */}
         </Grid>
       </Grid>
 
-      <Grid
-        container
-        item
-        xl={8}
-        lg={8}
-        md={8}
-        sx={{ p: 0.2, backgroundColor: lightGreen }}
-      ></Grid>
+
+
+
+
+
+
+
+
+
+
     </Layout>
   );
 };

From 976420b3dd9b74f69aed166836c3dc719414d85c Mon Sep 17 00:00:00 2001
From: Delly <agedel@bu.edu>
Date: Tue, 20 Dec 2022 20:36:08 -0500
Subject: [PATCH 03/12] Localstorage implementation for myValues quiz

---
 frontend/src/components/Quiz.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/Quiz.tsx b/frontend/src/components/Quiz.tsx
index a21ad8c75..720af3ee5 100644
--- a/frontend/src/components/Quiz.tsx
+++ b/frontend/src/components/Quiz.tsx
@@ -69,6 +69,7 @@ const Quiz = () => {
   //showScore allows us to see the final summary at the very end, once the questions list is exhausted
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [showScore, setShowScore] = useState(false);
+  
   const handleAnswerButtonClick = (
     answerText: string,
     currentQuestion: number
@@ -93,6 +94,7 @@ const Quiz = () => {
     const nextQuestions = currentQuestion + 1;
 
     console.log(nextQuestions);
+    
     if (nextQuestions < questions.length) {
       setCurrentQuestion(nextQuestions);
     } else {
@@ -100,6 +102,14 @@ const Quiz = () => {
     }
   };
 
+  //Local storage hook for remembering answers. Seems to work but current bug relating to the displaying of answers results in duplicate answers 
+  React.useEffect(() => {
+    localStorage.setItem("leastImp", JSON.stringify(leastImp));
+    localStorage.setItem("lessImp", JSON.stringify(lessImp));
+    localStorage.setItem("imp", JSON.stringify(imp));
+    localStorage.setItem("moreImp", JSON.stringify(moreImp));
+  }, [leastImp, lessImp, imp, moreImp]);
+
   const showLeast = () => leastImp.map((item) => <li>{item}</li>);
   const showLess = () => lessImp.map((item) => <li>{item}</li>);
   const showImp = () => imp.map((item) => <li>{item}</li>);

From e262b6f42292d48db8fc5c1d7ccb4e36d7c489c5 Mon Sep 17 00:00:00 2001
From: juniajanvier <74433856+juniajanvier@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:40:52 -0500
Subject: [PATCH 04/12] Completed ReadMe with Deployment and Strapi details

---
 README.md | 176 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 123 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 959b3d40e..1509f11f9 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,3 @@
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
-
 <a name="readme-top"></a>
 <br />
 
@@ -56,10 +15,6 @@ To learn React, check out the [React documentation](https://reactjs.org/).
     </li>
     <li>
       <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
     </li>
     <li><a href="#usage">Usage</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
@@ -88,16 +43,23 @@ Look at our Final Presentation to see our progress overview from Fall 2022: [Fin
 
 ### Built With
 
-Our Technical Stack
+**Our Technical Stack**
+Frontend
 
 - [React](https://reactjs.org/)
 - [Bootstrap](https://getbootstrap.com/)
 - [NpmJS](https://www.npmjs.com/)
 - [Typescript](https://www.typescriptlang.org)
 - [MUI](https://mui.com/)
-- [Firebase](https://firebase.google.com/)
+
+CMS
+
 - [Strapi](https://strapi.io/)
 
+Deployment
+
+- [Firebase](https://firebase.google.com/)
+
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- GETTING STARTED -->
@@ -106,9 +68,11 @@ Our Technical Stack
 
 Please review the following sections to understand how to run this project on your local device. To run properly please make sure you have the most updated version of **ReactJS, NodeJS, NPM, and Firebase.**
 
-### Frontend
+For **React** you can learn more in the [Create React App Documentation](https://create-react-app.dev/docs/getting-started/)
+
+## Frontend
 
-## Prerequisites
+### Prerequisites
 
 This is an example of how to list things you need to use the software and how to install them.
 
@@ -117,9 +81,9 @@ This is an example of how to list things you need to use the software and how to
   npm install npm@latest -g
   ```
 
-## Installation (TO RUN THE FRONTEND)
+### Installation (TO RUN THE FRONTEND)
 
-_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
+_How to run the current project on local device:_
 
 1. Clone the repo
    ```sh
@@ -135,14 +99,117 @@ _Below is an example of how you can instruct your audience on installing and set
  cd frontend
 ```
 
+```sh
+ npm start
+```
+
+_Runs the frontend from local host Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Will update when edits are made._
+
+**Other useful npm commands**
+
+```sh
+ npm test
+```
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+```sh
+ npm run build
+```
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+```sh
+ npm run eject
+```
+
+_Note: this is a one-way operation. Once you `eject`, you can’t go back!_
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- USAGE EXAMPLES -->
 
-## Usage
+## Strapi
+
+**Brief:** Recommend to build and test content locally and deploy to google cloud after everything is set.
+
+**To host locally:**
+
+```sh
+   cd new-strapi
+   npm install
+```
+
+Create .env file and paste following:
+
+_HOST=0.0.0.0_
+_PORT=1337_
+_APP_KEYS=hq5nXeyU/6AUVnkkdHmmqA==,c1W7ivCD+NMYGnpjiLOoMQ==,l2cE5Bfqejdgs//K8Aa7Ag==,ZlqpAcH2lPYYbP8QqTb2bg==_
+_API_TOKEN_SALT=WSeDbXcQ7JgJ1tMKGhsIXw==_
+_ADMIN_JWT_SECRET=w3fdKjGIQ4m0bJOYQxRBbA==_
+_JWT_SECRET=EC1lm5cICpaxnYCl2990Ig==_
+
+```sh
+   npm run develop
+```
+
+**To login in:** Create your own account and start
+**To deploy:** [Google App Engine Deployment - Strapi Developer Docs](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.html)
+
+# Usage
+
+**Strapi Usage**
+
+- Build a collection type for each page and create component for sections if needed
+- Add page content as entry on corresponding field.
+- Be sure to publish the content after it is finished.
+- Go Setting-> USERS & PERMISSIONS PLUGIN -> roles -> public to check the corresponding field in order to get the data.
 
 Here is what the final website should look like: [Figma Wireframe](https://www.figma.com/proto/c5bBNfzCRal0xi7EWuEK4s/Partner-to-Decide_Final-Handoff-File?node-id=5453%3A18754)
 
+## Deployment
+
+**For deploying frontend to firebase:**
+To host locally:
+
+```sh
+    cd frontend
+    npm install && npm run start
+```
+
+$cd frontend
+$npm install && npm run start
+
+**To redeploy site and push new changes:**
+
+```sh
+    npm run build
+    firebase deploy --only hosting
+```
+
+**To redesignate github repo for CI/CD:**
+
+```sh
+   firebase login
+    cd frontend
+    firebase init
+```
+
+_follow prompt for connecting to GitHub_
+
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- ROADMAP -->
@@ -157,9 +224,11 @@ Here is what the final website should look like: [Figma Wireframe](https://www.f
 - [x] Create Notes App
 - [ ] Fix Quiz array bug (array doesn't reset when page refreshed, repeats values)
 - [ ] Fix Hosting bug, can only use home page url, if typed in with directory to other pages in browser, site returns a 404 error (however once on main page, site pages are accessible)
+- [ ] Fix Issue with Strapi parsing issue
+- [ ] Fix issue with maintaining Strapi data
 - [ ] Please see Jira for additonal tasks to be completed, please check-in with client to verify these backlog items: [Jira Page](https://sparkjedi.atlassian.net/jira/software/projects/DS519BU/boards/1/backlog?selectedIssue=DS519BU-28)
 
-See the [open issues](https://github.com/BU-Spark/se-shared-decision-making/issues) to add recommended features, and to log future issues (Quiz and 404 error included).
+See the more detailed [open issues](https://github.com/BU-Spark/se-shared-decision-making/issues) to add recommended features, and to log future issues (Quiz and 404 error included).
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
@@ -198,6 +267,7 @@ Here are some helpful resources to kick off the project!
 - [React Icons](https://react-icons.github.io/react-icons/search)
 - [Jira Board (Includes any bugs remaining)](https://sparkjedi.atlassian.net/jira/software/projects/DS519BU/boards/1/backlog?selectedIssue=DS519BU-28)
 - [Intro to Typescript](https://www.w3schools.com/typescript/index.php)
+- [How to Create a Survey Application Using Strapi and React.JS](https://strapi.io/blog/creating-a-survey-application-using-strapi-and-react-js)
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 

From 85f2bca8cd79780fe0cd59916e81ff95b3763d19 Mon Sep 17 00:00:00 2001
From: juniajanvier <74433856+juniajanvier@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:43:12 -0500
Subject: [PATCH 05/12] Quick Npm format bug

---
 README.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/README.md b/README.md
index 1509f11f9..edbd46fe8 100644
--- a/README.md
+++ b/README.md
@@ -97,9 +97,6 @@ _How to run the current project on local device:_
 
 ```sh
  cd frontend
-```
-
-```sh
  npm start
 ```
 

From fe43b8b9b249a3d69c8ca5e33cc61ef45c5fcff7 Mon Sep 17 00:00:00 2001
From: Delly <36602538+Agedel@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:44:20 -0500
Subject: [PATCH 06/12] Create README.md

---
 README.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index edbd46fe8..21e737f65 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,9 @@ _How to run the current project on local device:_
 
 ```sh
  cd frontend
+```
+
+```sh
  npm start
 ```
 
@@ -183,8 +186,8 @@ Here is what the final website should look like: [Figma Wireframe](https://www.f
 To host locally:
 
 ```sh
-    cd frontend
-    npm install && npm run start
+    $cd frontend
+    $npm install && npm run start
 ```
 
 $cd frontend
@@ -193,16 +196,16 @@ $npm install && npm run start
 **To redeploy site and push new changes:**
 
 ```sh
-    npm run build
-    firebase deploy --only hosting
+    $npm run build
+    $firebase deploy --only hosting
 ```
 
 **To redesignate github repo for CI/CD:**
 
 ```sh
-   firebase login
-    cd frontend
-    firebase init
+   $firebase login
+   $cd frontend
+   $firebase init
 ```
 
 _follow prompt for connecting to GitHub_

From 6986fa62bd7f9fd348b01cfc19e71bf7272dac47 Mon Sep 17 00:00:00 2001
From: Delly <36602538+Agedel@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:45:07 -0500
Subject: [PATCH 07/12] Update README.md

---
 README.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 21e737f65..2541d80a0 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ This is an example of how to list things you need to use the software and how to
 
 - npm
   ```sh
-  npm install npm@latest -g
+  $npm install npm@latest -g
   ```
 
 ### Installation (TO RUN THE FRONTEND)
@@ -87,20 +87,20 @@ _How to run the current project on local device:_
 
 1. Clone the repo
    ```sh
-   git clone https://github.com/BU-Spark/se-shared-decision-making.git
+   $git clone https://github.com/BU-Spark/se-shared-decision-making.git
    ```
 2. Install NPM packages
    ```sh
-   npm install
+   $npm install
    ```
 3. Enter the frontend folder in the directory
 
 ```sh
- cd frontend
+ $cd frontend
 ```
 
 ```sh
- npm start
+ $npm start
 ```
 
 _Runs the frontend from local host Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Will update when edits are made._
@@ -108,14 +108,14 @@ _Runs the frontend from local host Open [http://localhost:3000](http://localhost
 **Other useful npm commands**
 
 ```sh
- npm test
+ $npm test
 ```
 
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ```sh
- npm run build
+ $npm run build
 ```
 
 Builds the app for production to the `build` folder.\
@@ -127,7 +127,7 @@ Your app is ready to be deployed!
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
 ```sh
- npm run eject
+ $npm run eject
 ```
 
 _Note: this is a one-way operation. Once you `eject`, you can’t go back!_
@@ -149,8 +149,8 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 **To host locally:**
 
 ```sh
-   cd new-strapi
-   npm install
+   $cd new-strapi
+   $npm install
 ```
 
 Create .env file and paste following:
@@ -163,7 +163,7 @@ _ADMIN_JWT_SECRET=w3fdKjGIQ4m0bJOYQxRBbA==_
 _JWT_SECRET=EC1lm5cICpaxnYCl2990Ig==_
 
 ```sh
-   npm run develop
+   $npm run develop
 ```
 
 **To login in:** Create your own account and start

From c1de02843c73d82831f23c0b1ebaedf6a2990261 Mon Sep 17 00:00:00 2001
From: Delly <36602538+Agedel@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:45:49 -0500
Subject: [PATCH 08/12] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2541d80a0..f54bf2ba2 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ This is an example of how to list things you need to use the software and how to
 
 - npm
   ```sh
-  $npm install npm@latest -g
+ $npm install npm@latest -g
   ```
 
 ### Installation (TO RUN THE FRONTEND)
@@ -87,11 +87,11 @@ _How to run the current project on local device:_
 
 1. Clone the repo
    ```sh
-   $git clone https://github.com/BU-Spark/se-shared-decision-making.git
+ $git clone https://github.com/BU-Spark/se-shared-decision-making.git
    ```
 2. Install NPM packages
    ```sh
-   $npm install
+ $npm install
    ```
 3. Enter the frontend folder in the directory
 

From 3b4d487cd4656b641dd1c438c8c2264d117ab8c5 Mon Sep 17 00:00:00 2001
From: Delly <36602538+Agedel@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:46:15 -0500
Subject: [PATCH 09/12] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f54bf2ba2..f23f377b6 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ This is an example of how to list things you need to use the software and how to
 
 - npm
   ```sh
- $npm install npm@latest -g
+  $npm install npm@latest -g
   ```
 
 ### Installation (TO RUN THE FRONTEND)
@@ -87,7 +87,7 @@ _How to run the current project on local device:_
 
 1. Clone the repo
    ```sh
- $git clone https://github.com/BU-Spark/se-shared-decision-making.git
+  $git clone https://github.com/BU-Spark/se-shared-decision-making.git
    ```
 2. Install NPM packages
    ```sh

From d4503d9edcaa418ec082a0e591fe22b366349f91 Mon Sep 17 00:00:00 2001
From: Delly <36602538+Agedel@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:46:39 -0500
Subject: [PATCH 10/12] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f23f377b6..2541d80a0 100644
--- a/README.md
+++ b/README.md
@@ -87,11 +87,11 @@ _How to run the current project on local device:_
 
 1. Clone the repo
    ```sh
-  $git clone https://github.com/BU-Spark/se-shared-decision-making.git
+   $git clone https://github.com/BU-Spark/se-shared-decision-making.git
    ```
 2. Install NPM packages
    ```sh
- $npm install
+   $npm install
    ```
 3. Enter the frontend folder in the directory
 

From dff852565c75eb05f119c5bd8a97392e9fe9b770 Mon Sep 17 00:00:00 2001
From: juniajanvier <74433856+juniajanvier@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:51:36 -0500
Subject: [PATCH 11/12] Update README.md

---
 README.md | 184 +++++++++++++++++-------------------------------------
 1 file changed, 57 insertions(+), 127 deletions(-)

diff --git a/README.md b/README.md
index 2541d80a0..959b3d40e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,44 @@
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
+
 <a name="readme-top"></a>
 <br />
 
@@ -15,6 +56,10 @@
     </li>
     <li>
       <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
     </li>
     <li><a href="#usage">Usage</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
@@ -43,22 +88,15 @@ Look at our Final Presentation to see our progress overview from Fall 2022: [Fin
 
 ### Built With
 
-**Our Technical Stack**
-Frontend
+Our Technical Stack
 
 - [React](https://reactjs.org/)
 - [Bootstrap](https://getbootstrap.com/)
 - [NpmJS](https://www.npmjs.com/)
 - [Typescript](https://www.typescriptlang.org)
 - [MUI](https://mui.com/)
-
-CMS
-
-- [Strapi](https://strapi.io/)
-
-Deployment
-
 - [Firebase](https://firebase.google.com/)
+- [Strapi](https://strapi.io/)
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
@@ -68,148 +106,43 @@ Deployment
 
 Please review the following sections to understand how to run this project on your local device. To run properly please make sure you have the most updated version of **ReactJS, NodeJS, NPM, and Firebase.**
 
-For **React** you can learn more in the [Create React App Documentation](https://create-react-app.dev/docs/getting-started/)
-
-## Frontend
+### Frontend
 
-### Prerequisites
+## Prerequisites
 
 This is an example of how to list things you need to use the software and how to install them.
 
 - npm
   ```sh
-  $npm install npm@latest -g
+  npm install npm@latest -g
   ```
 
-### Installation (TO RUN THE FRONTEND)
+## Installation (TO RUN THE FRONTEND)
 
-_How to run the current project on local device:_
+_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
 
 1. Clone the repo
    ```sh
-   $git clone https://github.com/BU-Spark/se-shared-decision-making.git
+   git clone https://github.com/BU-Spark/se-shared-decision-making.git
    ```
 2. Install NPM packages
    ```sh
-   $npm install
+   npm install
    ```
 3. Enter the frontend folder in the directory
 
 ```sh
- $cd frontend
-```
-
-```sh
- $npm start
-```
-
-_Runs the frontend from local host Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Will update when edits are made._
-
-**Other useful npm commands**
-
-```sh
- $npm test
-```
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-```sh
- $npm run build
-```
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-```sh
- $npm run eject
+ cd frontend
 ```
 
-_Note: this is a one-way operation. Once you `eject`, you can’t go back!_
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- USAGE EXAMPLES -->
 
-## Strapi
-
-**Brief:** Recommend to build and test content locally and deploy to google cloud after everything is set.
-
-**To host locally:**
-
-```sh
-   $cd new-strapi
-   $npm install
-```
-
-Create .env file and paste following:
-
-_HOST=0.0.0.0_
-_PORT=1337_
-_APP_KEYS=hq5nXeyU/6AUVnkkdHmmqA==,c1W7ivCD+NMYGnpjiLOoMQ==,l2cE5Bfqejdgs//K8Aa7Ag==,ZlqpAcH2lPYYbP8QqTb2bg==_
-_API_TOKEN_SALT=WSeDbXcQ7JgJ1tMKGhsIXw==_
-_ADMIN_JWT_SECRET=w3fdKjGIQ4m0bJOYQxRBbA==_
-_JWT_SECRET=EC1lm5cICpaxnYCl2990Ig==_
-
-```sh
-   $npm run develop
-```
-
-**To login in:** Create your own account and start
-**To deploy:** [Google App Engine Deployment - Strapi Developer Docs](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.html)
-
-# Usage
-
-**Strapi Usage**
-
-- Build a collection type for each page and create component for sections if needed
-- Add page content as entry on corresponding field.
-- Be sure to publish the content after it is finished.
-- Go Setting-> USERS & PERMISSIONS PLUGIN -> roles -> public to check the corresponding field in order to get the data.
+## Usage
 
 Here is what the final website should look like: [Figma Wireframe](https://www.figma.com/proto/c5bBNfzCRal0xi7EWuEK4s/Partner-to-Decide_Final-Handoff-File?node-id=5453%3A18754)
 
-## Deployment
-
-**For deploying frontend to firebase:**
-To host locally:
-
-```sh
-    $cd frontend
-    $npm install && npm run start
-```
-
-$cd frontend
-$npm install && npm run start
-
-**To redeploy site and push new changes:**
-
-```sh
-    $npm run build
-    $firebase deploy --only hosting
-```
-
-**To redesignate github repo for CI/CD:**
-
-```sh
-   $firebase login
-   $cd frontend
-   $firebase init
-```
-
-_follow prompt for connecting to GitHub_
-
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- ROADMAP -->
@@ -224,11 +157,9 @@ _follow prompt for connecting to GitHub_
 - [x] Create Notes App
 - [ ] Fix Quiz array bug (array doesn't reset when page refreshed, repeats values)
 - [ ] Fix Hosting bug, can only use home page url, if typed in with directory to other pages in browser, site returns a 404 error (however once on main page, site pages are accessible)
-- [ ] Fix Issue with Strapi parsing issue
-- [ ] Fix issue with maintaining Strapi data
 - [ ] Please see Jira for additonal tasks to be completed, please check-in with client to verify these backlog items: [Jira Page](https://sparkjedi.atlassian.net/jira/software/projects/DS519BU/boards/1/backlog?selectedIssue=DS519BU-28)
 
-See the more detailed [open issues](https://github.com/BU-Spark/se-shared-decision-making/issues) to add recommended features, and to log future issues (Quiz and 404 error included).
+See the [open issues](https://github.com/BU-Spark/se-shared-decision-making/issues) to add recommended features, and to log future issues (Quiz and 404 error included).
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
@@ -267,7 +198,6 @@ Here are some helpful resources to kick off the project!
 - [React Icons](https://react-icons.github.io/react-icons/search)
 - [Jira Board (Includes any bugs remaining)](https://sparkjedi.atlassian.net/jira/software/projects/DS519BU/boards/1/backlog?selectedIssue=DS519BU-28)
 - [Intro to Typescript](https://www.w3schools.com/typescript/index.php)
-- [How to Create a Survey Application Using Strapi and React.JS](https://strapi.io/blog/creating-a-survey-application-using-strapi-and-react-js)
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 

From 164d7e64e8a13ecb0e7855ba5c11aadcec90e2b6 Mon Sep 17 00:00:00 2001
From: juniajanvier <74433856+juniajanvier@users.noreply.github.com>
Date: Tue, 20 Dec 2022 21:00:48 -0500
Subject: [PATCH 12/12] ReadMe final version

---
 README.md | 173 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 120 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 959b3d40e..edbd46fe8 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,3 @@
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
-
 <a name="readme-top"></a>
 <br />
 
@@ -56,10 +15,6 @@ To learn React, check out the [React documentation](https://reactjs.org/).
     </li>
     <li>
       <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
     </li>
     <li><a href="#usage">Usage</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
@@ -88,16 +43,23 @@ Look at our Final Presentation to see our progress overview from Fall 2022: [Fin
 
 ### Built With
 
-Our Technical Stack
+**Our Technical Stack**
+Frontend
 
 - [React](https://reactjs.org/)
 - [Bootstrap](https://getbootstrap.com/)
 - [NpmJS](https://www.npmjs.com/)
 - [Typescript](https://www.typescriptlang.org)
 - [MUI](https://mui.com/)
-- [Firebase](https://firebase.google.com/)
+
+CMS
+
 - [Strapi](https://strapi.io/)
 
+Deployment
+
+- [Firebase](https://firebase.google.com/)
+
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- GETTING STARTED -->
@@ -106,9 +68,11 @@ Our Technical Stack
 
 Please review the following sections to understand how to run this project on your local device. To run properly please make sure you have the most updated version of **ReactJS, NodeJS, NPM, and Firebase.**
 
-### Frontend
+For **React** you can learn more in the [Create React App Documentation](https://create-react-app.dev/docs/getting-started/)
 
-## Prerequisites
+## Frontend
+
+### Prerequisites
 
 This is an example of how to list things you need to use the software and how to install them.
 
@@ -117,9 +81,9 @@ This is an example of how to list things you need to use the software and how to
   npm install npm@latest -g
   ```
 
-## Installation (TO RUN THE FRONTEND)
+### Installation (TO RUN THE FRONTEND)
 
-_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
+_How to run the current project on local device:_
 
 1. Clone the repo
    ```sh
@@ -133,16 +97,116 @@ _Below is an example of how you can instruct your audience on installing and set
 
 ```sh
  cd frontend
+ npm start
+```
+
+_Runs the frontend from local host Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Will update when edits are made._
+
+**Other useful npm commands**
+
+```sh
+ npm test
+```
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+```sh
+ npm run build
 ```
 
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+```sh
+ npm run eject
+```
+
+_Note: this is a one-way operation. Once you `eject`, you can’t go back!_
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- USAGE EXAMPLES -->
 
-## Usage
+## Strapi
+
+**Brief:** Recommend to build and test content locally and deploy to google cloud after everything is set.
+
+**To host locally:**
+
+```sh
+   cd new-strapi
+   npm install
+```
+
+Create .env file and paste following:
+
+_HOST=0.0.0.0_
+_PORT=1337_
+_APP_KEYS=hq5nXeyU/6AUVnkkdHmmqA==,c1W7ivCD+NMYGnpjiLOoMQ==,l2cE5Bfqejdgs//K8Aa7Ag==,ZlqpAcH2lPYYbP8QqTb2bg==_
+_API_TOKEN_SALT=WSeDbXcQ7JgJ1tMKGhsIXw==_
+_ADMIN_JWT_SECRET=w3fdKjGIQ4m0bJOYQxRBbA==_
+_JWT_SECRET=EC1lm5cICpaxnYCl2990Ig==_
+
+```sh
+   npm run develop
+```
+
+**To login in:** Create your own account and start
+**To deploy:** [Google App Engine Deployment - Strapi Developer Docs](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.html)
+
+# Usage
+
+**Strapi Usage**
+
+- Build a collection type for each page and create component for sections if needed
+- Add page content as entry on corresponding field.
+- Be sure to publish the content after it is finished.
+- Go Setting-> USERS & PERMISSIONS PLUGIN -> roles -> public to check the corresponding field in order to get the data.
 
 Here is what the final website should look like: [Figma Wireframe](https://www.figma.com/proto/c5bBNfzCRal0xi7EWuEK4s/Partner-to-Decide_Final-Handoff-File?node-id=5453%3A18754)
 
+## Deployment
+
+**For deploying frontend to firebase:**
+To host locally:
+
+```sh
+    cd frontend
+    npm install && npm run start
+```
+
+$cd frontend
+$npm install && npm run start
+
+**To redeploy site and push new changes:**
+
+```sh
+    npm run build
+    firebase deploy --only hosting
+```
+
+**To redesignate github repo for CI/CD:**
+
+```sh
+   firebase login
+    cd frontend
+    firebase init
+```
+
+_follow prompt for connecting to GitHub_
+
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- ROADMAP -->
@@ -157,9 +221,11 @@ Here is what the final website should look like: [Figma Wireframe](https://www.f
 - [x] Create Notes App
 - [ ] Fix Quiz array bug (array doesn't reset when page refreshed, repeats values)
 - [ ] Fix Hosting bug, can only use home page url, if typed in with directory to other pages in browser, site returns a 404 error (however once on main page, site pages are accessible)
+- [ ] Fix Issue with Strapi parsing issue
+- [ ] Fix issue with maintaining Strapi data
 - [ ] Please see Jira for additonal tasks to be completed, please check-in with client to verify these backlog items: [Jira Page](https://sparkjedi.atlassian.net/jira/software/projects/DS519BU/boards/1/backlog?selectedIssue=DS519BU-28)
 
-See the [open issues](https://github.com/BU-Spark/se-shared-decision-making/issues) to add recommended features, and to log future issues (Quiz and 404 error included).
+See the more detailed [open issues](https://github.com/BU-Spark/se-shared-decision-making/issues) to add recommended features, and to log future issues (Quiz and 404 error included).
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>
 
@@ -198,6 +264,7 @@ Here are some helpful resources to kick off the project!
 - [React Icons](https://react-icons.github.io/react-icons/search)
 - [Jira Board (Includes any bugs remaining)](https://sparkjedi.atlassian.net/jira/software/projects/DS519BU/boards/1/backlog?selectedIssue=DS519BU-28)
 - [Intro to Typescript](https://www.w3schools.com/typescript/index.php)
+- [How to Create a Survey Application Using Strapi and React.JS](https://strapi.io/blog/creating-a-survey-application-using-strapi-and-react-js)
 
 <p align="left">(<a href="#readme-top">back to top</a>)</p>