MuSpace

Design Document

1. Introduction

1.1 Project Overview

MuSpace is a music-based social media platform focused on connecting music fans with one another and allowing them to share their tastes with the world. Each MuSpace user will be provided with a personal feed to post about songs, albums, artists, and playlists that they are interested in. Users will be able to add friends on MuSpace and look at their detailed Spotify listening history. Users will also be able to view detailed statistics about their listening habits, such as listening time, favourite genres, favourite artists, and more.

1.2 References

2. Planned Implementation

2.1 Choice of Language

Front-end: HTML, Javascript, CSS, ReactJS
Back-end: Javascript
Database: Firestore, Firebase

2.2 Resources Referenced

2.3 Development Team

Name Standard/Template Reviewed By
Requirements Document Modified IEEE Entire Team
Project Management Document Modified IEEE
Analysis Document Modified IEEE
Design Document Modified IEEE
User Document Modified IEEE
Participation Record (Hours) Self-documentation using internal Google Sheets file Adrian
Source Code Modified IEEE All Developers

2.4 Integration

The Spotify API/ Firebase login authenticity is being done by Nausher Rao. The verification and validation of his work will be completed by the remaining members.

3. Decomposition Description

3.1.1 Framework Package Interactions

3.1.2 Model Class Diagram

4. Interface Descriptions

4.1 Colour Guidelines

4.2 Font Guidelines

4.3 App Icons

4.4 Module Interface

4.4.1 Sidebar (Constant in all Views aside from 4.4.3 and 4.4.4)

On every view, the sidebar allows for quick and easy navigation to any of the other views.

Field Type Description
HomeView Button Links to HomePage
FriendsPageView Button Links to FriendsPage
MessagesView Button Links to MessagesPage
ProfileID Button Links to Profile View (Clicking the Profile Picture/ Username)
SettingsView Button Links to SettingsPage

4.4.2 Searchbar (Constant in all Views aside from 4.4.3 and 4.4.4)

Search bar allows the user to find songs / albums / playlists etc, along with friends.

Field Type Description
ClearButton Button Clears Search Field
SearchField Text Field Search Input
SearchButton Button Searches what was typed into the search field

4.4.3 Login View

Login View allows users to enter their account credentials and login to their account.

Field Type Description
MuSpaceLogo Image Application Logo
Log in Label Describes what page the user is on i.e Log in
Email or Username Text Field Asks for the email or name of the user.
Password Text Field Asks for the password to a user account associated with email/username.
Login-Button Button Signs into the account.
Forgot password-button Button Links to password recovery page.
Register button Button Links to the RegisterView page in case the user does not have an account created.

4.4.4 RegisterView

Register Page allows new users to register with MuSpace asking them for their credentials like Name, Email, Date of Birth, etc. creating an account for them with their desired available username and unique password.

Field Type Description
MuSpaceLogo Image Application Logo
lblacc Label Tells the user about what the page is about i.e. creating your account.
Email Text Field Asks the user to input the desired email through which they would like to be associated with MuSpace.
Confirm email Text Field Asks the user to re-input their email to confirm the correct email.
First name Text Field Asks users to input their first name for application use.
Last name Text Field Asks users to input their Last name for application use.
Username Text Field The user is required to create a unique username, which is what he’ll use to login with MuSpace.
Password Text Field Password is a unique identification key that user will use with username to log into MuSpace and keep his account protected.
Date of birth Text field / Drop-down Button The user can either enter his date of birth or choose the date in the dropdown calendar.
Register Button This button takes the user to the next page,i.e. The check-email page from where the user can authorize spotify and start using Muspace.

4.4.5 Home View

Field Type Description
GreetingLBL Label This is just a greeting that shows up when the user logs in and goes to the home page.
Total Listening Time Label Displays total time spent listening to music since account creation
Album Cover Button This is located in your friend’s section, every time you click on it it takes you to the album cover your friend was listening to.
Username Button This is located in your friend’s section, every time you click on it it takes you to the friend’s profile with that username.
Favartistlbl Label Displays the most played artist of the week by the user
Favsonglbl Label Displays the most played song of the week
SettingsButton Button Links user to the settings page
ProfileButton Button Links user to their profile
SeeMoreButton Button Lets the user view more friends' listening activity.

4.4.6 Message View

