Giter Club home page Giter Club logo

show-me-the-music's Introduction

Sigh

For unexpected and unanticipated reasons, songkick has revoked my API key. I have written to them and they will not reinstate it and/or tell me why. So this codebase is unfortunately worthless without that API key. So unfortunately the website no longer works.

About

This app was designed for the exploration of music. It no longer works bc Songkick has revoked my API key :( It allows you to make a playlist from artists that will be coming to see you. It is more for a user that doesnt have a band or artist in mind, but rather knows they would like to go out on Saturday and wants to sample the music playing on Saturday. Its also good for traveling.

See progress here --> https://www.showmemusic.live/

This is what is used to do:

app_demo (1)

Getting Started

In order to deploy this project locally, you will need to have vercel installed and enviornment variables configured.

Typescript Configuration

In order to use spotify types, we are using @types/spotify-api. This unfortunately does not export the types as a module. So for now, we are copying an pasting the type definitions into our project. Not ideal, but ok for now.

See #14

Enviroment variables

We use the following environent variables:

  • SONGKICK_KEY
  • SPOTIFY_CLIENT_SECRET
  • SPOTIFY_CLIENT_ID

In order to run on localhost, you will need a .env file with those environment variables. In order to run continuous integration tests, you will need to add each environment variable as a repository secret in the repo settings (Repo settings --> Secrets --> Repository secrets) In order to deploy to vercel, you will need to add them in the Project Settings. (Settings --> Environment Variables)

Running Tests

We are using cypress continous integration tests. Everytime you commit to a pull request, the tests will run. Note, again, in order to run cypress tests using github actions, you will need to add environment variables as a repository secret.

To run tests:

yarn cypress

Deploying

You can deploy to a staging url by running the following commands:

now

This will stage your app at: https://show-me-the-music-saratankard.vercel.app/

To deploy to production, you can deploy using two methods:

  1. pushing to the master branch
  2. running the command
now --prod

Linting & Type Checkings

Linting is automatically done using prettier and husky. In order to check types for now you will need to manually run (TODO: Automate this)

yarn ts

show-me-the-music's People

Contributors

gecko25 avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

show-me-the-music's Issues

Add a spotify player concept

We want to add a spotify web player so a user can add tracks and listen in the play.

Ideally without having to make a playlist.

Add event info to queue list & make a playlist page

  • include "played" bool to keep track of which songs have been played or not (use the state changed event handler)
  • link to event and to artists
  • allow users to remove songs from the queue
  • make sure no duplicate tracks are added

404 on landing :(

I wanted to see what you are up to but its not working :(
Screen Shot 2021-11-04 at 10 30 11 AM

Just messing with ya ☺️ . I miss you and hope you are doing well!!

Do some more sophisticated artist matching

  1. When trying to match songkick to spotify we should try to match the strings better to ensure the event matches the artist

  2. use an api like https://musicovery.com/ to match ids (although this API doesnt seem very stable)

  3. do some more sophisticated string matching

  4. allow the user to browse the artists returned from spotify.. display a message like

not the artst you were looking for? is it one of these?

Fix the icon UX on mobile

When the user clicks the search button while on the search page, we could

  • open the calendar to pick a date
  • show an overlay arrow
  • replace the search/home icon with an info button

Prevent phone from locking and stoping play

On mobile, if you make a playlist in the app and the phone locks, the music stops.

It also looks like if you switching from the app AT ALL, the player dismounts
(example, add some tracks, switch to another app like spotify, imessage, come back to showme and the player is blank)

Add spotify types

After several hours lost, I am not sure why I am unable to use the "@types/spotify-api" library.

It would be very useful to have this in my project...

This seemed to be the most useful thread, but I my ts knowledge is limiting me here I think.

microsoft/TypeScript#11420

Preserve users state on back button

If the user makes a search by changing their date/location,
When they click back or press the back button,
That search should be preserved
We also should preserve in session so login doesnt reset their search

Fix the ip address issue when deploying to prod

Prefix the request with ip.

Getting this error in prod environment:

2021-11-16T01:38:13.224Z	2e56d45a-85fb-4262-a2af-876b8ef28087	ERROR	{
  displayMessage: 'Oops! Something unxpected happened. We cannot load events at this time. Please refresh the page or again later!',
  details: "Parameter 'location' must be one of the forms: 'sk:1234', 'geo:-21.22,40.0', 'clientip' or 'ip:127.0.0.1'",
  status: 400,
  statusText: 'Bad Request'
}```

fix the ip address

when the user loads the page, we should read their ip address and show the correct location.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.