Final Project: Keen Dating App

Keen is a dating app built with React, Node, Express, and PostgreSQL

Contributors:

• Phil Yoo
• Denis Kruteskii
• Ava Kuang

Core Features:

• Users can edit their profile and see preview of the new changes
• Users can see other profiles based on preferences and swipe left or right
• Once both users have liked eachother they will be matched and can start chatting in real time or video call
• Users have access to emojis and gifs built into the chat system
• Users can update their profile based on multiple things such as gender, age, location, height, lifestyle choices and more

Other features/clean ups for the future:

• Account creation and sign up flow
• Voice only call
• Implement Spotify API to display top listened artists and set their fav song on their profile
• Blocking + Unmatch system
• Various clean ups - loading spinners, refactor, bcrpyt
• Better UI interfaces - incoming facetime call alert, updated profile alerts, various minor things to improve user experience

Final Product

Main Use, Live Chatting and Video Call

Landing

Home

Matches

Preferences Page + Preference Option

Profile View/Edit

Emojis/Giphy API

Dependencies

Front End

• "@giphy/js-fetch-api": "^4.4.0",
• "@giphy/react-components": "^6.0.1",
• "@heroicons/react": "^1.0.6",
• "axios": "^0.18.1",
• "dotenv": "^16.0.1",
• "emoji-picker-react": "^3.6.1",
• "moment": "^2.29.4",
• "multi-range-slider-react": "^1.0.7",
• "pigeon-maps": "^0.21.0",
• "react": "^16.8.6",
• "react-dom": "^16.8.6",
• "react-router": "^6.3.0",
• "react-router-dom": "^6.3.0",
• "react-scripts": "^5.0.1",
• "react-tinder-card": "^1.4.5",
• "socket.io-client": "^4.5.1",
• "tailwindcss": "^3.1.8"
• "peerjs"

Back End

• "body-parser": "^1.18.3",
• "cookie-session": "^2.0.0",
• "dotenv": "^16.0.1",
• "express": "^4.18.1",
• "nodemon": "^1.19.4",
• "pg": "^8.7.3",
• "socket.io": "^4.5.1"

Getting Started

1. Clone the repo

2. Create .env file and fill out the following with your own creds

   • Backend - can copy this one
     • PGHOST=localhost
     • PGUSER=labber
     • PGDATABASE=final_2
     • PGPASSWORD=labber
     • PGPORT=5432
   • Frontend - use your own creds
     • REACT_APP_MQ_KEY='mapquest_api_key'
     • REACT_APP_GIPHY_KEY='giphy_api_key'

3. NPM I in both express-back-end and react-front-end directories

4. Cd into express-back-end and start with npm run go

5. Cd into react-front-end and start with npm start

Hope you enjoyed our app and all the work we put into it!