danieljones256/intune

Purpose and Runtime

Intune is a React single-page application that lets a user authenticate with Spotify, select a song, and generate a playlist of similar tracks through the Spotify Web API. It is built and served with Vite, with deployment-oriented SPA redirects in public/_redirects.

Primary browser entry points:

• index.html mounts the client application.

• src/main.jsx initializes React.

• src/App.jsx provides the application-level composition and routing shell.

Application Shell and Styling

The top-level UI is assembled in src/App.jsx, with global and application styling split across:

• src/index.css

• src/App.css

• tailwind.config.cjs

Tailwind/PostCSS are part of the presentation pipeline rather than a server-side runtime. The application is client-rendered JavaScript and does not contain a backend service in this repository.

Page-Level User Flow

The product has two primary page stages:

• src/pages/Home.jsx: likely the landing/authentication and initial song-selection experience.

• src/pages/Search.jsx: likely the Spotify search and track-selection workflow.

The expected control flow is: user reaches the home experience, authenticates against Spotify, searches or chooses a track, then advances to playlist-generation behavior driven by that selected track.

Song Selection and Playlist Presentation

src/components/Songcards.jsx is the main reusable track-display component. It forms the UI boundary between Spotify track data and user actions such as choosing a seed song or viewing generated songs.

Relevant paths:

• src/components/Songcards.jsx

• src/pages/Search.jsx

• src/pages/Home.jsx

Spotify responses should be treated as external API data at this boundary; rendering logic should tolerate incomplete metadata such as missing artwork, artists, or preview URLs.

Spotify Integration Boundary

Spotify Web API is the central external dependency. Authentication is performed in the browser and Spotify access credentials enable track search and playlist creation. The README’s whitelist constraint indicates the application uses a Spotify developer application in a limited/testing mode.

Architecturally, Spotify owns:

• user identity and authorization,

• searchable song catalog,

• similar/recommended-song source data,

• target playlist creation in the authenticated user’s account.

No dedicated API proxy, credential store, or server-side token exchange is visible in the supplied tree; authentication and API orchestration therefore appear to be browser-side concerns.

Build and Deployment Infrastructure

Vite provides local development and production bundling:

• vite.config.js

• package.json

• src/main.jsx

The deployed site is intended for static hosting, likely Netlify based on the documented demo URL. public/_redirects is important for preserving client-side route handling when requests reach static hosting directly.

Key Architectural Boundaries

1. Static host → Vite-built SPA: index.html, src/main.jsx, public/_redirects.

2. Application composition → page workflows: src/App.jsx, src/pages/Home.jsx, src/pages/Search.jsx.

3. Page state/API orchestration → track rendering: src/pages/Search.jsx, src/components/Songcards.jsx.

4. Browser client → Spotify authorization and Web API: implemented from the React application; no backend boundary is present in the tree.

5. Data-driven UI → styling system: src/App.css, src/index.css, tailwind.config.cjs.