It's A Match!, a full-stack site, implements friend matching based on users' responses to a ten question survey. The user responds to questions with values from 1 (Strongly Disagree) to 5 (Strongly Agree). When the survey is submitted, the site will take in the results and compare the user's answers with those from other users. An existing user record closest to the current user's responses is found and returned. The app will then display the name and picture of the user with the best overall match. The closest set of user responses is defined as the set with the lowest absolute difference for all ten questions combined.
It's A Match! is deployed to Heroku. Please check it out here.
To install the application follow the instructions below:
git clone https://github.com/SueJStevens/FriendFinder.git
cd FriendFinder
npm install
To run the application locally and access it in your browser, first set the PORT
environment variable to the value of your choice. An example is shown below.
export PORT=8080
After the PORT
environment variable has been set, run the Node.js application with the command below.
node server.js
The application will now be running locally on PORT
, in this case that is PORT 8080
You can then access it locally from your browser at the URL localhost:PORT
, in this case localhost:8080
.
- Heroku (https://www.heroku.com/home)
- HTML, CSS, JavaScript, jQuery
- Bootstrap v4 (https://getbootstrap.com/)
- Javascript, jQuery
- Node.js (https://nodejs.org/en/)
- Express.js (https://expressjs.com/)
-
server.js
file sets up the Express server, specifying our port number as well as the environment variable will be used by Heroku (process.env.PORT
), the npm packages that need to be loaded (express
,body-parser
andpath
), and the routes. -
There are 2 front-end HTML files (
home.html
andsurvey.html
). They determine the user experience - the home page and the survey, which will also show the resulting best match via a modal. -
The routing files (
htmlRoutes.js
andapiRoutes.js
) contain the back-end logic. The HTML routes display the survey and homepage based on the URL that is accessed, and the API routes send back content in our server-side data (initially set infriends.js
and added to via the survey) or posts new content from the survey response. -
The application's initial data is stored inside of
app/data/friends.js
as an array of objects following the format below.
{
"name": "Sue Stevens",
"photo":"https://user-images.githubusercontent.com/39141985/48185235-3f2d7080-e2e9-11e8-99a5-f8634ec8548b.png",
"scores": [5, 1, 3, 3, 5, 5, 4, 2, 3, 3]
}
-
The user's most compatible friend is determined from a calculation comparing the user's survey scores to the scores of all friends in the application data, returning the friend with the minimum difference in scores.
-
A modal is revealed to the user displaying both the name and picture of the closest match.