I ended up revisiting the Jammming capstone project and completely revising it with different functionality in mind. The end project is Fast Tracks, and you can see it live here. Or check out the code on the project’s Github.
It’s pretty light on features, as I wanted to keep the experience simple and lightweight. It’s a PWA, so you can download it to your home screen on your phone and use it just like an app. The code is not the cleanest, but there’s a few things that may be of interest: using React’s context API for setting and storing the user’s theme preference (light or dark mode) and for authentication, using serverless functions on Netlify to authenticate with the Spotify API, and using the Context API and useReducer for app state, and getting a service worker to work with serverless functions by excluding those endpoints from being cached.
Appreciate feedback on the code or the app itself. Happy if I can learn something more by sharing this or to share some of what I learned to those with questions
Getting Status 400 error (in console) when pressing request tracks and a Cannot read property length of undefined error in the console and cannot read property data of undefined. I think those two undefined messages are related to the 400 error upon fetch attempt.
I expanded the first Fetch Get error. It happens when I press Get Tracks button. I did not have room to expand all errors. Perhaps check that the Spotify Redirect URI and related settings are correct. Page goes completely black when error appears as seen on the left.
Thanks, that’s really helpful! Looks like it’s unable to retrieve any seed tracks to give to the recommendations engine, prompting the 400 error. I’ve opened it as an issue so hopefully I can patch it tomorrow.
I’ve pushed an update for this issue. Now, the app shouldn’t crash in this situation, just continue as if no user action was taken. Error reporting in console should be more specific. Unsure if it will completely resolve the issue.
