TypeScript app for media exploration in a small friend group
  • TypeScript 86.6%
  • CSS 9.3%
  • HTML 4.1%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
2026-10-11 23:24:56 -05:00
css Search now takes place in HTML form element 2026-10-11 23:24:56 -05:00
src Search now takes place in HTML form element 2026-10-11 23:24:56 -05:00
.gitignore Project Infrastructure with Vite, Vitest, & PGLite 2026-06-23 23:56:53 -05:00
create-tables.sql SQL Table Creation Statements, updated domain model for MVP 2026-06-24 01:06:48 -05:00
index.html CSS, more detailed album view 2026-06-27 15:31:51 -05:00
package-lock.json Updated package versions 2026-10-11 22:54:45 -05:00
package.json Loading albums from MusicBrainz, update domain model 2026-06-25 15:50:21 -05:00
README.md Search Page 2026-06-29 10:37:27 -05:00
tsconfig.json Project Infrastructure with Vite, Vitest, & PGLite 2026-06-23 23:56:53 -05:00
vite.config.ts Website now loads a preview of the album cover & metadata 2026-06-25 22:03:20 -05:00
vitest.config.ts Project Infrastructure with Vite, Vitest, & PGLite 2026-06-23 23:56:53 -05:00

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]]