Introducing DokiCupid, an online dating application created for anime characters!

Introducing DokiCupid, an online dating application created for anime characters!

DokiCupid try a clone for the well-known dating website OkCupid. The Japanese phase “doki-doki” talks of the audio of one’s defeating cardiovascular system and is also usually used to present enthusiastic thinking of enjoy.

DokiCupid features user pages, matchmaking, blocked search, and instant-messaging between people.

This software employs Rails and Postgres throughout the back-end, and React/Redux to handle the front-end.

Note: DokiCupid is a two-week venture presented within software Academy’s full-stack curriculum.

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

  1. Javascript
  2. Ruby on Rails
  3. PostgreSQL
  4. HTML
  5. CSS/SCSS
  1. Respond.js
  2. Redux
  3. Rails ActionCable for real time messaging
  4. jQuery for AJAX API desires
  5. AWS S3 buckets for consumer avatar and visibility photo
  6. BCrypt for Individual Authentication
  7. NPM zipcodes to assess range between consumers

After logging in, consumers are met because of the Doubletake page which showcases profile previews for consumers that recent consumer has not but matched up with. Users is able to see her fit amount with every exhibited individual and have the solution to head to that customer’s visibility.

Explore and browse

The Explore page gives previews of user profiles for people who are not but paired using the current consumer, together with the distance from and being compatible review with every user.

The Research page enables a user to filter prospective suits by labels such as certain characteristics qualities, gender identification, and precisely what the some other consumer are “looking for” about this software. Several labels are given in the past, and the information will exhibit customers that satisfy all of these requirement. Users may elect to type these listings by being compatible portion in growing or lowering order.

A lot of my personal React elements used knowing exactly who the current user was already paired with, just who that they had previously “liked”, and which consumers had “liked” them, so that you can decide which details might possibly be shown. In the event the condition wouldn’t already hold these details, a GET request was created to /api/matches .

The strategy above known as on current_user refer to methods we explained regarding the User model, for instance the after:

Whenever visiting an individual’s very own profile webpage, a user can pick to look at, revise, or delete her profile. When editing, consumers may also connect extra images for their visibility or delete any existing photos.

Whenever users check out additional customers’ users, they could “like”, or demand to-be coordinated with, the user these are typically watching. If the required individual decides to “like” all of them back, a match is generated makes it possible for both users to transmit emails to one another.

Suits and Messaging

In the Matches page, users is able to see who they are currently coordinated with, which they “liked”, and whom “liked” all of them. When two customers mutually “like” one another, the fit is made, and another of the users will start a discussion using different on the Messages page. Real-time chat between matched customers are applied making use of Action cable tv in Rails.

Because singular conversation should exists in talks table for the database for a pair of coordinated customers, we authored a scope method :between when you look at the talk design to be utilized when wanting to produce a conversation during the controller. If one already is available inside database, the current one is returned; if a current conversation isn’t receive, the method produces an innovative new dialogue between the two people and comes back that discussion.

One of the most challenging aspects of this project is configuring actions cable tv for real-time texting.

In MessagesChannel , We defined an approach generate which takes in facts and helps to create a note in the database with this facts. Subsequently, they broadcasts the outlet item toward “messages_channel” referenced within the subscribed means.

Leave a Reply

Your email address will not be published. Required fields are marked *