TypeScript app for media exploration in a small friend group
- TypeScript 86.6%
- CSS 9.3%
- HTML 4.1%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
| css | ||
| src | ||
| .gitignore | ||
| create-tables.sql | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
Catalounge
Catalounge is a web app designed for small groups of people to explore new media together.
Goals
-
Users need to be able to:
- Rate all media items in a season.
- Submit media for a season.
-
Support the following media types:
- Music, through the MusicBrainz API.
- Generic, a default type for media without specific implementation.
Developer Information
Domain Model
classDiagram
class Season {
- members: List~Account~
- content: List~Album~
- startDate: Date
- stopDate: Date
+ active() boolean
+ addMember(Account member) void
+ removeMember(Account member) void
+ addContent(Account member, Album submission) void
+ remove Content(Album submission) void
}
Season "*" --o "*" Account
Season "*" --o "*" Album
class Account {
- username: string
- password: string
- allRatings: Array~Rating~
+ rate(Album media, number score, string comments) void
}
Account "1" --* "*" Rating
note for Account """<ul>
<li> username cannot be empty
<li> password cannot be empty
</ul>"""
class Rating {
- score: number
- media: Album
-? comments: string
}
Rating "*" --o "1" Album
note for Rating """
<ul>
<li> score >= 0
<li> score <= 10
</ul>
"""
class Album {
-~ mbid: string
+ load() Promise~IRelease~
}
note for Album """<ul>
<li> mbid has 36 characters
</ul>"""
Interaction Flows
Account Creation
To participate in seasons, users need to create an account with a username and a password. These will differentiate the ratings between users.
flowchart LR
start[[Display user creation screen]]
start == Username and Password ==> tryLogin
tryLogin{Insert into table based on inputted username and password}
tryLogin -. Username already exists .-> start
tryLogin -. Username/Password is empty .-> start
tryLogin -. Valid new username/password .-> success
success[[User Created!]]
Login
Users need to login to enter ratings of media into a season.
flowchart LR
start[[Display login screen]]
start == Username and Password ==> tryLogin
tryLogin{Load state based on username and password}
tryLogin -. Username does not exist .-> start
tryLogin -. Username exists, wrong password .-> start
tryLogin -. Username/Password is empty .-> start
tryLogin -. Valid username/password .-> success
success[[Login Successful!]]
Rating
Users need to update their ratings for media.
flowchart LR
start[[Recieve Score + Comments for a media from a user]]
start == Media, Score, Comments ==> rate
rate{Create/Update a rating entry with the parameters}
rate -. Rating is not in the range 0-10 .-> start
rate -. Valid rating/comments .-> success
success[[Display updated score + comments with the media]]