Dating app with real time chatting feature built with React, Ruby on Rails, Action Cable, Action Mailer, Active Record
Welcome to Dating App project!
This is a full-stack project using React to build frontend and Ruby on Rails to build backend.
The backend code is in the root directory of this project, and the frontend code is in the client directory.
This project has also been deployed to Heroku at here.
Fork and clone this repo, cd into the directory and run:
bundle installto install all the backend dependencies, then run:
rails db:create db:migrate
rails sto setup the database and start the server.
Next, open another terminal window and run:
npm install --prefix client
npm start --prefix clientto install all the frontend dependencies and start the application.
Please note that you will also need to install redis-server, the installation process depends on your system, it is quite simple to find a tutorial by googling redis-server plus your system name. Do not forget to run the redis-server after installing it.
Upon loading, the user will see the homepage with only two buttons, Create Account and Login. Either button will bring up a signup or login box. There is also a forget your password? button which will prompt user to enter their registered email address and send out a email containing a link for resetting password, which, upon clicking will bring user to the resetting password page. One thing to notice here, the link is only valid for an hour, so if the user clicks the link one hour after he/she received the email, the page will render an error message (The token has expired) and user has to restart the resetting process.
The gif below shows the process.
When user is signing up for a new account, after filling in the email address, password and password confirmation, the user will be directed to the Onboarding page, where user will be asked to provide some information about himself/herself, the information will be used for matching the user with other users.
After filling out those information, user will be brought to the Dashboard page, where he/she can browse other users.
To make setup easier, I have included a seeds.rb, you can seed data by running:
rails db:seedThe seeds.rb will create 16 new users, the user data comes from Marvel Movies' characters. You can find their registered email address in the seeds.rb file, the structure is [email protected], and their password are all 123456.
After logging in, you will be brought to the dashboard page. On the right side, you will find a list of photos from other users, you can swipe right the photo to like the person, or swipe left to dislike him/her. Once you like or dislike a person, he/she will not show up in the right side anyone. If you cannot decide whether to like or dislike a person right away, you can swipe up or down to skip once, and next time you refresh the page, he/she will show up again.
On the left side of the page, under Matches, only user who you swiped right and he/she swiped right on you will show up.
One thing to note here is that, since I have implemented Action Cable into the app, the matches will show up in real time, which means that, assuming we are logged in as Tony Stark and Pepper Potts, after Tony swipes right on Pepper, as soon as Pepper swipes right on Tony, they will show up in each other's Matches immediately.
The gif below shows this process, pay close attention to the real time update.
Once user matches another user, they can start chatting! With Action Cable implemented, all the new messages will show up in real time. I've also build notification feature which will nofity user of new messages by show numbers of unread messages in red circle. Once user has read the messages, the notification goes away. The gif below shows how chatting works, note the messages show up immediately on both sides.
User can click on the View Profile button to view other user's profile.
By clicking the user's own photo on the top left corner, user can view his/her own profile and edit their info. The user can also change his/her registered email address and password. The gif below shows how it works. Since it's hard to show the change of password on the screen, I will demonstrate how to change email address, and for the password, I will show that if you entered the wrong current password, server will response with an error message.
The app is optimized for mobile devices, the image and gif below show how the app looks in mobile devices.
That's all for the app walkthrough, hope you have fun reading this.
Big thanks to Ania Kubów for her awesome videos which inspired me with this project and help me set up the starter code. You can check out her video here.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.