Third party app to explore Spotify podcasts/episodes and manage your library.
The UI components were written using Typescript / React and styled with CSS modules, while Next.js takes care of all the boring stuff such as bundling, code splitting and serving assets.
Even though this was built over Next.js runtime framework I opted for mostly not using next/router and next/link as I was exploring the idea of creating a "hybrid" single page app experience (content sits behind a login anyway and SEO wasn't a requirement) where I can throw some SSR/SSG in the mix if needed (e.g. login, landing page).
The cool part about it is that we have most of the other Next.js benefits like great DX, close to zero config, Image component and so on without having to worry about persistent layouts.
The content is provided by the Spotify Web API and I've used React Query for managing server state and data fetching. The API authentication goes through a couple of Next.js serverless functions but is mostly handled by the Spotify API.
As far as testing goes, I've used Jest + React Testing Library for a more unit/integration testing approach. While some Cypress e2e tests would be great, they are not so practical in this case as authentication goes through third party page and there is no API test environment available. Testing data is generated by a Fishery factory which uses Faker.js under the hood for random but valid data.
The app is live at https://podcasts.gnbaron.com but in case you would like to run it locally follow the steps below.
Register your app within the Spotify Developer Console and make sure Redirect URIs point to http://localhost:3000/api/auth/callback.
Then grab your CLIENT_ID / CLIENT_SECRET and create a .env.local file like this:
CLIENT_ID= # your client id
CLIENT_SECRET= # your client secret
AUTH_REDIRECT_URI=http://localhost:3000/api/auth/callbackAfter that you should be good to go:
$ yarn dev # run next development mode
$ yarn build # creates an optimized production build
$ yarn start # run app in production mode
$ yarn test # run unit testsIf you have any suggestion, question or comment feel free to reach out and say hello.
This project is licensed under the MIT license.