aabounegm / cast Goto Github PK

Use this GitHub Action. Create an escape route to skip code review when a feature was pair-programmed.

Acceptance criteria:

• every subsequent PR should have 1 person from the team assigned for review randomly after the CI checks pass
• PRs with a pair-programmed label should not be affected.

Blocked by #9 and #10.

Acceptance criteria:

• every PR is validated with pnpm run lint in the workspace root and pnpm run test:unit and pnpm run test:e2e in the app project
• pnpm's dependencies are cached across workflow runs

Blocked by #2

Use the Svelte Testing Library with Jest.

Acceptance criteria:

• pnpm test:unit in the app project runs the test suite

Use svelte-persistent-writable. No need to track the entire history, a rolling history of 6 entries is sufficient.

Acceptance criteria:

• The "Recently listened" section on the podcast gallery shows up to 6 recently listened podcasts
• Listening history is persisted locally across page reloads

Steps:

1. Remove the line that runs svelte-check from .husky/pre-commit
2. Run pnpm exec husky add .husky/pre-push <that command from pre-commit that runs svelte-check>
   No need to mess around with permission bits

Use Upptime.

Acceptance criteria:

• a status page is available via GitHub Pages
• badges of uptime percentage and response time are available in the README
• a link to the status page is available in the README by clicking on badges
• uptime alerts are sent to GitHub Issues

Acceptance criteria:

• displays the available podcasts in a grid
• each podcast is represented with a cover art, a title and the authors
• has a way to view liked podcasts

Artifacts:

• a Figma link with the design

Integrate with the Supabase backend to fetch a list of all podcasts with all of their meta information and the URL to the audio file. For now, just dump it as JSON somewhere.

Acceptance criteria:

