1-fredrikstad/sangbok

Webapp for speidere som ønsker å finne fram til speidersangene rundt leirbålet

Illustrasjon av Freepik Storyset

Sangbok

En webapp for fremvisning av speidersanger. Appen lar deg spille av sanger, både fra Spotify og egenopplastede. Videre er innholdet tilgjengelig offline, og den tilhørende darkmoden gjør teksten godt leselig i nattens mulm og mørke.

Wiki

Brukermanualer, utdypende informasjon mm. finnes på prosjektets wiki.

Prosjektstruktur

Applikasjonen er bygget med Sanity.io og Next.js. Sanity håndterer opprettelse, lagring og uthenting av sanger, Next.js viser frem innholdet.

Mappen frontend/ inneholder all kode relevant for applikasjonens utseende og funksjonalitet. Mappen cms/ inneholder all kode relevant for dataen som vises frem og dens struktur. Både frontend/ og cms/ er to frittstående prosjekter, - de kan med andre ord kjøres uavhengig av hverandre. Det er dog verdt å nevne at frontend-appen belager seg på data fra cms, så dersom cms ikke kjører i bakgrunnen vil dataen mangle.

Utvikling og oppsett

For å kunne kjøre en utviklingsinstans av webapplikasjonen så trenger man: Node.js og yarn.

Vi anbefaler VSCode for utviklingsprosessen. Den er lett å bruke, gratis og fungere flott out of the box.

For å kjøre prosjektet, følg README.md som ligger i frontend/ og cms/-mappene. Disse filene inneholder informasjon om oppsett, tilgjengelige funksjoner og scripts.

Under utvikling anbefales det å åpne frontend/ og cms/ i egne VSCode-instanser for et best mulig utviklermiljø.

sangbok's Issues

Forslag til npm pakker

For å ha applikasjonen på flere språk:

• i18next: https://react.i18next.com/

Enter content of a verse in Sanity Studio

Describe the solution you'd like
A way for the administrator to enter the content of a verse in Sanity Studio, where the verse-lines have separate input fields. The data structure of a song should remain as is.

Additional context

Swipe navigation only works on lyrics

Describe the bug
Swiping to navigate between songs only reacts if you swipe on the song lyrics.

To Reproduce
Steps to reproduce the behavior:

1. Go to any song
2. Swipe left or right beneath the lyrics
3. See that you do not go to the next/previous song

Expected behavior
Swiping should be enabled on the whole page, not only the lyrics

Deployering til Netlify

Describe the solution you'd like
Deployering til Netlify

Additional context
Add any other context or screenshots about the feature request here.

3 - Fluent navigation

When singing several songs, I want the navigation to be fluent and quick. So that I can easily follow along.

9 - Categorize songs

When organizing songs, I want the ability to categorize the songs from either predefined categories or create a new one. So that I can quickly find songs within a given category.

Bildeopplasning tilknyttet en sang

Describe the solution you'd like
Mulighet for å laste opp et bilde eller GIF tilknyttet en sang, og vise mediumet på sang siden

Additional context

Nummerering av sanger i Sanity

Describe the solution you'd like
En bedre løsning for tildeling av nummer på en sang

Additional context
Add any other context or screenshots about the feature request here.

Vis teksten til en sang

Describe the solution you'd like
Mulighet for å få presentert teksten til en sang på en pen og leselig måte

Additional context

Extract database calls from domain to API

Describe the solution you'd like
We should decouple out render code from our backend logic.
I propose we do this with API-classes exposing methods returning domain objects. As opposed to our current way of exposing actual database queries.
This will make our render code independent of our backend, thereby maintaining a good separation of concerns.

FEEDBACK - Potential improvements from supervisor

Placeholder

Statistikk

Describe the solution you'd like
Visning av diverse statistikk i applikasjonen, som for eksempel hvilke sanger som er mest populære

Additional context

Legg til react-i18next for adminstrering og endring av språk i applikasjonen

