RANDM - a dating application that helps users find matches through randomization

Related tags

Miscellaneous nodejs mysql heroku chat express sql messaging random socket-io handlebars sequelize dating sessions
Overview

RANDM - The Random Dating App

RANDM is a dating application that helps users find matches through randomization. While other dating apps on the market focus too much on matches based on initial judgement, with RANDM, people can start chatting with and getting to know potential dates without that initial judgement in an app free of profile pictures and “swiping”.

Table of Contents

User Story

AS A person who has trouble finding dating matches  
I WANT to use a dating app that randomly matches users  
SO THAT when I click on the RANDM button, a new page opens with a random potential date with whom I can start chatting.

WHEN I open the app  
THEN I am presented with the title of the app and the login form.  
WHEN I choose to register  
THEN I'm presented with inputting my first name, last name, email, password, gender identity, sexual preferences, pronouns, birthday, and bio.  
WHEN I click on login  
THEN I'm presented with entering my email and password.  
WHEN I click the randomize a new chat button  
THEN I'm presented with a new open chat with a random user. 
WHEN I click on logout  
THEN I'm presented with the homepage screen.

Screenshot

random

Live Deployment

This application is deployed using Heroku:

Created With

  • Node.js + Express.js
  • MySQL / MySQL2
  • Sequelize
  • Handlebars
  • Bcrypt
  • Socket.io

JavaScript Badge CSS Badge Handlebars

Installation and Usage

To install and run this project, please follow these steps:

  1. Make sure you have Node.js and MySQL installed.
  2. Through the command line, go to the folder you wish this application's folder to be in.
  3. Do git clone of the repository to get the application's files.
  4. Run npm run schema to get the database.
  5. To install all of the depenencies this application uses, run npm install.
  6. Create a .env file containing: DB_NAME=randm_db, along wtih your DB_USER, DB_PASSWORD, and a secret code SECRET_SECRET.
  7. To start the application, run npm start.
  8. Open localhost:3001 to see the local webpage.

Contributing

RANDM is a work in progress! If you would like to contribute to this project, you can do so by:

  1. Forking the project. (Learn how to fork.)
  2. Creating a new feature branch, committing the changes, and pushing the branch.
  3. Opening a Pull Request.

Read the Contributor Covenant Code of Conduct.

Tests

To easily test the application with a few users already registered, you can seed the database by running the following command:

npm run seed

Questions

RANDM was created by Jennifer Cole, Lex Slovik, Charlie Hua, Chuong Vo, Marielle Champagne, Ahmad Anees, Gavin Jacobsen, Rex Oliver.

For inquiries regarding the project, please email Jennifer Cole at [email protected].

