mix.me is a web application that allows users to view their Spotify listening history, statistics, and analytics. It consists of a React frontend in client and an Express backend in server.
The key functionality provided is securely authenticating with the Spotify API and retrieving user data. The backend handles the OAuth authentication flow with Spotify by implementing /login, /callback, and /refresh_token routes in …/index.ts. These routes manage access tokens using utility functions in …/utils, storing them in environment variables.
Once authenticated, the frontend makes API requests to Spotify using Axios and functionality defined in …/spotify. It retrieves user profile data like playlists, tracks, artists, and listens. This allows displaying personal statistics and top items over time periods.
Additional features utilize the Spotify API to get album details in …/Album.tsx, search Spotify content in …/Search.tsx, and generate personalized recommendations in …/Recommendations.tsx.
The app uses React Query in page components under …/pages to fetch, cache, and display API data. Custom hooks in …/hooks handle common logic like debouncing. Reusable UI elements are built as components under …/components.
Configuration utilizes tools like Vite, ESLint, PostCSS, and Babel. Routing and navigation is defined in …/routes. Responsiveness comes from Tailwind CSS utility classes.
In summary, mix.me securely authenticates with Spotify, retrieves user data via API requests, processes and visualizes personal statistics, and provides extended functionality through reusing components and leveraging external libraries.
References: client/public, client/src
The frontend functionality is implemented primarily through the code in the …/src directory. This directory contains the complete React application code for the client-side UI, routing, and integration with the Spotify API.
References: client/src/pages
The …/pages directory contains React components that implement the individual pages and routes of the Mix.me application. Each file defines a component responsible for one specific page.
References: client/src/components
The React components in …/components provide reusable UI elements for building the application interface. Key components include cards to display entities.
References: client/src/spotify
The core logic allowing users to view their Spotify data involves authenticating with the Spotify API and retrieving user data. The …/spotify directory contains all the functionality for interacting with the Spotify API.
References: client/src/hooks
The …/hooks directory contains reusable logic. It includes files that define custom hooks for debouncing values and scrolling on navigation.
References: client/public, client/src/routes
Routes are configured in the …/Routes.tsx file. This file defines a component which renders the overall route configuration.
References: server/dist, server/src
The backend functionality handles authentication with the Spotify API and provides endpoints for the frontend to make requests against. Authentication is implemented using the OAuth protocol via the Spotify API.
Read moreReferences: server/dist/index.js, server/src/index.ts
The Express server is configured in the …/index.ts file. This file sets up the basic Express server and defines routes for the main authentication endpoints.
References: server/dist, server/src
The Mixme server implements OAuth authentication with Spotify using routes handled in …/index.ts. The /login route generates a random string using the function exported from …/index.ts. It stores the string in a cookie and redirects to Spotify for authentication.
References: server/dist/utils, server/src/utils
The …/utils directory centralizes common utility functions and classes used throughout the Mixme server codebase. It contains implementations of algorithms that are reused in multiple places to standardize behavior.
References: client/src/spotify, server/src
The core business logic of the application allows users to view their Spotify data through authentication with the Spotify API and retrieval of user profile information, playlists, top artists/tracks and other listening history data. This is implemented across both the client and server codebases.
Read moreReferences: client/src/spotify, server/src
The core logic for authenticating with the Spotify API and making API requests is handled across the …/spotify and …/src directories.
References: server/src
The Mixme server implements token handling and refresh through routes defined in the …/index.ts file. This file sets up an Express server and defines routes for /, /login, /callback, and /refresh_token.
References: client/src/spotify
The …/spotify directory contains functions for retrieving a user's listening data from the Spotify API. It handles authentication using the access and refresh tokens stored in localStorage to make authorized requests to the API.
References: mix.me
Statistics and visualizations are generated by processing data fetched from Spotify APIs. The …/spotify directory contains logic for authentication and making API requests to retrieve a user's top artists, albums, and tracks.
References: client/public, client/src/routes, server/dist
The core application structure is defined through routing configuration and navigation logic. Routing is handled in the …/routes directory. This directory contains the route configuration and page components for the React application.
References: client/public
The client application is configured through code located in the …/public directory. This directory contains static assets like images, CSS files, and JavaScript files that are served to clients.
References: server/dist/index.js
The Express server is initialized in the …/index.js file. This file initializes an Express app.
References: client/src/components, client/src/hooks, client/src/utils, server/dist/utils, server/src/utils
The ProfileCard component in …/ProfileCard.tsx conditionally renders elements and maps over props.
References: client/src/components
The React components defined provide reusable UI elements. Components such as accept external data as props and conditionally render fields to display this data.
Read moreReferences: client/src/hooks
The …/hooks directory contains reusable React hooks that implement common logic needs across components. It includes hooks defined in files.
References: client/src/utils
The …/utils directory provides common utility functions used throughout the client codebase. Functions here handle tasks like formatting values in a reusable way.
References: server/dist/utils, server/src/utils
The …/utils directory centralizes common utility functions used throughout the Mixme server codebase. This includes functions for interacting with the database, and other tasks.
References: client/src/pages
The …/pages directory contains React components that implement individual pages and routes for the Mix.me application. Each file in this directory defines a component responsible for one specific page. These components fetch data from APIs, handle loading states, and display content to the user.
References: client/src/pages
The React components in the …/pages directory implement individual app pages.
References: client/src/pages/Album.tsx, client/src/pages/LikedSongs.tsx, client/src/pages/Playlist.tsx, client/src/pages/Recent.tsx, client/src/pages/Track.tsx, client/src/pages/Tracks.tsx
The components in the …/pages directory handle track and album playback across several pages. The component in …/Album.tsx uses state and functions to sequentially play tracks in an album. It stores the current track index and playback state in component state. The function pauses/resumes playback.
References: client/src/pages/Albums.tsx, client/src/pages/Artist.tsx, client/src/pages/Artists.tsx, client/src/pages/Playlists.tsx, client/src/pages/Profile.tsx, client/src/pages/Recommendations.tsx, client/src/pages/Search.tsx, client/src/pages/User.tsx
The components in …/pages fetch data from Spotify. …/Albums.tsx makes API requests to fetch a user's liked albums from Spotify on initial load and refetches at intervals. It manages loading state and maps over albums to render components.
References: client/src/pages/Login.tsx
The …/Login.tsx component handles user authentication workflows by rendering the login page UI. This component displays a header, branding content including a button, and footer on the login page.
References: client/src/pages/Error.tsx
This page handles errors that may occur when loading or navigating between pages. The component in …/Error.tsx is rendered for 404 errors to display a message with an option to route back home.
References: client/src/spotify
The …/spotify directory contains all the logic for interacting with the Spotify API. It handles authentication by storing access and refresh tokens in localStorage and refreshing tokens as needed. Requests to the API are made using the axios library, with tokens passed in headers. Functions are provided to get user data like profiles, playlists, top artists/tracks. Additional functions include getting album, track, playlist data and functions for following artists/playlists and creating/deleting playlists.
References: server/dist, server/src
The Mixme server implements OAuth authentication with the Spotify API to allow users to securely access their Spotify data. Key routes are handled in the …/index.ts file by the Express app instance.
References: server/dist, server/src/index.ts
The /login route handles redirecting the user to Spotify to start the OAuth flow and authenticate the application. It generates a random string, stores it in a cookie to later validate against during the callback. With the random string, the user is then redirected to the Spotify authentication endpoint, passing along the required scopes.
References: server/dist, server/src/index.ts
The /callback route in …/index.js validates the state parameter from the request matches the randomly generated string stored in the cookie earlier during authentication. If the strings match, it clears the cookie to prevent replay attacks.
References: server/dist, server/src/index.ts
The /refresh_token route allows renewing expired access tokens without requiring the user to reauthenticate. When the access token expires, the client app calls this route, passing the refresh token that was previously issued by Spotify. The route exchanges the refresh token for a new access token from Spotify. It returns just the new access token to the client app, allowing the app to continue making authenticated requests to the Spotify API seamlessly even as the initial access token expires.