Friend-Finder Full Stack App
Overview
A compatibility-based "FriendFinder" application. This full-stack site will take in results from your users' surveys, then compare their answers with those from other users. The app will then display the name and picture of the user with the best overall match. This web app uses Bootstrap, JavaScript, and jQuery for the front-end and Node.js, Express.js, and Heroku server for the back-end. The web app is deployed to the Heroku server using Git.
Technology Used
- Node.js
- MySQL database
- MySQL package Node module is a driver for MySQL.
- Express package Fast, unopinionated, minimalist web framework.
How to use the program
The Home Page introduces the web app and also shows the latest addition to the friends.js
objects array.
The Survey Page asks for your name and a link to your profile pic. You then answer 10 personality questions. If you don't fill in the form properly, such as provide an invalid image, you will get an alert modal describing what needs to be addressed.
When the correct information and questions have been completed and successfully submitted, the app will determine the match the most compatible friend from the friends
array in a modal. When the modal is closed the home page is loaded showing you as the newest addition to the friends array.
Folder Structure
├───app
│ ├───data
│ ├───public
│ │ └───assets
│ └───routing
└───node_modules
/server.js
- main node.js app that runs the server/app/data/friends.js
- contains friends array with a few examples./app/public/home.html
- main page that takes you to the survy. Also shows the latest friend added./app/public/survey.html
- survey that asks for your name, link to profile pic, and 10 questions. Once completed an algorithm determines your friend compatibility by matching your answers to others./app/public/assets/
- contains styles.css and background images./app/routing/apiRouting/apiRoutes.js
- takes care of the GET and POST routes.- A GET route with URL
/api/friends
- gets JSON data of all friends in the friends array. - A POST route with URL
/api/friends
- handles the Form data, runs the compatibility algorithm, and returns a JSON object of the closest match./app/routing/apiRouting/htmlRoutes.js
- takes care of the HTML pages. - A GET route with URL
/
- sends thehome.html
page. - A GET route with URL
/survey
- sends thesurvey.html
page.
- A GET route with URL
How the logic works
The program compares the user's answers with those in the current friends array.
Below, Bruce is the new user. Charlie Brown and Lucy Van Pelt are from the friends
array.
We loop through each friend object in the friends
array of objects and compare it's score array with the user's score array by getting the difference of each score. The friend with the lowest score will be the most compatible with the user.
[ 2, 1, 4, 5, 2, 2, 3, 3, 4, 3 ] 'Charlie Brown' - FROM FRIENDS ARRAY
[ 5, 4, 3, 4, 4, 3, 2, 2, 3, 3 ] 'Bruce' - NEW USER
[ 3, 3, 1, 1, 2, 1, 1, 1, 1, 0 ] - Differences pushed into a temp array
score: 14 - Sum of the Differences
[ 3, 4, 3, 3, 1, 3, 5, 2, 2, 2 ] 'Lucy Van Pelt' - FROM FRIENDS ARRAY
[ 5, 4, 3, 4, 4, 3, 2, 2, 3, 3 ] 'Bruce' - NEW USER
[ 2, 0, 0, 1, 3, 0, 3, 0, 1, 1 ] - Differences pushed into a temp array
score: 11 - Sum of the Differences
Each friend is put into an object containing the friend name, image link, and score. This object is then put into another array of objects which is sorted from lowest score to highest using the .sort() method. The most compatible friend will be the first since it has the lowest score.
Screenshots
Heroku CLI setup & Deployment
To deploy to Heroku you should modify the PORT variable otherwise it will not run on a public server.
var PORT = process.env.PORT || 8080;
heroku login
heroku create
heroku info oc-friend-finder
-get info on heroku appheroku git:remote oc-friend-finder
-setup remote for herokugit status
git remote -v
-shows fetch and push locations of both git and herokugit push heroku master
-if you use origin instead of heroku it will push to GitHub instead.heroku logs --tail
-for log errors
How to import apiRoutes.js and htmlRoutes.js to server.js
- From Stackoverflow: to import the apiRoutes.js and the htmlRoutes.js to server.js you use
module.exports = function (app) {..}
in both js files andrequire("./app/routing/apiRoutes")(app);
andrequire("./app/routing/htmlRoutes")(app);
in the server.js file.
Getting the sum of an array of integers
From W3Resource.com I learned that you can use the .reduce()
method on an array of integers.
score: tmpArray.reduce((partial_sum, a) => partial_sum + a)
Sorting an array of objects
From JavaScriptKit.com I learned how to sort the friends array by score in ascending order.
sortedResults = temp.sort((a, b) => { return a.score - b.score });
Form Validation
- Text Input
- For the name field I check if it is blank or not.
- For the Photo link I used a regular expression and the
.match()
method
function checkTextInput() {
const regex = /^(.*)(\.png|\.jpg|\.jpeg|\.gif)$/g;
if (($("#inputName").val().trim()).length > 0 && ($("#inputPic").val().trim()).length > 0 && ($("#inputPic").val().trim()).match(regex)) {
console.log("both text have value - true");
return true;
} else {
console.log("both text have value - false");
return false;
}
-
Radio Buttons
- I used a for loop to check if each radio group is checked or not. If checked I push true to a
flagArray
, if not push false into theflagArray
. - I then check the
flagArray
to see if false is in the array using.includes()
array method
- I used a for loop to check if each radio group is checked or not. If checked I push true to a
-
If any of the form inputs have errors an Alert modal will pop-up showing what needs to be fixed.
Survey questions
OpenPschoMetrics.org Personality Quiz - I used some of the questions from this personality quiz for the survey.
Other Resources
- Pexels Free Photos Pictures of People
- Image compressor for shring image file sizes.