celinanperalta/cs-546-fp

Final Project for CS-546 S21. Made by Kaiqi Chee, Kai Engwall, Raj Gadhia, Celina Peralta, and Brandon Wei.

CS-546-FP

1. Navigate into the "Spinder" directory
2. run "npm start" in the command line. A message should print saying "We've now got a server! Your routes will be running on http://localhost:3000"
3. Open http://localhost:3000 in a browser, this will take you to the Spinder home page
4. If you are a new user, click "Sign Up". This will take you to a registration page, input information and press "Register"
5. If you are a returning user, click "Log In". This will take you to a login page, input username and password and press "Login"
6. If you are a new user, you will be directed to your profile upon registration. If you are a returning user, you will be directed to the users page
7. Click on the Spinder logo to return to the home page, after login/registration this page will show the number of users, top songs, and top artist
8. The "Users" page will show a card view of all non-private Spinder users, if your spotify is connected, there is a match% and a radar chart displayed on hover
9. You can navigate to other profiles by clicking on the username displayed on the card
10. On "My Profile" you will see a breakdown of your music profile as a radar chart as well as top genres, your username, name, location, bio, and an option to refresh spotify data. This spotify data is deisplayed below as Top Songs, Top Artist, and Top Playlists.
11. Under the settings page the user will be able to change the profile fields as well as make portions of their account private.
12. After you are finished using Spinder, you can logout in the top right corner.

cs-546-fp's Issues

Add like/unlike buttons

filter by on user page

Main Page HTML invalid

html validate all pages

Make sure all pages are HTML validated

• Home
• Login
• Register
• Users
• Profile
• Settings
• Followers
• Stats

update "home" in navbar to "users"

Spotify Authentication

• Implement authentication flow through Spotify API
• Add access token(?) to new user
• Implement login for existing users

Add function to compare user musical profiles

error page for no user found

if user inputs an id that doesn't exist, display an error

Get Audio Analysis for Tracks

Once a user's top tracks have been pulled, a call must be made to https://api.spotify.com/v1/audio-features/{id} in order to get the features of that track

• After getting a user's top songs, get audio analysis of each track
• Get average of track values to create profile

Access Token / Refresh Token hashing

• On successful login, access and refresh tokens should be hashed using bcrypt and stored in the User object

put new home page on "/" route

my profile doesn't show top artist/song/playlists anymore

sort users by % match

Implement Delete Account feature

Register Form Country Drop Down

Not dropping down ^

homepage redirecting

new users -> my account
existing users -> user list

Create Music Profile

• On successfully fetching user's top artists and tracks, add to DB
• From top songs, get top genres
• From top songs, get average of audio analysis of tracks

Get Spotify Data

1. Create another router for retrieving data from the Spotify API given credentials (should not be accessible to users)
2. Create server-side calls to Spotify API

update breakpoints in user profile for responsiveness

Do not show refresh spotify data button on other profiles

• pass current user id to hbs template
• use compare function to decide whether or not to render

Disable connect to spotify button on other profiles

Implement Privacy setting

Finish routing and data handling and conduct Postman tests

• Test artists
• Test songs
• Test users
• Test profiles

Complete Schemas for DB

• User schema
• Artist schema
• Song schema
• Profile schema

Login Cookies

• After successful login, create a new session for the user in the browser
• While a session is active, the user should not have access to the login page

Log In button

Homepage login button not changing to log out when user is logged in

middleware for profiles/artists/songs: redirect to home !

display "no artists/songs found" under top artists/songs if no data is available

Top Songs/Artists Loading

When first connecting to spotify, playlists are displayed on page, but top songs and top artists are not displayed until the refresh spotify link is clicked.

can access "/login" when logged in

fix middleware

Create Folder Structure

/data
/routes
/config
app.js
package.json

/stats without login

if you try to go to /stats without logging in the site crashes :(

after connecting to spotify, user things are not displayed on their page

display top x visibility things (update in schemas)

Navbar hamburger menu won't work

Describe the bug
Bootstrap hamburger menu will not show buttons

To Reproduce
Steps to reproduce the behavior:

1. Resize window horizontally until hamburger shows up
2. Click on it
3. Nothing happens

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Create skeleton for HTML pages

• Login Page
• Profile Page
• Main Page (the one that lists all the users)

Fix validation for password/confirm password

• If password is invalid (i.e. missing special chars) and confirm password is valid but the two don't match, confirm password shows up as valid

Create Login Page

• On successful login, redirect to some main page
• Create user in DB with access token (unhashed for now)

user search bar

Create User Profile page

On login, the user is brought to the homepage. For now, this should be the user's profile page.

• In routes/spotify.js, the user's info is returned in a JSON object in the req body. Add the information from this to a new User object and add them to the database.
• At the /users/{id} route, the data for that user should be rendered on a page.

totally/accessibility for all pages

check client/route/DB validation

Validate HTML for Users Page

Get User's Top Tracks and Artists

• [Test] Fetch data from Spotify API at /top endpoint
• On successful fetch, add all data to the db through data/artists and data/songs
• If access token is expired, call refresh endpoint from routes/users and retry

top songs by all users