Dating app with instant chatting capabilities built with React, Ruby on Rails, Action Cable, Active Record and Action Mailer

Crossover is a full-stack project built with a React Frontend and a Ruby on Rails backend, that allows users to match with their favorite 90's cartoon characters and chat with real time messages. This app was created as my Phase 4 project for Flatiron school and recently restyled.

This app features full user authentication and authorization, react time messaging and matching using WebSockets, and allows users to easily create and edit their profile, as well as view other user's profiles.

• Technologies Used
• Features
• Demo
• Schema
• Backend API Endpoints
• Setup
• Acknowledgements

• React 18.2.0
• Ruby 2.7.4
• Rails 7.0.8
• Action Cable
• Action Mailer
• Active Record
• Redis
• React Router Dom 6.21.3
• React Tinder Card 1.6.4
• TailwindCSS 3.4.1
• Formik 2.4.5
• React useState, useEffect, useRef

Users will be able to:

• Sign-up and create a profile
• Edit their profile
• Recieve a token via email to reset their passwords
• Browse users according to their gender interests and sexuality
• View other users' profiles
• Swipe right or left to match with other users
• Message matched users in real time

To run this project, follow the following steps.

1. Fork/clone this repo to your local environment.
2. Install latest versions of the technologies listed above, if needed.
3. In your terminal, run bundle install and rails db:create db:migrate db:seed
4. Next, run rails s to start the server on http://localhost:3000
5. From here, you can run npm install --prefix client and npm start --prefix client to browse the frontend on http://localhost:4000.

This project was created as my Phase 4 project for Flatiron School.

The card swiping fucntionality was inspired by Tinder, and the styling is inspired by MTV's classic moody aesthetic.

Big thank you to Ania Kubów's Tinder Clone Tutorial which inspired me to create the project and helped tremendously with the starter code setup.

I also wanted to thank this article that helped me understand how to setup Action Cable.