A music app, that uses Spotify API to give user overview at their favorite music: playlists, albums, songs. Provided with light and dark theme, you must login with your Spotify account to access full functionality. School project.
deployed at https://iplaymusic-pholm.netlify.app
Description of the task (provided by school - in Danish only)
Opgaven går ud på at opsætte et website der primært er mobiltvenligt, og er drevet af en simpel datastruktur. Opgaven er tiltænkt som en individuel opgave, men I må selvfølgelig gerne vende ideer og koncepter med hinanden.
Fokus er at omsætte designet til en funktionel React applikation, ud fra det ud har lært ind til videre. Designet skal følges så tæt som muligt, og fungere på kryds og tværs af flere mobil-skærmstørrelser. Det skal være muligt at skifte mellem lyst og mørkt tema men det er ikke et krav at adressebaren er skjult som i en native app.
Der er elementer på hjemmesiden (FEATURED) som går igen på flere af siderne, dem skal du trække ud i individuelle react komponenter og inkludere dem efter behov. Udfordringen ligger i at splitte designet op i fornuftige og logiske dele, samt at gennemskue hvilke elementer der gentages på flere sider. Det vil også være ok at oprette templates for enkeltstående elementer.
Styled Components & CSS Modules
Navnene herunder: featured, albums etc. kan du bruge til at finde det rigtige view i Adobe XD filen. Er du itvivl så spørg!
- Featured (index) - Præsenter featured albums. OBS: Dette view skal senere integrere lazyload
- Albums - Præsentere featured albums og new releases(albums)
- Album Details - liste traks for et valgt album
- Categories - liste alle kategorier
- Playlists - listes tracks fra en valgt playliste
- Player - "Afspil" et valgt track
Fra venstre: Albums, playlists, featured, farve tema, categories(find evt. et mere passende ikon).
Afspilleren og album details er dybe links fra henholdsvis albums og playlists/album.
Se styleguide: https://github.com/rts-cmk-wuhf02/iPlayMusic/blob/master/styleguide.png OBS: Ikonerne er fra ionic frameworket. De kan importeres igennem ```react-icons```` komponentet, eller hvordan du nu måtte foretrække.
Hvis du har ekstra tid i slutningen af ugen, kan du tilføje splash-skærmen og walk-through delen.
Der er afsat 1 arbejds uge til layout-delen, dvs aflevering på fredag kl 13.30 (den sidste commit til github inden fredag kl 13.30, bliver afleveringen).