Skip to content

Latest commit

 

History

History
50 lines (39 loc) · 2.58 KB

README.md

File metadata and controls

50 lines (39 loc) · 2.58 KB
Raw

Case Study: Spotify Player

✏️ Functional requirements

  • As a user, I want to display a playlist and its tracks (only one available)
  • As a user, I want to play/pause a track
  • As a user, I want to skip a track
  • As a user, I want to add/remove a track to/from my Liked Songs
    • the favorites list must be displayed on a separate page /favorites for example
    • a button with favorites count should appear on the navigation bar
    • you do not need to persist those preferences server-side for now, just store it locally (but persistently)
    • if I change page and I am playing a song, the current song should not stop and keep playing

⚙️ Non-functional requirements

  • Responsive UI;
  • Cache-first rendering approach;
  • React / GraphQL / Typescript / Next.js.

⚡️ Edge Cases

  • Keep tracks that are removed from the playlist available in the favorites page.
  • Preserve server's playlist tracks sorting even when new data comes in.
  • Handle unexpected playback errors.
  • Handle API network errors.

🏗️ Application structure

  • pages/ - Defines the application pages and routing (based on its file names).
  • gql/ - Output directory for generated GraphQL schema types (configured in codegen.ts).
  • lib/ - Defines React function components for rendering 'Tracks', 'Player', etc.
    • ./Apollo/ - Defines the Apollo client and cache configurations.
    • ./Components/ - Defines React function components for rendering 'Tracks', 'Player', etc.
    • ./Helpers/ - Defines common helper functions.
    • ./Icons/ - Defines a wrapper for the SVG icons dependency (bundled separetly within other node_modules during build - ~1.04kb gzipped)

❤️ 'Liked Tracks' Storage

I decided to store 'liked tracks' locally using the Apollo Local-only fields approach.

The file client-schema.graphql defines a client-side schema and introduces the likedTracks query type to write and query from. The writeQuery function allows writing data in a shape of a GraphQL query and the useQuery to hook subscription for data updates (e.g. when a track is liked).

✅ Testing

  • npm run cy:run:e2e to run end-to-end tests
  • npm run cy:run:component to run component tests

☁️ Running the app

  • Clone this repo
  • npm install to install all dependencies
  • npm run codegen to generate GraphQL schema types
  • npm run dev to start the local server

The app should now be up and running at http://localhost:3000 🚀