• Every podcast from Supabase is fetched along with all of its meta information (we'll filter it out later)
• No private tokens are leaked in the client build
• Fetching works on both the main deployment and the preview deployments (on subdomains of cast-iu.pages.dev)
• The data is fetched in the format of proposed TS interfaces

Interfaces:

interface Podcast {
  id: number;
  title: string;
  author: string;
  coverUrl: string;
  episodes: Episode[];
}

interface Episode {
  id: number;
  title: string;
  duration: number;
  audioUrl: string;
  favorite?: boolean;  // omit this field for now
}

Each sprint should correspond to a milestone.

Currently, the lint script runs 3 things, chaining them with ;. In shell terms this means "disregard the exit code of the first 2 commands and use the exit code of the last command as the final exit code". Hence, when ESLint or Prettier fail, but svelte-check passes, we get a passing workflow.

An obvious solution would be to chain the commands with &&, but the problem with that is that a failing command prevents all of the subsequent commands from running. When using the lint script locally, it's nice to see problems from all 3 tools to take parallel action.

Having said that, do some research for cool ways to propagate non-zero exit codes without breaking the command chain. Maybe something in shell syntax or some package from npm. If nothing fits, fall back to &&.

Blocked by #26. No animation is required, no drag-to-close functionality either. The markup of the bar has already been provided by @alkaitagi.

Acceptance criteria:

• It should look identical to the proposed design
• It should feature links to navigate to "Podcast Gallery" and "Your Library" pages
• It should indicate what page the user is currently on (Podcast Episodes is a sub-page of the two pages I mentioned previously)
• It should indicate whether an episode is currently loaded for playing
• It should open the Now Playing widget over the current page by clicking the mini-player
• It should close the Now Playing widget by clicking on the "chevron down" icon
• It should be a part of the layout (meaning it should appear on every page)

For now, it only strips leading zeros of the hour count, doing 1:00:00 instead of 01:00:00, but it doesn't do it for minutes. We should have durations like 5:00, not 05:00.

Implement the layout proposed in #27. Delegate the styling of audio controls to #40.

Acceptance criteria:

• The widget and its elements should adhere to Feature Sliced Design
• The page should reside at /now-playing outdated
• A link to this page should be available on the home page outdated
• The widget should look identical to the proposed design

Get back to the commented out line in features/playback-controls/ui/scrubbing-bar.svelte

Blocked by #1

Create a sli.dev boilerplate in the presentation project.

Acceptance criteria:

• pnpm dev in the presentation project starts sli.dev in dev mode

Acceptance criteria:

• The hostname of the app should be cast-iu.pages.dev (cast is already taken)
• A URL to the app should be added to the top of the README
• Every PR should generate a preview deployment on a subdomain of the original hostname
• Every commit to main that passes static checks and test suites should update the main deployment

A podcast should be a streamable audio file. In the future, we will add support for transcripts of podcasts, so watch out for that.

We can take a sample audio file from MixKit.

Acceptance criteria:

• An app is created on Supabase
• A link is created to fetch a sample audio file

Artifacts:

• A link to the audio file

Currently, our pre-commit hook checks for ESLint issues and formatting problems. However, TypeScript errors go through freely. Remedy that by adding a pnpm exec svelte-check [...] to the .husky/pre-commit file.

P.S. Also an embarrassing detail: our pre-commit hook doesn't even run currently because it's not marked as executable. Please, mark it as executable while you're at it.

Blocked by #2

Acceptance criteria:

• pnpm lint in the workspace root checks all supported files with Prettier and then runs lint in app.
• pnpm fix in the workspace root tries to fix all formatting issues and then runs fix in app.

Blocked by #6

Acceptance criteria:

• subsequent PRs should not be mergeable until one approving review is given and the CI checking workflow passes

Blocked by #3

Presentation 1 presents the team, describes the project that we will be building, its features, the tech stack, our ambitions regarding Quality, Reliability and Security. Should also mention what we've done over these two weeks.

Acceptance criteria:

• pnpm dev in the presentation project opens the presentation
• Slides have presenter notes to highlight key points of what to talk about during this slide

This is for podcasts, not episodes. Also throw in a string field for storing the author.

Acceptance criteria:

• Each podcast has a field for the URL to a cover art
• Each podcast has a field for the author

Neither the integration tests are passing nor the application works in general.

Which is a fancy way of saying "create pnpm-workspace.yaml". Create empty projects for the podcast app and the presentation.

Acceptance criteria:

• pnpm detects that there are two projects in the workspace
• The projects are named app and presentation
• Each project contains a package.json

Acceptance criteria:

• it allows to sign in with GitHub

Artifacts:

• a Figma link with the design

Currently, the CI status badge in the README reflects the last run on a pull request, which is not what we want.

To avoid duplication of configuration that runs tests, refer to the Action Composition guide.

Blocked by #39.

Implement the layout proposed in #29.

Acceptance criteria:

• The page and its elements should adhere to Feature Sliced Design
• The page should reside at /podcasts/:podcast-id
• A link to this page should be available on the home page for every podcast fetched from Supabase outdated
• The page should look identical to the proposed design

Blocked by #12

This is to ensure that no code that violates static checkers can be committed.

Acceptance criteria:

• Formatting issues and ESLint problems in staged files should prevent Git from making commits
• Git hooks should be installed automatically upon running pnpm i (out of the box in Husky)

#54 (comment):

I think the GitHub usernames for the reviewer lottery are case-sensitive. Max was assigned two reviewers, I suppose it is because he's not recognized as vanishmax and instead recognized as VanishMax

Jest has a --ci option that prevents creation of snapshots — those should only be created manually. Add this parameter to the code that runs our unit tests in CI. Don't forget that pnpm run requires an extra -- to denote that the following arguments will be passed to the command that's running.

Acceptance criteria:

• features play/pause, jumps backward and forward, a scrubbing bar
• displays the podcast cover art
• displays the podcast name and authors
• has a way to view transcripts
• has a button to "like" the episode

Artifacts:

• a Figma link with the design

The leftovers from #59. Blocked by #58.

All of these should be implementable without much code by simply bind:ing to the corresponding attributes on the <audio> tag, so blocked by #69.

Acceptance criteria:

• entities/audio exposes a writable store for currentTime that defaults to 0
• entities/audio exposes a readable store for duration that defaults to NaN
• entities/audio exposes a writable store for playbackRate that defaults to 1
• entities/audio exposes a writable store for paused that defaults to true
• There should no longer be a store that allows direct access to the <audio> DOM node
• These stores should be wired up to the controls in features/playback-controls

That probably means we no longer require a monorepo, so we should merge the package.json of app and the root.

Acceptance criteria:

• the presentation source code is no longer in the repo
• the monorepo is demolished
• no pnpm-workspace.yaml is present in the repo
• the workflow of deploying the presentation is disabled

Partially blocked by #58.

Acceptance criteria:

• The Podcast Gallery screen is wired up to the data from the backend
  • All podcasts are listed at the bottom
  • The Trending Now section should be removed for now
  • The Recently Listened section will be populated by data from #58
• The Podcast Episodes screen shows episodes of each podcast

Acceptance criteria:

• has a link to the live demo
• has a feature-sliced badge
• has a listing of main features
• has screenshots (Figma exports will work for now)
• has local running instructions
• has a section on QA (tools and techniques used)
• has a mention of the license
• has an introduction to the dev team

Blocked by #1

Create a SvelteKit boilerplate in the app project with TypeScript. No Prettier, but with ESLint and svelte-check.

Acceptance criteria:

• pnpm dev in the app project starts a SvelteKit application
• pnpm lint in the app project runs ESLint on Svelte and TS and then svelte-check on Svelte
• pnpm fix in the app project runs ESLint on Svelte and TS in fixing mode

Implement the layout proposed by #28

Acceptance criteria:

• The page and its elements should adhere to Feature Sliced Design
• The page should reside at /
• The page should look identical to the proposed design

Without it, we cannot detect playing audio with Cypress.

Acceptance criteria:

• An actual <audio> node is present in the global __layout.svelte
• The audio store is bound to that instance
• The assertion in the integration tests that checks for playing audio is restored
• The integration tests pass

Just the elements that are covered in #26. A design link is available in #27.

Acceptance criteria:

• The playing controls look identical to the proposed design

Partially blocked by #42. Use svelte-persistent-writable.

Acceptance criteria:

• The likes are restored after a page reload within a single browser
• The like button works on the Now Playing page
• New likes are written to the localStorage
• Liked episodes are marked prominently on the Podcast Episodes page
• Your Library page displays the podcasts that have liked episodes

The scrubbing bar, the play/pause button and replay/forward. Stub the necessary APIs of entities/audio.

Acceptance criteria:

• it shows the podcast title and authors
• it shows how many episodes are available
• it lists the episodes along with their titles
• every episode has a visible duration
• liked episodes are marked prominently
• downloaded episodes are marked prominently
• each episode has a way to be downloaded
• there's a way to download all episodes

Artifacts:

• a Figma link with the design

Per the course requirements, we must have 60% statement coverage for our project. Let's set up Codecov to enforce this threshold.

Acceptance criteria:

• Codecov is configured to require 60% of threshold
• a badge of coverage is added to the README, linking to the detailed coverage information
• CI gathers and uploads coverage information

Blocked by #6

This should run on each commit to main that made changes to any of the files in the presentation project. It should run after the CI for the main branch successfully passes. The deployment should be made to /presentation.

Acceptance criteria:

• A URL to the presentation should be added to the README.
• A presentation should be accessible at that URL.

Blocked by #10

We should have an input field that you can enter a URL into (no validation) and that URL is fetched to return an audio file embedded with a native <audio> element with controls.

Acceptance criteria:

• The input is present on /
• The audio element on every route (that is, in the layout)
• The audio element is disabled when there's no music selected
• The interaction flow with the component is covered with e2e tests

Remember about Feature Sliced Design. I'm ready to discuss the architecture if you happen to have any doubts.

This should probably be a single component, a feature in terms of Feature Sliced Design.

Acceptance criteria:

• it allows pausing/resuming playback
• it allows jumping forward 30s
• it allows jumping backward 10s
• it allows scrubbing
• it is integrated with the <audio> element that is in the layout (i.e. it doesn't add its own <audio> element)
• it is covered with unit tests

P.S. don't spend too much time styling, just use plain HTML

Blocked by #2.

Use Cypress.

Acceptance criteria:

• pnpm test:e2e in the app project runs the E2E test suite

Acceptance criteria:

• all 5 features are reflected in it
• unit testing, e2e testing are planned in parallel with feature development
• stress testing is planned at the end
• final project presentation is planned