Describe the solution you'd like
Legg react-i18next så brukeren enkelt kan bytte mellom språk på appen

Additional context
https://react.i18next.com/

6 - Metadata

When reading lyrics, I want to be able to find the author and other metadata of the song, so I can learn more about it.

Autogenerer slug

Describe the solution you'd like
Autogenerer slug slik at admin slipper å tenke på dette

Additional context
Add any other context or screenshots about the feature request here.

Søking med søkefelt

Describe the solution you'd like
Filtrering med søkefelt

Additional context
Add any other context or screenshots about the feature request here.

7 - Offline mode

When offline, the scouts should still be able to access the contents of the application, so that they can access the songs regardless of network access.

Fikse ugyldig url fallback

Eks:
https://sangbok.netlify.app/song/vg.no

Søk på en kategori og naviger mellom sangene

Describe the solution you'd like
Mulighet for å søke på en kategori og navigere mellom sangene - som en sangremse

Additional context

5 - Song melody

When reading lyrics, I want to be able to find the melody of the song, so that I can song along.

Feedback etter swipe

Describe the solution you'd like
Implementer feedback etter sveiping mellom sanger, for eksempel i form av en mikroanimasjon

Additional context

E2E-testing med Cypress

Describe the solution you'd like
E2E-testing med Cypress

Additional context
Add any other context or screenshots about the feature request here.

Testene er hentet fra brukertestene for Fredrikstad speidergruppe

Tester:

• Finn sangteksten til “Østfoldsangen"
• Finn sangteksten til “...” (fra “Østfoldsangen”)
• Søk etter sangen “...”
• Test svipingen mellom sanger
• Aktiver dark mode

Annet:

• Legg til cypress i CI

Ferdigstille Appopplevelse

• Instruksjoner om å legge til på hjemskjerm ( Skal kun vises om den ikke er lastet ned )
• Designe fullverdig app-opplevelse ( Sette app til Standalone ( fjerne url, browser-knapper ) )

Nyttige linker

• Oppdage om appen er lastet ned eller ikke.

Refaktorering og dokumentasjon

Github

• Security alerts
• Ferdigstille README.md ( gikk jo vekk i fra Workspaces )
• Ferdigstille CONTRIBUTING.md

Kodekrav

• Dokumentere der nødvendig
• Refaktorere kode
  • Streng Typescript
  • Fjern ubrukte imports
  • Dårlig kode skrives om
• Fjerne ubrukte filer / config

Wiki

• Hvordan installere appen
• Hvordan bruke appen
• Nyttige lenker (sanity)

Sviping funker ikke alltid

Describe the bug
Sviping funker ikke alltid

To Reproduce
Steps to reproduce the behavior:

1. Go to /search
2. Click on a song
3. Try to swipe
4. See error

Expected behavior
Svipingen funker

Screenshots

Additional context
Add any other context about the problem here.

Oppsett av default styling

Formatere forsiden slik som den er i Figma

Oppdater slug-funksjon

Hvordan det burde være:

Slugs may be entirely lowercase, with accented characters replaced by letters from the Latin script and whitespace characters replaced by a hyphen or an underscore to avoid being encoded.

https://www.wikiwand.com/en/Clean_URL#/Slug

Eks på dårlig:
https://sangbok.netlify.app/song/%C3%A5-mor,-%C3%A5-mor
Blir iblant til /ceas-mor,-ceas-mor

Dedikert landingsside

Describe the solution you'd like
En dedikert landingsside med blant annet logo til gruppen

Additional context

Hent sanger fra Sanity backend og vis i frontend

Describe the solution you'd like
Connect to Sanity using GraphQL and display songs

Additional context

README.md installation guide does not work

Describe the bug
Cloning the repo as explained in the README.md and attempting to run the app does not work.

To Reproduce
Steps to reproduce the behavior:

1. Use Git Bash or whatever and run git clone https://github.com/1-fredrikstad/sangbok.git
2. Navigate into the repo, and run npm install
3. Try to run the app with npm run dev
4. The app does not run and throws an error.

Expected behavior
The app should work.

How to fix
The correct way to describe the running of the app would be:

1. git clone https://github.com/1-fredrikstad/sangbok.git
2. cd sangbok
3. cd frontend
4. npm i
5. npm run dev

Come on guys, let's get this project to the moon! 🚀

Legg til Prettier

Describe the solution you'd like
Legg til Prettier slik at koden formateres på en konsekvent måte

Additional context

10 - Open in Spotify

When attending scout events, I want to open a song on Spotify if it's available, so that I can play the song.

Style settings

Describe the solution you'd like
The setttings-page should not look terrible. Instead, it should look nice

8 - Add songs

When I, as scout leader, prepare for a scout event, I want to easily add a new song to the songbook, so that all the scouts have access to it.

Test Projects Flow

TODO - Gjøremål fra møter

Legg inn gjøremål fra møter som en kommentar her i form av en tasklist. Kryss av når de er fullført

Mal:

Møtedato: xx.xx.xxxx

• @navn Beskrivelse av oppgave
• @navn Beskrivelse av oppgave
• @navn Beskrivelse av oppgave

Tilbakemeldinger fra akseptansetesten og brukertesten

Akseptansetesten

Job story 1: When attending scout happenings, I would like access to lyrics, so that I can sing.

• Bra. Lurte på om vi har mulighet for å endre fontstørrelse, men det har vi ikke implementert. (lagt til i backlog)

Job story 3: When singing several songs, I want the navigation to be fluent and quick. So that I can easily follow along.

• Savner tilbakemelding om hva som skjer når man sveiper. “Endringsblindhet”. Tilbakemelding i form av en mikroanimasjon (tegn på siden e.l.) @kharann (lagt til i backlog)

Job story 8: When I, as scout leader, prepare for a scout event, I want to easily add a new song to the songbook, so that all the scouts have access to it.

• Eksempel på Spotify URI i Sanity

Job story 11: When new songs are created, I want the ability to upload the audio without having to publish it to Spotify. So that I can easily download the audio to my cellphone when needing it.

• Eget symbol for egenopplastet lydklipp

Legg til appikon og logo i appen

We need to found a nice logo to use :)

2 - Darkmode

When using the app in dark surroundings, the content should still be easy to read, so that the scouts can participate regardless of light-condition.

Sanity schema structure

Describe the solution you'd like
A schema structure in Sanity for song and category

Additional context

Implementer liste over sanger med react-table

Describe the solution you'd like
Bruk react-table for å vise liste over sanger. Kan benytte innebygde global filter i pakken for filtrering av resultater

Additional context
Add any other context or screenshots about the feature request here.

1 - Access lyrics

When attending scout happenings, I would like access to lyrics, so that I can sing.

Continuous Integration (CI)

Describe the solution you'd like
Continuous Integration (CI) som kjører tester og sjekker formattering av filer

Additional context

Dokumenter yarn-endringene.

4 - Song format

When adding a song, I want the song to be formatted the same way as in the book, so that I can distinguish between different parts of the song.

11 - Upload audio

When new songs are created, I want the ability to upload the audio without having to publish it to Spotify. So that I can easily download the audio to my cellphone when needing it.

Enhetstesting med Enzyme eller et annet rammeverk

Describe the solution you'd like
Enhetstesting med Enzyme eller et annet rammeverk

Additional context

Navigation

Describe the solution you'd like
I think it would behoove us to add some more feedback and "tutorialized design" to navigation in the app.
At this time, users can swipe between songs, but this is never communicated to end users.
Perhaps we could include some animations and navigation buttons to help onboard new users.

Navigation bar

Describe the solution you'd like
A navigation bar to navigate between different views

Additional context

Replace Lerna with Yarn Workspaces

Describe the solution you'd like
Lerna provides nothing valuable that yarn workspaces no longer does.

Additional context

• To run in parallell, use concurrently.