Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jesuscc1993/unofficial-ngx-anilist-client

Unofficial anime management client written on Angular Material and integrated against AniList's GraphQL API.
https://github.com/jesuscc1993/unofficial-ngx-anilist-client

angular angular-cli angular7 anilist graphql

Last synced: 3 days ago
JSON representation

Unofficial anime management client written on Angular Material and integrated against AniList's GraphQL API.

Awesome Lists containing this project

README 

        
# Unofficial AniList Client



Anime management client demo built in [Angular](https://angular.io/) 14 and [Angular Material](https://material.angular.io/).







## Pages



### Search



Allows for paginated searching of anime series in a table format.



Filters1 can be used to refine the search. They also are stored on the URL and retrieved when loading.



1 title, aired before, aired after, scored above, scored below, genres, formats, statuses and on list



### Dashboard



Currently shows three sidebars:



- Recently updated list entries, with optional grouping by status (multiple selection available)

- Media related to added entries, with optional grouping by format (multiple selection available)

- Added media that recently finished airing, with optional grouping by format (multiple selection available)



### User list



Allows for paginated searching of the anime series on the logged user's list.



Allows filtering by title and watching status.



It additionally displays some statistics at the page's bottom and features live reload unless disabled.



### Anime detail



Presents all the data relevant to an anime1 in a single page.



\* Includes all the information displayed on the table entry and the additional info modal.







## Main components



### Anime table entry



Displays the most basic anime information1 in a single row.



Different background colors2 are used based for entries already on the user's list.



1 cover, title, format, year, genres, average score and episode count



2

completed,

dropped,

paused,

planning,

repeating and

watching.



\* Used on the search and user's list pages' tables.



### Additional info modal



Presents additional anime information1 not present on the table entries.



1 description, airing status, studio and tags



\* Accessible from the anime actions dropdown.



### Entry form modal



Allows the creation of a new user list anime entry or the modification of an existing one.



\* Accessible from the anime actions dropdown.



### Anime actions dropdown



Provides multiple actions to be done with an anime



- Add entry1

- Update entry2

- Favorite anime2

- Delete entry2

- Display the additional info modal.

- External link to the anime on AniList.



1 Only available when logged in and the entry is not on the logged user's list



2 Only available when logged in and the entry is on the logged user's list



\* Accessible from the anime table entry and additional info modal components and the anime detail page.







## Requirements



- Local installation of [Angular CLI](https://cli.angular.io) for compilation

- Access to [AniList's public API](https://anilist.gitbooks.io/anilist-apiv2-docs/) for data retrieval and perspiration

- [Environment file](http://tattoocoder.com/angular-cli-using-the-environment-option/) with the ID of an [AniList API v2 Client](https://anilist.co/settings/developer) pointing to http://localhost:4200/login on redirection







## Links



- [Live demo](https://jesuscc1993.github.io/unofficial-ngx-anilist-client/anime-search)



## TODO



- Add language selection

- Add query options popup for dashboard lists

  - Include, at least, limit, sort, status and format

- Do NOT reset pagination on list changes (reset only on filter changes)

- Limit dashboard results to improve load times

- Move tags to the store