group14-final-submission

.gitignore

@@ -0,0 +1,3 @@
+frontend/node_modules
+backend/node_modules
+/data/

README.md

@@ -1,51 +1,90 @@
-# Final Project
-*Due before the start of class, October 11th (final day of the term)*
-
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
-
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
-
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. 
-
-## Logistics
-### Team size
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
-
-Teams must be in place by end of day on Saturday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time as needed.
-
-### Deliverables
-
-__Proposal:__ 
-Provide an outline of your project direction and the names of associated team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Name the file proposal.md and submit a pull request.
-Submit a PR to turn it in by Monday, September 27th at11:59 PM. Only one pull request is required per team.
-
-There are no other scheduled checkpoints for your project. 
-
-#### Turning in Your Outline / Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
-
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
-
-1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
-
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.
+# Mental Health and Suicide Data Final Project
+
+Group Members: Alan Healy, Alex Kinley, Niko Pelletier, Jyalu Wu
+
+## Project Description
+Website: https://group-14-final-project-2nrny.ondigitalocean.app/
+
+Demo Video: https://www.youtube.com/watch?v=X7JrgC3JO-w
+
+Mental health is a broad and complicated subject. We wanted to present people with statistics and information about mental health and suicide in a way that is engaging and helps people relate to those numbers on a more personal level. Though the statistics themselves are important, it can be easy to forget numbers and thus an interactive overview of statistics on mental health and suicide may not be as impactful. Therefore, we want the site visitors to also have the ability to be more introspective. Site visitors have the opportunity to answer questions about their life and experiences, then see information about how they compare to the broader population, as well as how that might be relevant to mental health or sucide.
+
+As well as the more personal interactive form, the site also has an interactive overview of various statistics relating to mental health and suicide we aggregated from high quality sources. The site will anonymously record peoples’ responses to questions and provide some comparison of population level trends versus what people on the site responded with.
+
+On the site, visualizations and survey questions are divided into five main sections:
+
+1. Prevalence of Suicide
+2. Factors That Contribute to Suicide and/or Mental Illness
+3. How Mental Illnesses Are Treated
+4. Suicide Prevention Methods
+5. How Society and Different Organizations Like Colleges Can Address Mental Health in the Community
+
+
+
+## How to run locally
+This project is broken up into two parts currently, the frontend and the backend. This project uses `yarn` instead of `npm` so make sure you install it with:
+```
+yarn install // only the first time to install the dependancies
+yarn start // starts the react dev server
+```
+If you update the backend, you will have to stop the server and rerun it. This is only necessary when you change server.js, the actual frontend pages get served on their own.
+
+## Technologies We Used
+### Frontend
+- React
+- Typescript
+- Data visualizations
+  - Nivo, which is built on top of D3.js
+- Visual Design
+  - Wireframe.cc
+  - Figma
+  - Skeleton CSS framework
+
+We used React as our web framework to organize and build the website.
+We used Nivo to build strong data visualizations for each of our guiding questions.
+We used Figma and Wireframe.cc to plan the layout and visuals of our website.
+Then we implemented those visuals using the Skeleton CSS framework.
+We used TypeScript in parts of our site to explore the technology.
+
+### Backend
+- Node w/ Express server
+- MongoDB for data storage
+- Yarn
+- Hosted on Digital Ocean
+
+We used Node.js with an express server to statically serve our front-end. We use MongoDB to store aggregate answers
+to survey questions. We used yarn as our package manager in place of npm. We hosted the site on Digital Ocean.
+
+## Challenges Faced
+- Most of the team had never used React, Typescript, Yarn, or Nivo before. It took some time to get used to the new technologies but once we got over the learning curve, they were pretty straightforward to use.
+- This project was a race against time. All of us were very busy during finals week and our time management was affected as a result. Even so, we are pretty satisfied with the results.
+- Since data visualization is the core of our project, we spent a lot of time gathering relevant data from a variety of sources. Finding data that was useful and well-formatted was difficult at times. 
+- Roughly half the effort of this project was spent determining what data and visualizations to use, then gathering and formatting the data.
+
+## Group Member Contributions
+### Alan Healy
+- Gathered data for the "Society and Colleges" guiding question
+- Built the questions and visualizations for the "Society and Colleges" guiding question
+- Took notes during meetings
+- Set up the static server
+- Contributed to project proposal and README
+
+### Alex Kinley
+- Gathered data for the "prevalence" and "factors" guiding questions
+- Built the questions and visualizations for the “prevalence” and "factors" guiding questions.
+- Set up the boilerplate for the website
+- Helped other group members with react, typescript, and nivo
+- Set up most of the website functionality
+- Acted as team leader for the project
+
+### Niko Pelletier
+- Gathered data for the "treatments" guiding question
+- Built the questions and visualizations for the “treatments” guiding question
+- Contributed to the project proposal
+
+### Jyalu Wu
+- Gathered data for the "prevention methods" guiding question
+- Built the questions and visualizations for the “prevention methods” guiding question
+- Visual design of the website, including creating wireframes for it
+- Built the “welcome” and “thank you” pages
+- Set up the MongoDB database

backend/.env

@@ -0,0 +1,4 @@
+PORT=5000
+DB_USER=janaGroup
+DB_PASS=PSDglcDcHqLQkrLf
+DB_HOST=cluster0.y1zn9.mongodb.net/

backend/build/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "files": {
+    "main.css": "/static/css/main.b375cd2b.chunk.css",
+    "main.js": "/static/js/main.20bab42b.chunk.js",
+    "main.js.map": "/static/js/main.20bab42b.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.c2a2cf82.js",
+    "runtime-main.js.map": "/static/js/runtime-main.c2a2cf82.js.map",
+    "static/js/2.642e8c97.chunk.js": "/static/js/2.642e8c97.chunk.js",
+    "static/js/2.642e8c97.chunk.js.map": "/static/js/2.642e8c97.chunk.js.map",
+    "static/js/3.9203943c.chunk.js": "/static/js/3.9203943c.chunk.js",
+    "static/js/3.9203943c.chunk.js.map": "/static/js/3.9203943c.chunk.js.map",
+    "index.html": "/index.html",
+    "static/css/main.b375cd2b.chunk.css.map": "/static/css/main.b375cd2b.chunk.css.map",
+    "static/js/2.642e8c97.chunk.js.LICENSE.txt": "/static/js/2.642e8c97.chunk.js.LICENSE.txt"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.c2a2cf82.js",
+    "static/js/2.642e8c97.chunk.js",
+    "static/css/main.b375cd2b.chunk.css",
+    "static/js/main.20bab42b.chunk.js"
+  ]
+}

backend/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.b375cd2b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],f=0,s=[];f<i.length;f++)a=i[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"9203943c"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmy-app"]=this["webpackJsonpmy-app"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var p=c;t()}([])</script><script src="/static/js/2.642e8c97.chunk.js"></script><script src="/static/js/main.20bab42b.chunk.js"></script></body></html>

backend/build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

backend/build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: