Anisong - Your personal anime playlist creator
Tags: refinehackathon
Published: 2023-07-18 13:21:18

## What I built 
Anisong is a web app to create personalized playlists featuring the very best opening and ending theme songs from your favorite anime series.

### Category Submission: 
- Best Overall Project
- Most Visually Pleasing
- Most Technical Impressive
- Best Project built using Supabase as the main data provider for the refine app.

### App Link
The project has been deployed with Vercel and can be found at the following link: [Anisong](https://anisong-app.vercel.app)

### Screenshots 

**Homepage**

![Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0mwg8eoodtqz0ogfgjy.png)

**Playlists** - Create and browse your playlists

![Playlists page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ptiwx85cl11s2gtjxmq.png)

**New Playlist** - Create a new playlists


![Create playlist page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzgqwl9d6jyb7x6i60t3.png)

**Playlist tracks** - Browse playlists

![Playlist page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txqf08jsyl91wgtzt7sh.png)

**Explore page** - Explore public playlists created by the community


![Explore page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmfev4q0rcj1448q0zrk.png)


### Description 
With Anisong, you can create your very own personalized anime playlist. Simply handpick your beloved anime series, and like magic, we'll create a customized playlist that perfectly captures the spirit of each anime.

### Link to Source Code
The source code for the project can be found on GitHub at the following repository: [GitHub Repo](https://github.com/dariuspasca/anisong)


### Permissive License 
The project is licensed under the [Apache License](https://github.com/dariuspasca/anisong/blob/main/LICENSE).

## Background (What made you decide to build this particular app? What inspired you?) 
I decided to build this particular app because I enjoy watching anime and the opening and ending tracks are part of the experience.

I often like to listen to anime playlists while working but 
the existing playlists lack the personal touch I desired and often felt repetitive. Also many existing playlists fail to keep up with the latest releases and trends.

That's when the idea for this app sparked. I wanted to create a platform that would allow anime fans like myself to have control over their anime music experience, enabling them to create their own personalized playlists.

### How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?) 
This Project is built using the following resources:

- [NextJS](https://nextjs.org/)
- [Refine](https://refine.dev/)
- [Supabase](https://supabase.com/)
- [shadcn/ui](https://ui.shadcn.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [MyAnimeList API](https://myanimelist.net/)

I wasn't aware of Refine before, but diving into it was an enjoyable experience. I was already familiar with many of the technologies that Refine uses, such as React Query, so working with it was an absolute pleasure


### Additional Resources/Info
I would like to mention that I have plans to expand the features of the app by integrating it with popular music streaming platforms such as Spotify and Apple Music. This integration will allow users to seamlessly connect their Anisong playlists with their Spotify or Apple Music accounts, giving them even more flexibility and convenience in accessing their favorite playlists.