Comments
  • Feature/bug fix

    Feature/bug fix

    • new user with no current chats open can use random chat button
    • reroute chat/undefined to /chat (this occurs when user is already talking to everyone else)
    opened by lexslo 1
  • Update style.css

    Update style.css

    :root { --main-color: #59276D; /* Main Color / --secondary-color: #BC34AE; / Secondary Color / --secondary-lighter: #ED67DF; / Lighter Version of Secondary Color / --lightest-color: #F6F9F9; / Light-Gray Color / --mid-color: #AFB5B6; / Mid-Gray Color / --darkest-color: #7C8385; / Darker-Gray Color / --sidebar-color: #EDF3F3; / Sidebar Background Color / --sidebar-highlight-color: #E0E9E9; / Sidebar Highlight Color */ --desktop: 1200px; --laptop:1024px; --tablet:768px; --phone:480px;

    }

    • { margin: 0; padding: 0; box-sizing: border-box; }

    body {

    font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 1;
background-color: var(--lightest-color);
color: var(--darkest-color);

    }

    a, a:hover, button, button:hover, li, li:hover { transition: all 0.5s ease-in-out; }

    a { color: var(--main-color); text-decoration: none; } a:hover { color: var(--secondary-color); } input:focus { outline: 2px solid var(--secondary-lighter); }

    /* IF NOT LOGGED IN / .unlogged-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; justify-content: center; padding: 20px; min-height: calc(100vh - 40px); } / Display logo on left */ @media screen and (min-width: 40px) and (max-width: 767px) {

    .unlogged-page .logo {

        margin: 0;
 align-items: center;

}

    .unlogged-page .logo img { width: 100%; } /* Display form on right */ .unlogged-page .forms { width: calc(100% 9px); margin: 5% 0px 05% 0px; background-color: var(--sidebar-color); padding: 20px; font-size: 1.2em; align-items: center; } .unlogged-page .forms input { padding: 10px; margin: 5px 0 15px; width: 100%; font-size: .9em; background-color: white; border: 1px solid var(--sidebar-highlight-color); color: var(--darkest-color); }

    .unlogged-page .forms button { padding: 10px; margin: 0; align-items: center; font-size: 1.5em; border: none; background: var(--secondary-lighter); color: white;

    } .unlogged-page .forms .form-message { font-size: .9em; font-style: italic; margin: 15px 0 0; }

    /* IF USER IS LOGGED IN / .logged-in { display: flex; justify-content: space-between; flex-flow: column; height: 100vh; } / Header / .logged-in header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 20px; background-color: var(--main-color); color: white; } .logged-in header .logo { width: 50%; } .logged-in header .logo img { height: 25px; margin: 10px 0; } .logged-in header .welcome-info i { font-size: 1.5em; } / Main Content / .logged-in main { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1; } / Recent Chat Names on left / .recent-chat { width: 20%; background-color: var(--sidebar-color); } .recent-chat ul li { padding: 20px; border-bottom: 2px solid var(--sidebar-highlight-color); } .recent-chat ul li.selected { border: none; background-color: var(--sidebar-highlight-color); } .recent-chat ul li h3.name { color: var(--main-color); font-size: .9em; } .recent-chat ul li span.latest-message { color: var(--darkest-color); font-style: italic; padding:0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / Current Chat Box on right / .current-chat { width: 70%; display: flex; justify-content: space-between; flex-flow: column; height: 100%; } / About the chatter at top / .current-chat .user-info { margin: 15px 20px 0; padding: 0 0 10px 0; border-bottom: 2px solid var(--sidebar-highlight-color); text-align: center; } .current-chat .user-info h2.chatter-name { color: var(--main-color); font-size: 1.9em; font-weight: bold; padding: 3px; } .current-chat .user-info p { color: var(--mid-color); padding: 5px; } .current-chat .user-info p.in-chat { font-size: 1.2em; font-weight: bold; } .current-chat .user-info p.chatter-info { font-style: italic; } .current-chat .user-info p.chatter-bio { color: var(--darkest-color); } / Send Message Input at bottom / .current-chat .send-message { display: flex; justify-content: space-between; padding: 10px; } .current-chat .send-message input { flex: 1; background-color: white; color: var(--darkest-color); padding: 10px; font-size: 1em; border: 1px solid var(--sidebar-highlight-color); } .current-chat .send-message button { background-color: var(--secondary-lighter); color: white; padding: 10px 2px; border: none; font-size: 1.1em; font-weight: bolder; } / Chat box in middle */ .current-chat .messages { flex: 1; padding: 0 10px; display: flex; height: 100%; } .current-chat .messages ol { display: inline-block; align-self: flex-end; list-style-type: none; } .current-chat .messages ol li { display: block; margin: 10px; } .current-chat .messages ol li .message { padding: 12px 15px; border-radius: 10px; max-width: 50%; width: auto; display: inline-block; color: white; line-height: 1.3; } .current-chat .messages ol li.received { text-align: left; } .current-chat .messages ol li.sent { text-align: right; } .current-chat .messages ol li.received .message { background-color: var(--secondary-color); } .current-chat .messages ol li.sent .message { background-color: var(--main-color); } .current-chat .messages ol li p.sent-time { color: var(--mid-color); text-transform: uppercase; font-size: .7em; margin: 5px; }

    }

    @media screen and  (min-width: 768px) and (max-width: 1080px) {
    


/* IF NOT LOGGED IN */

    .unlogged-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; justify-content: center; padding: 20px; min-height: calc(100vh - 40px); } /* Display logo on left / .unlogged-page .logo { width: calc(55% - 30px); margin: 0 10px 0 20px; } .unlogged-page .logo img { width: 100%; } / Display form on right / .unlogged-page .forms { width: calc(45% - 30px); margin: 0 10px 0 20px; background-color: var(--sidebar-color); padding: 20px; font-size: 1.2em; } .unlogged-page .forms input { padding: 10px; margin: 5px 0 15px; width: 100%; font-size: .9em; background-color: white; border: 1px solid var(--sidebar-highlight-color); color: var(--darkest-color); } .unlogged-page .forms button { padding: 10px; font-size: 1.5em; border: none; background-color: var(--secondary-lighter); color: white; } .unlogged-page .forms .form-message { font-size: .9em; font-style: italic; margin: 15px 0 0; } / IF USER IS LOGGED IN / .logged-in { display: flex; justify-content: space-between; flex-flow: column; height: 100vh; } / Header / .logged-in header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 20px; background-color: var(--main-color); color: white; } .logged-in header .logo { width: 10%; } .logged-in header .logo img { height: 60px; margin: 10px 0; } .logged-in header .welcome-info i { font-size: 1.5em; } / Main Content / .logged-in main { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1; } / Recent Chat Names on left / .recent-chat { width: 30%; background-color: var(--sidebar-color); } .recent-chat ul li { padding: 20px; border-bottom: 2px solid var(--sidebar-highlight-color); } .recent-chat ul li.selected { border: none; background-color: var(--sidebar-highlight-color); } .recent-chat ul li h3.name { color: var(--main-color); font-size: 1.3em; } .recent-chat ul li span.latest-message { color: var(--darkest-color); font-style: italic; padding: 5px 0 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / Current Chat Box on right / .current-chat { width: 70%; display: flex; justify-content: space-between; flex-flow: column; height: 100%; } / About the chatter at top / .current-chat .user-info { margin: 15px 20px 0; padding: 0 0 10px 0; border-bottom: 2px solid var(--sidebar-highlight-color); text-align: center; } .current-chat .user-info h2.chatter-name { color: var(--main-color); font-size: 1.8em; font-weight: bold; padding: 3px; } .current-chat .user-info p { color: var(--mid-color); padding: 5px; } .current-chat .user-info p.in-chat { font-size: 1.2em; font-weight: bold; } .current-chat .user-info p.chatter-info { font-style: italic; } .current-chat .user-info p.chatter-bio { color: var(--darkest-color); } / Send Message Input at bottom / .current-chat .send-message { display: flex; justify-content: space-between; padding: 10px; } .current-chat .send-message input { flex: 1; background-color: white; color: var(--darkest-color); padding: 15px; font-size: 1em; border: 1px solid var(--sidebar-highlight-color); } .current-chat .send-message button { background-color: var(--secondary-lighter); color: white; padding: 10px 25px; border: none; font-size: 1.1em; font-weight: bolder; } / Chat box in middle */ .current-chat .messages { flex: 1; padding: 0 10px; display: flex; height: 100%; } .current-chat .messages ol { display: inline-block; align-self: flex-end; list-style-type: none; } .current-chat .messages ol li { display: block; margin: 10px; } .current-chat .messages ol li .message { padding: 12px 15px; border-radius: 10px; max-width: 50%; width: auto; display: inline-block; color: white; line-height: 1.3; } .current-chat .messages ol li.received { text-align: left; } .current-chat .messages ol li.sent { text-align: right; } .current-chat .messages ol li.received .message { background-color: var(--secondary-color); } .current-chat .messages ol li.sent .message { background-color: var(--main-color); } .current-chat .messages ol li p.sent-time { color: var(--mid-color); text-transform: uppercase; font-size: .9em; margin: 5px; }

    }

    @media screen and (min-width: 1081px) {

    /* IF NOT LOGGED IN */

    .unlogged-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; justify-content: center; padding: 20px; min-height: calc(100vh - 40px); } /* Display logo on left / .unlogged-page .logo { width: calc(40% - 30px); margin: 0 100px 0 20px; } .unlogged-page .logo img { width: 100%; } / Display form on right */ .unlogged-page .forms { width: calc(38% - 80px); margin: 0; background-color: var(--sidebar-color); padding: 20px; font-size: 1.2em; } .unlogged-page .forms input { padding: 10px; margin: 5px 0 15px; width: 100%; font-size: .9em; background-color: white; border: 1px solid var(--sidebar-highlight-color); color: var(--darkest-color); } .unlogged-page .forms button { padding: 10px; font-size: 1.9em; border: none; background-color: var(--secondary-lighter); color: white; } .unlogged-page .forms .form-message { font-size: .9em; font-style: italic; margin: 15px 0 0; }

    /* IF USER IS LOGGED IN / .logged-in { display: flex; justify-content: space-between; flex-flow: column; height: 100vh; } / Header / .logged-in header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 20px; background-color: var(--main-color); color: white; } .logged-in header .logo { width: 10%; } .logged-in header .logo img { height: 60px; margin: 10px 0; } .logged-in header .welcome-info i { font-size: 1.5em; } / Main Content / .logged-in main { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1; } / Recent Chat Names on left / .recent-chat { width: 30%; background-color: var(--sidebar-color); } .recent-chat ul li { padding: 20px; border-bottom: 2px solid var(--sidebar-highlight-color); } .recent-chat ul li.selected { border: none; background-color: var(--sidebar-highlight-color); } .recent-chat ul li h3.name { color: var(--main-color); font-size: 1.3em; } .recent-chat ul li span.latest-message { color: var(--darkest-color); font-style: italic; padding: 5px 0 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } / Current Chat Box on right / .current-chat { width: 70%; display: flex; justify-content: space-between; flex-flow: column; height: 100%; } / About the chatter at top / .current-chat .user-info { margin: 15px 20px 0; padding: 0 0 10px 0; border-bottom: 2px solid var(--sidebar-highlight-color); text-align: center; } .current-chat .user-info h2.chatter-name { color: var(--main-color); font-size: 1.8em; font-weight: bold; padding: 3px; } .current-chat .user-info p { color: var(--mid-color); padding: 5px; } .current-chat .user-info p.in-chat { font-size: 1.2em; font-weight: bold; } .current-chat .user-info p.chatter-info { font-style: italic; } .current-chat .user-info p.chatter-bio { color: var(--darkest-color); } / Send Message Input at bottom / .current-chat .send-message { display: flex; justify-content: space-between; padding: 10px; } .current-chat .send-message input { flex: 1; background-color: white; color: var(--darkest-color); padding: 15px; font-size: 1em; border: 1px solid var(--sidebar-highlight-color); } .current-chat .send-message button { background-color: var(--secondary-lighter); color: white; padding: 10px 25px; border: none; font-size: 1.1em; font-weight: bolder; } / Chat box in middle */ .current-chat .messages { flex: 1; padding: 0 10px; display: flex; height: 100%; } .current-chat .messages ol { display: inline-block; align-self: flex-end; list-style-type: none; } .current-chat .messages ol li { display: block; margin: 10px; } .current-chat .messages ol li .message { padding: 12px 15px; border-radius: 10px; max-width: 50%; width: auto; display: inline-block; color: white; line-height: 1.3; } .current-chat .messages ol li.received { text-align: left; } .current-chat .messages ol li.sent { text-align: right; } .current-chat .messages ol li.received .message { background-color: var(--secondary-color); } .current-chat .messages ol li.sent .message { background-color: var(--main-color); } .current-chat .messages ol li p.sent-time { color: var(--mid-color); text-transform: uppercase; font-size: .9em; margin: 5px; } }

    opened by aaanees7 0
  • update home-routes to display messages

    update home-routes to display messages

    • updated home-routes.js

    • not able to test output currently without login to get session id or handlebars rendering

    • please look over to see if the include logic makes sense so far

    opened by lexslo 0
  • Feature/charlton

    Feature/charlton

    • add user pw hash: bcrypt, checkPassword method, hooks for beforeCreate and beforeUpdate
    • session cookie: added to server.js
    • dashboard-route: added to controller folder
    • nodemon
    opened by Charlton-H 0
  • Feature/controllers

    Feature/controllers

    • the routes in messaege-routes and user-routes are working
    • added seeds

    TODO:

    • need to attach the /:id to the receiver_id in the home-routes GET route
    opened by lexslo 0
