Frontend

.gitattributes

@@ -0,0 +1 @@
+*.psd filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -102,3 +102,7 @@ dist
 
 # TernJS port file
 .tern-port
+
+#PSD that won't delete
+*.PSD
+*.psd

.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "command": "nodemon server.js",
+            "name": "start server",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "command": "npm run client",
+            "name": "start client",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -1 +1,219 @@
-# MERN_WITH_PASSPORT
+# ![Connect](client/public/connect-readme.png)
+<p style="background-color:#000000; color:##FDFEFE" align="center">
+Welcome to your next-level Dating application. Let’s be honest..swiping right and left is getting pretty boring. Connect() is perfect for those in tech industries and people who work remotely. Meet local people in your area, chat in real-time once you find a match, and use our new “.Serious()” feature to see how serious your matches are! Let us help you .Connect() the dots to your match!
+</p>
+<br>
+<div align="center">
+</div>
+<div align="center" style="background-color:#1F618D">
+<div>
+<h2 style="color:#17202A" >
+Contributors
+</h2>
+</div>
+  <h3 style="color:#FBFCFC">
+    <a href="https://github.com/JuliaKiser" style="color:#FBFCFC">
+      Julia Kiser
+    </a>
+    <span style="color:#FBFCFC"> | </span>
+    <a href="https://github.com/anishamcdowell" style="color:#FBFCFC">
+      Anisha McDowell
+    </a>
+    <span style="color:#FBFCFC"> | </span>
+    <a href="https://github.com/cworth26" style="color:#FBFCFC">
+      Canita Worth
+    </a>
+    <span style="color:#FBFCFC"> | </span>
+    <a href="https://github.com/tmgorogers" style="color:#FBFCFC">
+      Tierra Rogers
+    </a>
+    <span style="color:#FBFCFC"> | </span>
+    <a href="https://github.com/Jess20005"style="color:#FBFCFC">
+      Jessica Gibbs
+    </a>
+    <span> | </span>
+  </h3>
+</div>
+
+## <h1>Table of Contents</h1>
+
+⦿ [Demo Video](##Demo-Video) <br>
+⦿ [Find love with Connect](##Find-love-with-Connect)<br>
+⦿ [Application Details](##Application-Details)<br>
+⦿ [Screenshots](##Screenshots) <br>
+⦿ [Technology Used](##Technology-Used)<br>
+⦿ [User Story](##User-Story)<br>
+⦿ [Future Development](##Future-Development)<br>
+⦿ [Requirements](##Requirements)<br>
+⦿ [Helpful Links](##Helpful-Links)<br>
+⦿ [Connect With Us](##Connect-With-Us)<br>
+
+
+## <h1>Demo Video</h1>
+
+![Connect](insert gif)
+
+## <h1>Find love with Connect</h1>
+
+Deployed Link: insert link
+
+Github Repo Link: https://github.com/tmgorogers/Connect-Dating-App
+
+[Presentation Link](https://docs.google.com/presentation/d/1LdvnZHXxQFA41w8i6r_UBUJEDOKSJuQGuohEcisI49w/edit?usp=sharing)
+
+## <h1>Application Details</h1>
+
+<p style="background-color:#616A6B">
+⁍ Login/Signup page<br>
+<indent> - User can create a profile<br>
+  - If user already has a profile, you can login in to the homepage and the user can select next action from there
+</p>
+<p style="background-color:#34495E">
+⁍ My Profile page<br>
+  - Displays all user details from profile picture, to location, to preferences etc...<br>
+</p>
+<p style="background-color:#A04000">
+⁍ Home page<br>
+  - Home page provides the user with simple direction to start swiping on their next love match<br>
+  - From the hompage the user can navigate through a variety of options to view profile, edit, get help, swipe or browse a list of all their matches
+</p>
+<p style="background-color:#117864">
+⁍ Swipe page<br>
+  - The swipe page uses a tinder card clone to provide an awesome user interactive feature<br>
+  - Simply swipe right or left to say 'yes' or 'no' to the potential matches
+</p>
+<p style="background-color:#616A6B">
+⁍ Browse page<br>
+  - Browse page is directly tied to our swipe features<br>
+  - Any mutual match (i.e. you swipe right and another user swipes right) and this page will display the list of matches, allowing you to filter through based on various specifications
+</p>
+<p style="background-color:#34495E">
+⁍ Settings page<br>
+  - Settings will be specific to user profile<br>
+  - Settings features will include profile picture update, password change, match preferences etc...
+</p>
+<p style="background-color:#A04000">
+⁍ Help page<br>
+  - The help page provides a user-friendly help form which connects directly to one of our contributor emails<br>
+  - If there are any issues going on with the application, the user can alert us
+</p>
+<p style="background-color:#117864">
+⁍ Inbox page<br>
+  - The inbox page is also tied directly to the swipe page<br>
+  - Any mutual match will be able to "Connect" with one another and direct message each other from here.
+</p>
+
+## <h1>Screenshots</h1>
+
+insert images
+
+<br>
+<section style="background-color: #99A3A4" >
+
+## <h1 style="background-color: #515A5A"> Technology Used </h1>
+
+<!-- <section style="background-color: #99A3A4"> -->
+
+[<img alt="MongoDB" src ="https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white"/>](https://www.mongodb.com/)[<img alt="Heroku" src="https://img.shields.io/badge/heroku-%23430098.svg?&style=for-the-badge&logo=heroku&logoColor=white"/>](https://www.heroku.com/) [<img alt="NodeJS" src="https://img.shields.io/badge/node.js-%2343853D.svg?&style=for-the-badge&logo=node.js&logoColor=white"/>](https://nodejs.org/en/) [<img alt="Express.js" src="https://img.shields.io/badge/express.js-%23404d59.svg?&style=for-the-badge"/>](https://expressjs.com/) [<img alt="Bootstrap" src="https://img.shields.io/badge/bootstrap-%23563D7C.svg?&style=for-the-badge&logo=bootstrap&logoColor=white"/>](https://getbootstrap.com/) [<img alt="JavaScript" src="https://img.shields.io/badge/javascript-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E"/>](https://www.javascript.com/) [<img alt="HTML5" src="https://img.shields.io/badge/html5-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white"/>](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) [<img alt="CSS3" src="https://img.shields.io/badge/css3-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white"/>](https://www.w3schools.com/css/) [<img alt="Visual Studio Code" src="https://img.shields.io/badge/VisualStudioCode-0078d7.svg?&style=for-the-badge&logo=visual-studio-code&logoColor=white"/>](https://code.visualstudio.com/) [<img alt="GitHub" src="https://img.shields.io/badge/github-%23121011.svg?&style=for-the-badge&logo=github&logoColor=white"/>](https://github.com/)[<img alt="React" src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"/>](https://reactjs.org/)[<img alt="Trello" src="https://img.shields.io/badge/Trello-%23026AA7.svg?style=for-the-badge&logo=Trello&logoColor=white"/>](https://www.trello.com)[<img alt="Gmail" src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" />](https://www.gmail.com)[<img alt="Adobe Illustrator" src="https://img.shields.io/badge/adobeillustrator-%23FF9A00.svg?style=for-the-badge&logo=adobeillustrator&logoColor=white"/>](https://www.adobe.com/products/illustrator.html)[<img alt="Robo3T" src="https://img.shields.io/badge/Robo3T-%23430098.svg?&style=for-the-badge&logo=Robo3T&logoColor=green"/>](https://robomongo.org/) [<img alt="Slack" src="https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white" />](https://slack.com/)
+</section>
+
+
+
+
+## <h1>User Story</h1>
+
+AS A employee in the tech industry or stay-at-home role<br>
+I WANT TO "Connect" with people of similiar interest<br>
+SO THAT I can socialize and have more daily interaction<br>
+AS WELL AS have a chance to find true love<br>
+OR maybe just another friend<br>
+SO THAT I can find more purpose in every day
+
+
+## <h1>Future Development</h1>
+
+* Facebook or third-party authentication with sign up
+* Connect API for 'Find a Date spot' feature 
+* Expand socket.io messaging features to include video chat
+
+## <h1>Requirements</h1>
+
+- Must use ReactJS in some way
+- Must use a Node and Express Web Server
+- Must be backed by a MySQL or MongoDB database with a Sequelize or Mongoose ORM
+- Must have both GET and POST routes for retrieving and adding new data
+- Must deploy this application using Heroku with data. Follow our guide on deploying MERN applications to Heroku to do so.
+- Must utilize at least 2 libraries, packages, or technologies that we haven't discussed
+- Must have a polished front end/UI
+- Must have a folder structure that meets the MVC paradigm
+- Must meet good quality coding standards (indentation, scoping, naming)
+- Must protect API keys in Node with environment variables
+
+  ​
+
+## <h1>Helpful Links</h1>
+
+[Socket I0 Documentation](https://socket.io/)
+
+[Mongo DB Resources](https://www.mongodb.com/)
+
+[Heroku Documenation/Deployment](https://devcenter.heroku.com/categories/reference)
+
+## <h1>Connect With Us </h1>
+<div align="center">
+  <img src="https://avatars.githubusercontent.com/u/74503526?v=4" alt="Avatar" style="width:15%">
+  <div class="container">
+    <h4><b>Anisha McDowell</b></h4>
+    <p>Full Stack Web Developer</p>
+    <p><a href="https://www.linkedin.com/in/anishamcdowell/"> Linkedin</a>
+    <span> | </span>
+    <a href="https://github.com/anishamcdowell">Github</a>
+    </p>
+
+<img src="https://avatars.githubusercontent.com/u/73495184?v=4" alt="Avatar" style="width:15%">
+  <div class="container">
+    <h4><b>Julia Kiser</b></h4>
+    <p>Full Stack Web Developer</p>
+     <p><a href="https://www.linkedin.com/in/juliakiser/"> Linkedin</a>
+    <span> | </span>
+    <a href="https://github.com/JuliaKiser">Github</a>
+    </p>
+
+
+<img src="https://avatars.githubusercontent.com/u/75145729?v=4" alt="Avatar" style="width:15%">
+  <div class="container">
+   <h4><b>Canita Worth</b></h4>
+    <p>Full Stack Web Developer</p>
+     <p>
+     <a href="https://www.linkedin.com/in/canita-j-worth-ba4983177/"> Linkedin</a>
+    <span> | </span>
+    <a href="https://github.com/cworth26">Github</a>
+    </p>
+
+
+<img src="https://avatars.githubusercontent.com/u/77215158?v=4" alt="Avatar" style="width:15%">
+  <div class="container">
+   <h4><b>Jessica Gibbs</b></h4>
+     <p><a href="https://www.linkedin.com/in/jessica-gibbs-395b78203/"> Linkedin</a>
+    <span> | </span>
+    <a href="https://github.com/Jess20005">Github</a>
+    </p>
+
+
+<img src="https://avatars.githubusercontent.com/u/76822125?v=4" alt="Avatar" style="width:15%">
+  <div class="container">
+   <h4><b>Tierra Rogers</b></h4>
+    <p>Full Stack Web Developer</p>
+    <p><a href="https://www.linkedin.com/in/tierra-r-46a978101/"> Linkedin</a>
+    <span> | </span>
+    <a href="https://github.com/tmgorogers">Github</a>
+    </p>
+
+</div>
+</div>
+
+---
+
+---
+
+[Back to Top](##Table-of-Contents)