How hejmsdz/slides-web works
Purpose and Runtime
This is a TypeScript React Router application for creating, organizing, and presenting song lyrics as slides. It has a public landing page, authenticated dashboard, shareable/live presentation views, and PDF rendering/export. Client and server entry points are app/entry.client.tsx, app/entry.server.tsx, and app/root.tsx; route registration is centralized in app/routes.ts.
Routing and Application Shell
Route modules form the primary server/UI boundary: loaders/actions can serve pages and mutations while React renders route content. Public routes include landing, privacy, waitlist, status, invitations, and live views; dashboard routes group authenticated management workflows. Core paths: app/routes/_index.tsx, app/routes/dashboard.tsx, app/routes/$live.tsx, and app/routes/$live.pdf.tsx.
Authentication, Sessions, and Authorization
Authentication is server-side and exposed through dedicated auth routes, including Google login/callback, nonce callback, and logout. Session and cookie concerns are isolated from route modules, while API endpoints likely provide current-user/team context. Relevant boundaries: app/auth.server.ts, app/session.ts, app/cookies.server.ts, app/routes/auth.google.ts, and app/routes/auth.google.callback.ts. Local session storage is represented by data/sessions.
Dashboard Domain: Users, Teams, and Songs
The dashboard is the management surface for account settings, team membership/invitations, and song CRUD. Song editing is routed per song; account/team mutations are explicit action routes, helping keep ownership and authorization at server boundaries. Primary modules: app/routes/dashboard.songs.$id.tsx, app/routes/dashboard.songs.new.tsx, app/routes/dashboard.settings.tsx, app/routes/dashboard.teams.$id.invite.ts, and app/routes/dashboard.account.update.tsx.
API and Client Data Access
Server API modules separate domain access from UI routes: bootstrap/live data, authentication, users, teams, and songs. Client hooks consume dashboard and paginated-song data, while app/cache.client.ts indicates browser-side cache coordination. Main paths: app/api/api.ts, app/api/bootstrap.ts, app/api/live.ts, app/api/songs.ts, app/api/teams.ts, app/hooks/use-dashboard-data.ts, and app/hooks/use-paginated-songs.ts.
Song-to-Presentation Pipeline
Song authoring components collect lyrics and typesetting settings, generate slide previews, and feed presentation/PDF views. A live identifier route exposes presentation output separately from the dashboard, including a PDF-specific route. Key components: app/components/songs/song-form.tsx, app/components/songs/lyrics-editor.tsx, app/components/songs/typesetting.tsx, app/components/songs/slides-preview.tsx, and app/components/pdf/pdf-presentation.tsx.
Presentation Delivery and Infrastructure
Presentation styling and PDF client behavior are isolated for display-oriented rendering. Static Cast assets include PDF.js and its worker, suggesting browser/device presentation support without routing through the app server. The deployment artifact is Docker-based, with a GitHub workflow for image builds. Paths: app/styles/presentation.css, app/components/pdf/pdf.client.ts, public/cast/index.html, public/cast/pdf.js, Dockerfile, and .github/workflows/docker-image.yml.
Main entry points: routes.ts Route registry · song-form.tsx Song authoring · auth.server.ts Auth service · dashboard.tsx Dashboard shell
Components 26
App Runtime
- Client entry
app/entry.client.tsx - Server entry
app/entry.server.tsx - Root shell
app/root.tsx - Route registry
app/routes.ts - Public landing
app/routes/_index.tsx
Identity
- Auth service · Owns authentication and authorization checks.
app/auth.server.ts - Session layer
app/session.ts - Cookie handling
app/cookies.server.ts - Google auth routes
app/routes/auth.google.ts - Google callback
app/routes/auth.google.callback.ts
Dashboard
- Dashboard shell
app/routes/dashboard.tsx - Song editor route
app/routes/dashboard.songs.$id.tsx - Song authoring
app/components/songs/song-form.tsx - Lyrics editor
app/components/songs/lyrics-editor.tsx - Typesetting
app/components/songs/typesetting.tsx - Dashboard data hook
app/hooks/use-dashboard-data.ts - Songs API
app/api/songs.ts - Teams API
app/api/teams.ts
Presentation
- Live presentation
app/routes/$live.tsx - Slide preview
app/components/songs/slides-preview.tsx - PDF presentation
app/routes/$live.pdf.tsx - PDF renderer
app/components/pdf/pdf-presentation.tsx - Live API
app/api/live.ts
Delivery
- Cast PDF assets · Includes PDF.js and its worker.
public/cast/index.html - Docker image
Dockerfile - Image build workflow
.github/workflows/docker-image.yml
Connections 27
- Client entry → Root shell: hydrates
- Server entry → Root shell: renders
- Route registry → Public landing: registers
- Route registry → Dashboard shell: registers
- Route registry → Google auth routes: registers
- Route registry → Google callback: registers
- Route registry → Live presentation: registers
- Route registry → PDF presentation: registers
- Google auth routes → Auth service: starts login
- Google callback → Auth service: completes login
- Auth service → Session layer: creates session
- Session layer → Cookie handling: uses
- Dashboard shell → Auth service: requires user
- Dashboard shell → Dashboard data hook: loads client data
- Dashboard data hook → Songs API: reads songs
- Dashboard data hook → Teams API: reads teams
- Song editor route → Songs API: loads and saves
- Song editor route → Song authoring: renders
- Song authoring → Lyrics editor: edits lyrics
- Song authoring → Typesetting: configures layout
- Song authoring → Slide preview: generates preview
- Live presentation → Live API: loads live data
- Live presentation → Slide preview: renders slides
- PDF presentation → Live API: loads live data
- PDF presentation → PDF renderer: renders PDF
- PDF renderer → Cast PDF assets: uses viewer assets
- Image build workflow → Docker image: builds image