software-students-spring2022 · github-classroom · Feb 18, 2022 · Feb 26, 2022 · Feb 26, 2022 · Feb 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -123,4 +123,7 @@ typings/
 
 ## Jekyll artifacts
 **/.jekyll-cache
-**/_site/
+**/_site/
+
+## Yarn lock
+yarn.lock
diff --git a/BUILDING.md b/BUILDING.md
@@ -0,0 +1,21 @@
+# Building and Launching the product
+
+## Build and Launch the the Back end
+
+**Initial Setup**
+
+- Clone the repository onto your local machine with **git clone**
+
+## Build and launch the Back end
+
+- Navigate into the **back-end** directory
+- Run **npm install** to install all the dependencies listed in the **package.json** file.
+- Run **npm start** after building to launch the back-end server.
+- The site will be available to access through **localhost:3000**
+
+## Build and launch the front end
+
+- Navigate into the **front-end** directory.
+- Run **npm-install** to install all the dependecies in the **package.json**.
+- Run **npm start** to launch the React.js server,  or build with **npm run build**
+- The Access to the site will be available through the browser **localhost:3000**
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,2 +1,16 @@
 # Guide to Contributing
-Delete the contents of this file and replace with the contents of a proper guide to contributing to this project, as described in the [instructions](./instructions.md)
+## Team Norms 
+
+**Our Standards**
+Our team aims to foster an open and welcoming environment, where every individual feels comfortable participating in 
+Examples of behavior that contributes to creating a positive environment include:
+- Be respectful of different viewpoints 
+- Be empathetic towards each other  
+- Openly communicate and resolve any issues between teammates 
+
+## Git Workflow
+**Pull Request Process**
+- All pull requests should be sent to the "develop" branch
+- The "develop" branch is where the version planned for release after a sprint will be stored 
+- Pull requests should **only contain one change**; If you have multiple changes to submit, submit changes into their own branch on your fork 
+- You may merge the pull request after you have a sign-off from two other developers
diff --git a/README.md b/README.md
@@ -1,19 +1,48 @@
-# Project Repository
+[![CircleCI](https://circleci.com/gh/software-assignments-spring2022/final-project-blooddonation/tree/master.svg?style=shield)](https://circleci.com/gh/software-assignments-spring2022/final-project-blooddonation/tree/master)
 
-This repository will be used for team projects.
+# Blood Donation
 
-Several sets of instructions are included in this repository. They should each be treated as separate assignments with their own due dates and sets of requirements.
+- http://142.93.246.192:4000/
+- [Presentation Slides](https://docs.google.com/presentation/d/1UEARUPQDFrGnPMcGVSJ3nsk2RQWTkuOM0XINxeT-a8A/edit#slide=id.p)
 
-1. See the [App Map & Wireframes](instructions-0a-app-map-wireframes.md) and [Prototyping](./instructions-0b-prototyping.md) instructions for the requirements of the initial user experience design of the app.
+### Contributors
 
-1. Delete the contents of this file and replace with the contents of a proper README.md, as described in the [project setup instructions](./instructions-0c-project-setup.md)
+- [Keyanee Alexandre](https://github.com/keyaneealexandre)
+- [Rachel Kindangen](https://github.com/rkindangen)
+- [Joshua Plattner](https://github.com/jplattner73)
+- [Elena Wang](https://github.com/ELENA0206)
+- [Aaron Pahwa](https://github.com/ampahwa)
+- [Shrankhla Chand](https://github.com/shrankhla1234)
 
-1. See the [Sprint Planning instructions](instructions-0d-sprint-planning.md) for the requirements of Sprint Planning for each Sprint.
+### Product Vision Statement
 
-1. See the [Front-End Development instructions](./instructions-1-front-end.md) for the requirements of the initial Front-End Development.
+People use apps and websites to connect with others, find furniture, restaurants, clothes, and other things that they need. The same technology can be used to create a centralized place to find blood donation centers in the NYC area to help stop the shortage.
 
-1. See the [Back-End Development instructions](./instructions-2-back-end.md) for the requirements of the initial Back-End Development.
+### About
+Our App will be able to help collect and donate blood easily. Users who have any mobile devices or pc with an active internet connection can contact and start searching for a donor, donation sites, information about anything related to donating blood easily through this website.
 
-1. See the [Database Integration instructions](./instructions-3-database.md) for the requirements of integrating a database into the back-end.
+### What and why?
 
-1. See the [Deployment instructions](./instructions-4-deployment.md) for the requirements of deploying an app.
+Since the pandemic started blood donations have decreased by 10% and as of December 2021 the US blood supply is at its lowest level in a decade. The inventory of some blood types has dropped below one day’s supply in recent weeks, which is a dangerously low level. Despite the consistent demand for blood in healthcare, only about 3% of age-eligible people donate blood yearly. Additionally, many people aren't aware of whether or not they're even eligible to donate in the first place. Having a centralized app to not only fine blood donation centers, but also answer FAQs and find out about donation eligibility could increase the percentage of people who donate blood yearly.
+
+### For whom?
+
+- People who are interested in learning more about blood donation and people who are interested in donating blood.
+- The public will be able to determine their eligibility and can find the nearest blood bank or blood drive.
+
+
+### Contribute
+
+If you want to know more about how you can contribute you can head over to the [CONTRIBUTING.md](./CONTRIBUTING.md)
+
+### UX-Design
+
+To view the site map, wireframe, and prototype please check out the [UX-DESIGN.md](./UX-DESIGN.md)
+
+### Building
+
+To view how to build and launch the project go to the [BUILDING.md](./BUILDING.md)
+
+### Testing
+
+To view how to run unit test on backend please go to the [TESTING.md](./TESTING.md)
diff --git a/TESTING.md b/TESTING.md
@@ -0,0 +1,48 @@
+### How to run Javascript Unit Testing (WORK IN PROGRESS)
+
+### What is Unit Testing and what does it do
+
+* Unit Testing will allow us to check all small pieces of cide to deliver information and check the final result.Failure in a unit test shows without a doubt which part of the code doesn’t work.
+
+### What the test is for
+
+The goal of the unit test is to make your tests:
+-Readable
+-Maintainable
+-Trustworthy
+
+### Guidelines
+
+* The goal of unit tests is to prove that the smallest unit of code behaves exactly as you expect in isolation.
+-Each test should have a unique name clearly stating what unit is being tested.
+-Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality.
+-Each test should follow the project's JavaScript Code Guidelines
+
+
+### Testing
+ The testing for the backend of the project will be done using **Mocha** and **Chai**
+
+ If you want to test code in the browser using these mentioned tool, do the following , 
+
+ run npm install mocha chai --save-dev
+ npm install -g mocha
+
+* This installs the packages mocha and chai. Mocha is the library that allows us to run tests, and Chai contains some helpful functions that we’ll use to verify our test results.
+
+* to unit test your application, you need to include Chai, by using **var chai = require('chai');** at the top of the test file.
+* You can run the tests using the **mocha** command, instead if opening a browser.
+
+* We use Mocha's CSS styles to help us give our tests the correct formatting.
+* The testing files will be stored in setuptests
+
+In order to help you write test names properly, you can use the "unit of work - scenario/context - expected behaviour" pattern:
+
+
+
+
+
+
+
+### Run Test
+To run test in the **frontend** directory, install by using **npm install** and launch by using **npm start**
+To run Test in the **backend** directory, install by using **npm install** and launch by using **npm start**
diff --git a/UX-DESIGN.md b/UX-DESIGN.md
@@ -1,8 +1,155 @@
 # User Experience Design
 
-This repository contains instructions and files for two assignments that together comprise the user experience design phase of a web app.
 
-Replace the contents of this file with the completed assignments, as described in:
+# App map
+![Blood Donation App/Site Map](./ux-design/BloodDonationSiteMap.png)
+
+# Prototype
+[Click here to view the prototype](https://invis.io/Q312FCGAJ9XV)
+
+ * Please note that with this prototype you will only get a you're eligible notification (overlay) if you decide to login from the map, but in reality it will be based on your answers to the eligibility questions for the type of blood donation you would like to make. 
+ * Also note that if you go to your profile and select "Find Donation Center" you will not be asked to login again from the map. Once you select a center, you will recieve that first question asking which type of blood donation you would like to make and then from there you will get a notification stating whether ot not you're eligible.
+
+# Wireframe
+
+## Home Page
+![Home Page](./ux-design/Home-Page.png)
+
+* Gives info about the national blood crisis with links to articles
+* Gives info about hoe blood donations help along with some videos
+* Gives info about why one should host a blood drive and links to our "Other Ways to Help" page so that users can learn about setting up blood drives
+
+
+## Map Page
+![Map Page](./ux-design/Map-Page.png)
+
+* When clicking on the Map page, a user will be shown blood donation centers and drives close to them. 
+* They will also have the option to put in an address or zip code. 
+* From there they can select where they would like to go to donate blood. 
+* This action triggers an initial process with a series of overlays to determine the user's eligibility based on factors such as age, weight, and current health. (see below)
+
+#### Question 1
+![Question 1](./ux-design/Question-1-Overlay.png)
+
+* They will be asked what type of donation they would like to make so that we can determine what questions to ask or if they are logged in we can check to see if they are eligible for that type of donation
+
+#### Question 2
+![Question 2](./ux-design/Question-2-Overlay.png)
+
+* After being asked what type of donation they would like to make, if they are not logged in they will be asked if they have an account.
+
+#### Question 3
+![Question 3](./ux-design/Question-3-Overlay.png)
+
+* If the answers no to Question 2, They will be asked if they want to create an account.
+
+#### Eligibility Questionnaire
+![Questionnaire Overlay](./ux-design/Eligibility-Quiz-Questionnaire.png)
+
+* If the answers no to Question 3, They will given an eligibility quiz based on the type of donation they would like to make.
+* Once finished, an overlay will appear telling the user whether or not they're eligible.
+
+#### Login
+![Login Overlay](./ux-design/Eligibility-Quiz-Questionnaire.png)
+
+* If the answers yes to Question 2, an overlay will show allowing them to login.
+* Once they login an overlay will appear telling the logged in user whether or not they're eligible (based on profile info and their answer to question 1)
+
+#### Sign Up
+![Sign up Overlay](./ux-design/Eligibility-Quiz-Questionnaire.png)
+
+* If the answer yes to Question 3, They will be given an overlay to sign up
+* Once they sign up, an overlay to the "Eligibility Questionnaire" (above) they will appear.
+* Once finished, an overlay will appear telling the user whether or not they're eligible.
+
+#### Eligible Overlay
+![Eligible Overlay](./ux-design/Eligible-Overlay.png)
+
+* Based on their answers users will get an overlay notification stating that they are eligible
+* The overlay provides a link to the center's website to make an appointment
+
+#### Not Eligible Overlay
+![Not Eligible Overlay](./ux-design/Not-Eligible-Overlay.png)
+* Based on their answers users will get an overlay notification stating that they are not eligible
+* The overlay provides a link to our "Other Ways to Help" page
+
+
+
+
+## FAQ Page
+![FAQ Page](./ux-design/FAQ.png)
+
+"FAQ" page will provide some general information and have links to the "Eligibility" page and "Other Ways to Help" page
+
+
+### Eligibility Page
+![Eligibility Page](./ux-design/Eligibility.png)
+
+* Gives eligibility requirements based on donation type.
+* Include links to a page about "Information for Teen Donors" and a "Learn More" page for each of the donation types
+
+#### Information for Teen Donors
+![Information for Teen Donors](./ux-design/Student-Info.png)
+
+* This will provide general information for teenagers who want to donate blood.
+
+#### Learn More
+![Learn More Pages](./ux-design/Learn-More.png)
+
+* Each of the blood Donation Types will have a page with the same layout as pictured, which gives information about that specific type of blood donation.
+* You can also get to these pages from the "Profile" page by clicking on the type of blood donation that you're elgible for under "You are Eligible for"
+
+
+
+
+## Profile Page
+![Profile Page](./ux-design/Profile-Page.png)
+
+* Allows users to see what types of blood donations they are eligible for.
+* It allows them to retake the quiz if their health condition changes.
+* Also allows them to find a donation center near them by clicking "Find Donation Center" that links them to the "Map" page
+* They can also edit their profile (name, password, picture, email) by clicking "Edit Profile"
+
+
+### Edit Profile
+![Edit Profile](./ux-design/Edit-Profile.png)
+
+* From the "Profile Page" users can edit their profile info (name, password, picture, email)
+
+
+
+
+## Contact Us
+![Contact Us Page](./ux-design/Contact-Us-Page.png)
+
+* Contact info of the team
+* Also live chat/message option if users have questions. Clicking this opens up a chat/message overlay
+
+#### Chat/Message Overlay
+![Chat/Message Overlay](./ux-design/Chat-Overlay.png)
+
+* Overlay for chat that appears when users click message on the Contact Us page.
+
+
+
+## Login
+![Login](./ux-design/Login.png)
+
+* Users can login or sign up if they do not have an account.
+* From the Login page the user will be brought to the "Profile" page
+
+
+
+## Sign Up
+![Sign Up](./ux-design/Signup.png)
+
+* When clicking login if the user does not have an account they can click “Sign Up” to create an account.
+* When you register to sign up you will be brought to the "Eligibility Questionnaire/Quiz" that will help determine which type(s) of blood donation they are eligible for. 
+
+
+# Eligibility Questionnaire/Quiz
+![Eligibility Questionnaire/Quiz](./ux-design/Eligibility-Quiz.png)
+
+* Upon Sign Up from the main Login/Signup page users will take the "Eligibility Questionnaire/Quiz" that will help determine which type(s) of blood donation they are eligible for.
+* Users will also be brought to this page if they go to the "Profile" page and select "Retake Eligibility Quiz"
 
-- [app map & wireframe instructions](instructions-0a-app-map-wireframes.md).
-- [prototype instructions](instructions-0b-prototyping.md)
diff --git a/back-end/.eslintrc.json b/back-end/.eslintrc.json
@@ -0,0 +1,14 @@
+{
+  "env": {
+    "commonjs": true,
+    "es2021": true,
+    "node": true,
+    "mocha": true
+  },
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["prettier"],
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "rules": {}
+}
diff --git a/back-end/.prettierrc b/back-end/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "singleQuote": true
+}
diff --git a/back-end/accountData.js b/back-end/accountData.js
@@ -0,0 +1,13 @@
+const accountData = [
+  {
+    firstName: 'Rachel',
+    lastName: 'Kindagen',
+    email: '[email protected]',
+    password: 'helloworld123',
+    age: 21,
+    eligible: ['Whole Blood', 'Power Red', 'Platelet'],
+    loggedIn: false,
+  },
+];
+
+module.exports = accountData;