Introducing DokiCupid, an online dating software made for anime figures!

DokiCupid are a duplicate of common dating site OkCupid. The Japanese name “doki-doki” describes the noises of one’s beating cardio and it is usually always present excited thoughts of love.

DokiCupid features consumer pages, matchmaking, filtered lookup, and instant-messaging between customers

This application utilizes rail and Postgres on the back-end, and React/Redux to manage the front-end.

Note: DokiCupid is a two-week venture published as an element of App Academy’s full-stack program.

Enhance (02/05/20): DokiCupid has grown to be mobile-friendly!

  1. Javascript
  2. Ruby on rail
  3. PostgreSQL
  4. HTML
  1. React.js
  2. Redux
  3. Rails ActionCable for real time chatting
  4. jQuery for AJAX API needs
  5. AWS S3 buckets for individual avatar and profile pictures
  6. BCrypt for User Authentication
  7. NPM zipcodes to estimate length between customers

After log in, customers were welcomed using Doubletake page which shows profile previews for customers that the current individual has not however paired with. Consumers can see their own fit percentage with each presented individual and also have the choice to go to that owner’s visibility.

Enjoy and browse


The enjoy web page gets previews of all of the individual users for consumers who are not but paired making use of recent user, in addition to the point from and being compatible score with each individual.

The browse webpage permits a user to filter prospective fits by labels including certain individuality faculties, sex detection, and exactly what the more consumer is actually “looking for” on this app. Several tags might given at once, together with outcome will exhibit people that see a few of these demands. Users may also elect to type these results by being compatible portion in increasing or reducing order.

A majority of my personal React equipment made use of once you understand exactly who the existing consumer was already paired with, which they had earlier “liked”, and which customers have “liked” all of them, to decide which suggestions would be displayed. In the event the county did not currently hold this data, a GET demand was developed to /api/matches .

The techniques earlier labeled as on current_user consider techniques we described in the consumer model, including the appropriate:

When checking out a person’s very own visibility webpage, a user can decide to view, change, or erase their particular profile. When modifying, customers also can attach extra photos for their visibility or remove any current photos.

Whenever consumers visit various other customers’ users, they may be able “like”, or demand as matched up with, the consumer they’re watching. In the event that asked for individual picks to “like” all of them straight back, a match is made allowing the two customers to deliver communications one to the other.

Fits and texting

During the suits web page, consumers can see who they really are currently coordinated with, who they “liked”, and whom “liked” them. When two people collectively “like” each other, the fit is created, and another associated with users can start a conversation because of the more on the communications webpage. Real-time speak between paired users is actually implemented using actions wire in Rails.

Because just one conversation should occur in discussions dining table on the database for a set of matched up people, I typed a-scope process :between into the talk product to be utilized when trying to develop a conversation at operator. If one already is out there when you look at the databases, the existing one is came back; if a preexisting talk just isn’t receive, the strategy produces a fresh discussion within two consumers and returns that dialogue.

One of the more challenging aspects of this venture had been configuring activity wire for real time texting.

In MessagesChannel , We explained a method make which will take in information and creates a message during the database with this data. Subsequently, it shows the socket object for the “messages_channel” referenced when you look at the subscribed way.

Leave a Comment