Valorant-Duofinder/ui

SENG 513 - UI / API

The following System Requirements and Installation steps are required for running the project locally.
If you are accessing the project remotely (vivideradicator.ca), you may skip to the Usage section of this document.

System Requirements

Ensure that the following are already installed on your operating system of choice.

Node JS
NPM
MongoDB

Installation

User Interface

1. Clone or download the code found within the GitHub SENG513-UI repository, to a path/of/your/choosing
   1b. This can be done from within VS Code, via git clone https://github.com/Rafael1321/SENG513-UI.git
   
2. Using the command prompt, cd ~path/of/your/choosing/SENG513-UI will navigate you to the proper directory
   
3. Install all required project dependencies using npm i
   
4. Run the application with npm start
   
   

API
Note that you must be running MongoDB before beginning this step.
Instructions can be found at https://www.mongodb.com/docs/manual/installation/

1. Clone or download the code found within the GitHub SENG513-API repository, to a path/of/your/choosing
   1b. This can be done from within VS Code, via git clone https://github.com/Rafael1321/SENG513-API.git
   
2. Using the command prompt, cd ~path/of/your/choosing/SENG513-API will navigate you to the proper directory
   
3. Install all required project dependencies using npm i
   
4. Run the application with npm start
   

Usage

The following steps can be used to experience the full functionality of the application.

1. You will be greeted by the login/account registration page
   1b. If you do not yet have an account on DuoFinder, feel free to create one now. The 2 starter accounts below may also be used
   DO NOT use real password information here, it is not yet encrypted
   1c. Profile 1: email = vivideradicator@gmail.com password = seng513grading
   1d. Profile 2: email = me@vivideradicator.ca password = seng513grading
   
2. Enter your email address and passwords into their respective fields
   
3. Once logged in, the profile card can be seen. Clicking the edit button in the top right will enable customizing of your profile
   3b. You may change your profile picture, bio, gender, and age. Customize your profile as desired, and save the changes by pressing the same edit button again
   3c. Set your desired filters by pushing the 'Chat Filters' button, which will limit who you can match with based on your wishes
   
4. To connect with another user, press the 'Find Duo' button
   4b. If you are wishing to test the functionality by yourself, simply log into another account on a seperate window and search for a match on both accounts
   
5. Once connected, you may send messages in real-time to the other user. Pushing the 'Share Contact' button will automatically send your in-game information to the other user
   5b. Move onto another connection with the "Next" button, or return to your profile page by clicking the 'x' in the top-right corner
   
6. Once back on your profile page, view your past matches with the 'Chat History' button
   6b. You may re-read past messages and give a rating to anyone you have talked to previously. To give a rating, press the top-right 'Rate Player' button
   
7. Enjoy!

Version History

v1.0
Front-end only. Focus on creating a visually appealing and easy-to-use UI.
Use-state-based system, where changes were not saved and lost upon refreshing/exiting the app.

v2.0
Introduced save states and a backend. User information now saved.
v2.1
Real-time data share between users made possible with sockets.

v3.0
Polishing of the app, squashing of several major bugs.
Small UI adjustments, ensuring all systems work as they should.

Contributors and Credit

Gaganjot Brar
Harkamal Randhawa
Martha Ibarra
Rafael Flores Souza
Richard Gingrich
Tyler Chen