Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/FidelisClayton/elm-spotify-mapper

An app built with Elm to explore new artists using the Spotify api.
https://github.com/FidelisClayton/elm-spotify-mapper

elm elm-architecture elm-demos elm-lang spotify spotify-api spotify-playlist

Last synced: about 2 months ago
JSON representation

An app built with Elm to explore new artists using the Spotify api.

Host: GitHub
URL: https://github.com/FidelisClayton/elm-spotify-mapper
Owner: FidelisClayton
License: mit
Created: 2017-04-19T17:48:56.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-03-04T01:00:56.000Z (almost 2 years ago)
Last Synced: 2024-10-13T20:04:10.446Z (2 months ago)
Topics: elm, elm-architecture, elm-demos, elm-lang, spotify, spotify-api, spotify-playlist
Language: Elm
Homepage: http://spotify-mapper.fidelisclayton.com
Size: 11.6 MB
Stars: 64
Watchers: 4
Forks: 6
Open Issues: 13
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

Awesome-BigData - Spotify Mapper - Elm app integrated with Spotify Api to search and explore new artists. (Examples)

README

# Spotify Mapper

![Elm Spotify Mapper](./.github/cover.png)

This app is a new version of my previous Spotify mapper built with Angular 1.x. I used this app to learn more about Elm and see how it works beyond the simplicity of to-do apps.

## :package: Features

### :mag_right: Search for artists or bands

Your journey starts by searching for any artist available on Spotify.
![Search for artists or bands](./.github/1-search-for-artist-or-band.gif)

### :microphone: Explore similar artists

Then you can explore similar artists by clicking on the artist image.
![Explore similar artists](./.github/2-explore-similar-artists.gif)

### :notes: Preview songs

You can listen to a preview of the artist top 5 songs.
![Preview songs](./.github/3-preview-songs.gif)

### :musical_score: Save the playlist

Finally, you can also save the playlist so you can listen directly on your Spotify app.
![Save the playlist](./.github/4-save-the-playlist.gif)

## Installation

```sh
$ git clone https://github.com/FidelisClayton/elm-spotify-mapper
$ cd elm-spotify-mapper
$ npm install
```

After clone this repository run `npm install` inside the project folder to install and build the project dependencies.

## :runner: Getting started

First of all you will need to set the environment variables with your spotify developer credentials:

```sh
cp .env.sample .env
```

Open the `.env` file and set the `CLIENT_ID`, `CLIENT_SECRET` and `REDIRECT_URI`.
To run this project in your machine you just need to execute the `npm start`command, it will start a development server on port `3000`. Enjoy it!

## :heart: Contributing

Please use the [issue tracker](https://github.com/FidelisClayton/elm-spotify-mapper/issues) to report bugs or suggest new features and feel free to fix bugs or add new features on the project. Your contributions is always welcome!