Owner
Jennifer Cole
With the mind for logic and the eye for aesthetic, I'm a very versatile designer who has intimate understanding in both the code and graphic aspects of a design
Jennifer Cole
GitHub https://ran-dm.herokuapp.com/
A simple implementation of a task list application that can be used to add, remove, edit and check users tasks

"To-do list" is a tool that helps to organize daily activites. It simply lists the things which are needed to be done and allows user to mark them as complete. In this step of project, the CRUD (create, update, delete) methods are implemented. This simple web page is built using webpack and served by a webpack dev server.

Zahra Arshia 5 Mar 28, 2022
API for managing authentication, creating Users, Items and Categories for FinancesApp

This is a repository to store all the API for managing authentication, creating users, items and categories. Search for single or multiple records at once, update items and categories and remove both.

Finances App 8 May 10, 2022
Math Magician is a single Page App that allows users to perform simple math calculations

Math Magician is a single Page App that allows users to perform simple math calculations

levy_ukwishaka 11 Apr 9, 2022
Insider Unlocked is an ongoing web application

Insider Unlocked is an ongoing web application we have been co-developing for the past few months which aggregates stock trading data of US senators and presents it in a digestible manner for the average retail investor

null 3 Feb 13, 2022
NodeJS application to upload an image to a S3 Bucket on AWS.

