MATCHA - Dating App

This is a team project, a part of the web branch at Hive Helsinki coding school.

• Task
• Authors
• Tech stack
• Functionality
• Planning
  • Work breakdown including time tracking
  • Architecture
  • Database structure
  • Website wireframe
• Live preview on HEROKU (demo username love password 1234Aa)
• App Video Preview
• Run locally

Authors

Tatiana - Back/Front - check her profile

Diana - Back/Front - check her profile

Task

The aim of this project is to build a Tinder-like web app, where the users can create their profile, browse through a list of recommended profiles or conduct a search by age, distance, fame rating, commong tags. Users can like, report and block other users and chat with users that liked them back.

Project constraints:

• Clientside: HTML, CSS, Javascript
• Relational or graph-oriented database
• Micro-frameworks and UI libraries are allowed
• No ORM, validators, or User Account Manager
• No errors, warnings or notice on both server- and client- sides
• No security breaches (e.g. no SQL, HTML injections, plain passwords in the database)
• Compatible at least with Firefox (>=41) and Chrome (>= 46)
• Responsive design

Stack

This is the first project in Hive Helsinki web branch when we were allowed to choose the language.

Our team decided to use this opportunity to learn PERN stack. This was the first time for both of us to use PostgreSQL, React, Redux, and also JWT, Material UI and Socket.io. We also used this project to learn more about Node.js projects structures (including folder structure, configuring env variables and MVC pattern).

• PostgreSQL
• Express
• React, Redux
• Node
• JWT
• Material UI
• Socket.io

Functionality

• User features:
  • Step-by-step registration, login (Oauth), and password reset through email link.
  • User data management, incl. edit profile data, change password and geolocation.
  • View own and other user profiles.
  • View profile visit history, list of connected and blocked profiles.
• Matching features:
  • Multiple infinite scroll galleries with a list of suggestions that match his/her profile (recommended, online, popular, nearby).
  • Matching Alogrimth using scoring weights based on Chinese and Western horoscope compatibility, common tags, fame rating, location, age and gender.
  • Advanced range sliders to sort and filter users by horoscope believe, common tags, location, fame rating and age.
• Chat features:
  • FB messenger-like real-time chat for connected users.
• Notifications features:
  • Real-time push notifications when the user receives a like/unlike, message from another user or user's profile is checked.

Planning

Work breakdown including time tracking

Tatiana planned work breakdown, her focus was on developing matching algorithm, user profile creation and interactions (likes, visits, blocked). Tatiana was the driving force behind UX/UI design of the app. Tatiana's timetracking

Diana focus was on user features (inc. account creation, authentication, profile data management), real-time chat and notifications. Diana was the driving force behind the app architecture. Diana's timetracking

Detailed work plan with breakdown and phasing.

Architecture

Database structure

Website wireframe

See full mobile and desktop versions.

App video preview

Step-by-step registration

Step-by-step account creation

Browsing AstroMatcha

Search

Chat / Notifications

Mobile version

Run locally

• Git clone repo

• Install PostgreSQL and its PostGIS extension brew install postgresql postgis or apt install postgresql postgis

• Make sure you can send email from terminal

• Install nodejs and npm brew install nodejs npm or apt install nodejs

• Sign up and get credentials from:

  • your_google_id and your_google_secret from Google
  • your_google_maps_api from Google map API
  • your_geoip_lite_key from Geoip-lite

• Create a file .env in backend folder and update with your credentials

  # database configuration
  DB_USER=your_db_user_name
  DB_NAME=matcha
  DB_PWD=your_db_user_password
  DB_HOST=*.*.*.*
  DB_PORT=5432
  
  # server configuration
  PORT=5000
  IP=localhost
  
  # JWT secret
  JWT_SECRET=your_secret
  
  # mail configuration
  EMAIL=your_email
  EMAIL_PWD=your_password
  
  # google credentials for google signin
  GOOGLE_CLIENT_ID=your_google_id
  GOOGLE_CLIENT_SECRET=your_google_secret
  
  # geoip
  GEOIP=your_geoip_lite_key
  
  # development mode url
  MATCHA_URL=http://localhost:3000
  

• Create a file .env.local in frontend folder and update with your credentials

  REACT_APP_GOOGLE_MAPS_API_KEY=your_google_maps_api
  REACT_APP_GOOGLE_CLIENT_ID=your_google_id
  
  

• Run command npm run init in the root folder to install all dependencies in the backend and frontend and set up geoip-lite.

• Run command npm run prod to start a server and open localhost:5000 in your preferred browser in production mode.

• To run in development mode:

  • Change line 21 in frontend/src/App.js from const socket = io() to const socket = io('http://localhost:3000').
  • Run command npm run dev to start a server and open localhost:3000 in your preferred browser in development mode.