karitham.dev
+28
-21
README.md
+28
-21
README.md
···
1
-
## Usage
1
+
# ListenFrame: Your ListenBrainz Stats
2
+
3
+
ListenFrame is a web application that provides a personalized overview of your listening habits, pulling data directly from ListenBrainz. Simply enter your ListenBrainz username, select a time range, and explore your top artists and releases.
4
+
5
+
## Idea
2
6
3
-
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
7
+
The core idea behind ListenFrame is to offer a clean and interactive interface to visualize your listening statistics from ListenBrainz. It allows users to quickly see their most listened-to artists and albums over various periods, providing insights into their musical journey.
4
8
5
-
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
9
+
## Data Fetching
6
10
7
-
```bash
8
-
$ npm install # or pnpm install or yarn install
9
-
```
11
+
ListenFrame aggregates data from several sources to provide a rich user experience:
10
12
11
-
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
13
+
- **ListenBrainz API (`https://api.listenbrainz.org`):** This is the primary data source for fetching your personal listening statistics, including top artists and releases.
14
+
- **Cover Art Archive (`https://coverartarchive.org`):** Used to retrieve album cover art for your top releases.
15
+
- **MusicBrainz API (`https://musicbrainz.org`):** Utilized to fetch artist metadata and link to external resources like Wikidata.
16
+
- **Wikidata API (`https://www.wikidata.org`):** Helps in finding image information for artists.
17
+
- **Wikimedia Commons API (`https://commons.wikimedia.org`):** Provides the actual image URLs for artist thumbnails.
12
18
13
-
## Available Scripts
19
+
## Deno Integration
14
20
15
-
In the project directory, you can run:
21
+
This project utilizes Deno for dependency management and as a runtime environment.
16
22
17
-
### `npm run dev` or `npm start`
23
+
To run the application, you would typically use Deno tasks.
18
24
19
-
Runs the app in the development mode.<br>
20
-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
25
+
### Running the application with Deno
21
26
22
-
The page will reload if you make edits.<br>
27
+
To start the development server, use the following command:
23
28
24
-
### `npm run build`
29
+
```bash
30
+
deno task start
31
+
```
25
32
26
-
Builds the app for production to the `dist` folder.<br>
27
-
It correctly bundles Solid in production mode and optimizes the build for the best performance.
33
+
This will run the app in development mode, and you can view it in your browser, usually at `http://localhost:3000`.
28
34
29
-
The build is minified and the filenames include the hashes.<br>
30
-
Your app is ready to be deployed!
35
+
### Building the application with Deno
31
36
32
-
## Deployment
37
+
To build the application for production, use:
33
38
34
-
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
39
+
```bash
40
+
deno task build
41
+
```
35
42
36
-
## This project was created with the [Solid CLI](https://github.com/solidjs-community/solid-cli)
43
+
This will create a production-ready build in the `dist` folder.