node-upload-image-to-s3-bucket NodeJS application to upload an image to a S3 Bucket on AWS. How it works: You must make a POST request to /upload-imag

Rafael Silva de Lima 6 Sep 28, 2022
💬 Real-time chat application prototype that can summarise the entire chat log

Chat summarizer ?? Disclaimer! This is a prototype and a fun project that I've been working on and it is not ready for production. It was done in a fe

null 5 Jan 22, 2022
A simple server application that allows you to perform Wake-on-LAN remotely with a web interface

WoL Helper A simple server application that allows you to perform Wake-on-LAN remotely with a web interface. Usage Install: npm install -g wol-helper

Hongbo 5 Jul 27, 2022
Travel Lovers - an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips

Travel Lovers Table of Contents Description Tools Used Installation Instructions Usage License Tests Questions Description Travel Lovers is an applica

Nicholas Nolen 5 Aug 31, 2022
NestJS module for adding translations to the application, with a pipe for translating validation errors

nestjs-translates NestJS module for adding translations to the application, with a pipe for translating validation errors Installation npm i --save ne

ILshat Khamitov 6 Jul 26, 2022
API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

null 3 Mar 6, 2022
A PHP Laravel web application that uses most of Laravel technologies to build that gym system

A PHP Laravel web application that uses most of Laravel technologies to build that gym system.The System is based on rules. Admin, City Manager, Gym Manager. All Crud operations running using data tables.