The Messages page is to allows users to communicate with their friends on the app.

Field Type Description
PickFriend Button Changes which friend user is talking to
TypeMessage Text Field User inputs the message they want to send to the user
SendButton Button Sends selected message to the database (then the user)
FriendScroll Scroll Bar Allows the user to scroll through a friends list
UserID Label Displays friend’s Username & Picture

4.4.7 Settings View

The View where a user can toggle between different settings options.

Field Type Description
UserID Label Label displays user profile name
Upload Button User uploads new profile picture
ChangePassword Button User changes password
DeleteAccount Button Deletes the user’s profile
Logout Button Logs the user out of MuSpace
LightMode Button Changes the UI to Light Mode
DarkMode Button Changes the UI to Dark Mode
LanguageEnglish Button Changes the language to English
LanguageFrench Button Changes the language to French

4.4.8 Notification View

A View where the user can view all of their account notifications.

Field Type Description
NotificationMessage Label/Button links to user’s profile or to notification content

4.4.9 Profile View

Field Type Description
Feed (not yet implemented) Label Feed section title, section dynamically displays latest feed items
FeedItem (not yet implemented) Button Individual feed item displays post information
TopArtists Label Section displays user’s top artists
ArtistID Label Displays individual artists’
FriendsAlbums Label Section displays user’s friends’ top rated albums
AlbumID Label Displays individual album name
TopSongs Label Section displays user’s top rated songs

4.4.10 FriendsView

Field Type Description
Your Friends Top Songs Button Displays your friend’s top album they are listening to
Your Friends Top Artists Button Displays your friends top artists they are listening to
Leaderboards Label A ranked chart that shows who out of your friends has the most listening hours and the number of unique artists they listen to
Friends Listening Activity Button A live feed that shows the song that your friend is listening to

5. Data Dictionary

6. Detailed Design

6.1 Module Detailed Design

RegisterPage()

  1. Check if user is not logged in
  2. Display the register page, giving the option to create an account
  3. When a user tries to register, communicate with the Firebase database backend for account authentication. Also stores basic user information into the Firestore database.
  4. Else, redirect to the main page

RegisterForm()

  1. Call RegisterField function to create fields
  2. Display fields:
    1. Email
    2. Confirm Email
    3. First Name
    4. Last Name
    5. Username
    6. Password
    7. Date of Birth

RegisterField(text,type,placeholder)

  1. Create Register field with attributes passed to the function

LoginPage()

  1. Check if the user is not logged in
  2. Display login page, giving user option to log in, recover password, or sign up
  3. When the user tries to login, communicate with the Firebase database backend for account authentication
  4. Else, redirect to the main page.

LoginForm()

  1. Call LoginField function to create fields
  2. Display fields for username/email and password input

LoginField(text,type,placeholder)

  1. Create Login field with attributes passed to the function

Sidebar()

  1. Lists all views; Home, Friends, and Messages
  2. Dynamically lists user stats; Total Listening Time, Artists Liked, Albums Liked
  3. Dynamically displays username and profile picture

SidebarButton()

  1. Display field for texts on the sidebar

ListeningActivityCard()

  1. Display username and what song and artist the user is listening to
  2. Option to bookmark the song being listened to

ProtectedRoute()

  1. If the user is logged in
  2. Display sidebar and main page
  3. Else, if not logged in, redirect to the login page

PageRouter()

  1. Display page paths:
    1. Login
    2. Register
    3. Home
  2. Home is a protected path, so the user must be logged in to access it

AlbumCover(width)

  1. Display album cover sized to parameter

UserButton()

  1. Displays:
    1. Username
    2. Profile Picture
  2. Links to the settings page

7. Maintenance

7.1 Corrective

GitHub Issues Tracking tool is going to be used to organize issues that need to be resolved

  1. Review: GitHub issues will be periodically monitored by the team to track new issues and their status
  2. Replication: Once a developer chooses to work on a specific issue they will attempt to recreate the issue inorder to diagnose the root cause of the issue.
  3. Correction: Once the issue’s root cause is identified, the developer will fix the issue in the code and update the Github repository with the fix and documented changes.

7.2 Preventative

7.3 Perfective

7.4 Adaptive

8. Extra Details

Version History:

Authored By:

This site is open source. Improve this page.