Vibe Check Alpha 0.1 Release Notes
Tags: webdev, javascript, spotifyapi
Published: 2023-05-12 22:22:23

# Overview
Vibe Check is an award-winning MERN stack web application that utilizes Spotify's web API to create a **match story** between two users. A **match story** is an Instagram like 'story' that displays musical matches and recommendations between the Spotify users, resulting in a final match percentage.
 
### From the team
It has been a few months since the Beach Hacks 7.0 Vibe Check demo. Since then we have been under extensive development to create a polished, customizable, and user-friendly experience. After months of careful refinement, Vibe Check's alpha version is now available with even more features and an even better user interface. Please take the time to share with friends! If there is any features you'd like to see in a future update, personally reach out  to either me (Justin) or Alexis.

## Table of Contents

- [Features](#features)
- [Usage](#how-to-use)
- [Built With](#technologies)
- [Future Updates](#future-updates)
- [Developers](#authors)


## Features:

- User search functionality
- Vibe_ID customizability
- Invite a friend functionality
- Share screenshot functionality
- Preview song functionality

## How to Use:

Start by clicking “Get Started” and Authorize your Spotify Account to give Vibe Check access to your top artists and top songs. 

<img src="https://user-images.githubusercontent.com/74376317/236977008-4b7a3c8d-cce8-402c-b53f-44979217865b.png" width="80%">

After authorizing, Vibe Check will automatically create a profile with your Spotify Data. Your Vibe Check profile is simply a Vibe_ID and a collection of all your top songs and top artists!

<img src="https://user-images.githubusercontent.com/74376317/236977028-dfb0e24e-ef6e-4091-9965-ea44aadf54c3.png" width="80%">


This is Vibe Check’s home page! 

Here you can find your ID. This is customizable. Click on the edit icon to bring up our edit id module. 

<img src="https://user-images.githubusercontent.com/74376317/236980645-1d42232e-f0f2-4e2d-b4e4-8a272d9f4098.gif" width="80%">

Let’s check our compatibility with our friend! 

You can look for your friend’s username or Vibe_ID by typing it into the search bar!

Once you find it simply click on it to view each other’s match story!

<img src="https://user-images.githubusercontent.com/74376317/236980735-2e67d599-612e-4ee8-bc57-3a7fa55c62c9.gif" width="80%">


Once you arrive at your match story, simply click the arrow buttons to navigate through it. 

Do note:

- that Liz and my match story will be different depending on who made the request!
- A user will only show in the search results if they have used the app

If your friend hasn’t used Vibe Check before, send them a request by:

clicking Invite → copying the link → and sending it to a friend. 

This link will automatically start the comparison between you and the user you invited once they click it. 

<img src="https://user-images.githubusercontent.com/74376317/236980790-68d59456-074a-41f3-8944-7f32eeeb3c2e.gif" width="80%">

Once you are done viewing your match story share it with friends by either downloading or click the share button and picking your social media!

<img src="https://user-images.githubusercontent.com/74376317/236980870-a44239bb-3aa1-4e88-a3ca-3eb7dfea81d9.gif" width="80%">

Once you are done, click on your profile picture in the top right and either Logout or Delete your account. 

If you delete your account, no other user will be able to check their compatibility with you. 

## Technologies:

- JavaScript
- HTML
- CSS
- MongoDB
- Express.js
- React.js
- Node.js
- Mongoose
- Spotify Web API

## Future Updates:

- [ ]  Improve User Interface
- [ ]  More user customizability
- [ ]  Implement TypeScript for stability

## Developers

**Justin Fisher**
_Backend Developer, Project Manager_
- [LinkedIn](https://www.linkedin.com/in/justinthedev/)
- [GitHub Profile](https://github.com/justinfisherrr)
- [Personal Website](https://www.justinthedev.com/)
- [Email: justinthedev@outlook.<area>com ✉️](mailto:jf.thedeveloper@gmail.com?subject=Listening-Lobby "justinthedev@outlook.com")

___
**Alexis Martin**
_Full Stack Developer, UI/UX_
- [LinkedIn](https://www.linkedin.com/in/webdevlex/)
- [GitHub Profile](https://github.com/webdevlex)
- [Personal Website](https://webdevlex.com/)
- [Email: webdeveloperlex@gmail.<area>com ✉️](mailto:webdeveloperlex@gmail.com?subject=Listening-Lobby "webdeveloperlex@gmail.com")