Ashraf Eldawody 9 Dec 29, 2022
This web application retrieves real live data from the SpaceX API

This web application retrieves real live data from the SpaceX API. It provides commercial and scientific space travel services, by allowing users to book rockets and join selected space missions.

Sahar Abdel Samad 12 Aug 9, 2022
This is the backend of Wherechat, which is a chat application that allows users to find and meet each other through their location on the map.

wherechat-backend About the project This is the backend of Wherechat, which is a chat application that allows users to find and meet each other throug

Isaac Ndala 5 Nov 23, 2022
The Space Traveler's Hub is an application where users can check out availble space rockets and book them or cancel the previously made booking. Also users can find a list of current missions along with their brief description and can join the selected mission or leave the mission the user joined earlier.

Space-Travelers-Hub The Space Traveler's Hub is an application where users can check out available space rockets and book them or cancel the previousl

Tiago Lelinski Marin 7 Sep 22, 2022
Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines. A timeline is a collection of links that share a common topic or a journey of building and learning something new. Users can create timelines, share them publicly, and explore resources.

Students' Web Committee 14 Jun 13, 2022
Pre-assignment for Reaktor Developer Trainee, which shows the current live matches of rock-scissors-paper games, and history results

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Vladislav Cherkasheninov 0 Feb 2, 2022
A JavaScript library allows showing/hiding "dependent" field(s) if the value of the “dependee” field matches the right condition.

MF Conditional Fields A JavaScript library that show/hide form elements based on the value of one field or many. Advantages Lightweight & fast. Comes

Ali Khallad 11 Aug 11, 2022
Keeping pace with the increasing number of matches has become very hard. So here we have **News Dribble** , making following NBA easier, more exciting and engaging. From News Updates, Standing Tables, Upcoming Games to Minting NFTs for your favorite teams and player! Even more, we can place bets on upcoming games and win Crypto!

News Dribble Timeout! Time for News Dribble!!! Inspiration I am a big fan of NBA and personally I have been looking for platforms where I can get upda

Aaryan Arora 3 Nov 2, 2022
A full-stack application for junior developers to find jobs that match their skill-level, find gigs in order to boost their resume, and showcase a portfolio.

Junior is a full-stack web application that was created to facilitate junior developers in finding jobs that match their skill-level, boosting their resume through finding and completing gigs, and providing a way to easily showcase a portfolio

Karolina 5 Oct 25, 2022
Application which will allow users to find hotels, hostels and restaurants and feedback about those in whole over of world.

Gatsby minimal TypeScript starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal TypeScript star

Taron Vardanyan 2 Jul 22, 2022