Music releases - Katarina

.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
+    "react/prop-types": "off",
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

README.md

@@ -6,32 +6,13 @@
 
 # Music Releases
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
+The assignment was to create a page showing new albums and single releases. Using React and data from Spotify.
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I started out creating all the different components and then linked them together one by one. My biggest problem was the svg files. It took too much time figuring out how to use them and I wish I had reached out for help earlier.
+If I had more time I would have individual CSS for every component because I got a bit lost in all the code, also should become better at adding comments to my code but I find it difficult for some reason.
 
 ### View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://katarina-music-releases.netlify.app

instructions.md

@@ -60,15 +60,16 @@ This is just a suggestion - how you decide to structure your components is compl
 - Artist name - 14px Helvetica #a0a0a0
 
   When hovering over album covers or artist names, you should implement the following hover styles:
-   <img src="https://github.com/Technigo/project-music-releases-vite/blob/main/src/design/music-releases.png" alt="Design">
+  <img src="https://github.com/Technigo/project-music-releases-vite/blob/main/src/design/music-releases.png" alt="Design">
 
 ## Requirements
+
 - Your app should have components
 - Your page should look as close as possible to the design provided.
 - You should display the following for each album:
-  -   album cover image
-  -   album name
-  -   the name of each artist involved with a comma between
+  - album cover image
+  - album name
+  - the name of each artist involved with a comma between
 - Hover effects:
   - When you hover over an album, it should go darker, and you should show a play button, a favourite button, and the ellipsis (see the design sketch)
   - When you hover over the play button, it should grow (see the design sketch)
@@ -81,15 +82,18 @@ This is just a suggestion - how you decide to structure your components is compl
   - 1 per row on mobile.
 
 ## Stretch goals
+
 So you’ve completed the requirements? Great job! Make sure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional.
 
 ### Intermediate stretch goals
+
 - Create CSS rules or Javascript logic so that if there are only two artists you show a "&" between them, and if there are more than two artists, you show "," between all artists except the last two which should have "&" (if the data don't have any multiple artists, you can modify it like you prefer to implement this feature):
-  - *Teyana Taylor & Kehlani*
-  - *Y2K, bbno$ & Enrique Iglesias*
+  - _Teyana Taylor & Kehlani_
+  - _Y2K, bbno$ & Enrique Iglesias_
 - Lower the opacity of the button icons and then when you hover over each of them, it should have full opacity
 
 ### Advanced stretch goals
+
 - We've provided another API response which includes a list of popular playlists. Use this, along with some new components to render a list of playlists in a sidebar.
 - Sort the albums from the singles and create two different sections on your site
 - Incorporate more information from the API response to make your site richer

pull_request_template.md

@@ -1,7 +1,3 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
 
-## Collaborators
-Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this:
-[github-username-1, github-username-2]
+https://katarina-music-releases.netlify.app

src/App.jsx

@@ -1,7 +1,20 @@
+import { Album } from "./components/Album";
+import { Header } from "./components/Header";
 import data from "./data.json";
 
 console.log(data);
 
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  const albumItems = data.albums.items
+
+  return (
+    <div>
+      <Header />
+      <div className="album-wrapper">
+        {albumItems.map((album) => (
+          <Album albumData={album} key={album.id}/>
+        ))}
+      </div>
+    </div>
+  )
 };

src/components/Album.jsx

@@ -0,0 +1,15 @@
+import { AlbumName } from "./AlbumName"
+import { ArtistName } from "./ArtistName"
+import { CoverImage } from "./CoverImage"
+
+export const Album = ({ albumData }) => {
+  return (
+    <section>
+        <CoverImage coverImage={albumData.images[0].url} />
+        <div>
+          <AlbumName albumName={albumData.name} albumUrl={albumData.external_urls.spotify} />
+          <ArtistName artistName={albumData.artists} />
+        </div>
+    </section>
+  )
+}

src/components/AlbumName.jsx

@@ -0,0 +1,9 @@
+export const AlbumName = ({ albumName, albumUrl }) => {
+  return (
+    <div>
+      <a href={albumUrl} target="_blank" rel="noopener noreferrer" className="album-link">
+        <h2>{albumName}</h2>
+      </a>
+    </div>
+  );
+};

src/components/ArtistName.jsx

@@ -0,0 +1,13 @@
+export const ArtistName = ({ artistName }) => {
+  return (
+    <div className="artist-wrapper">
+      {artistName.map((artist, index) => (
+        <span key={artist.id}>
+          <a href={artist.external_urls.spotify} target="_blank" rel="noopener noreferrer" className="artist-link">
+            <h3>{(index ? ", " : "") + artist.name}</h3>
+          </a>
+        </span>
+      ))}
+    </div>
+  )
+}

src/components/CoverImage.jsx

@@ -0,0 +1,53 @@
+export const CoverImage = ({ coverImage }) => {
+  return (
+    <div className="cover-image">
+      <img src={coverImage} alt="Cover Image" />
+      <div className="btn-wrapper">
+        <button className="icon heart">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933333 16.933334">
+            <path 
+            d="M5.5429688 1.72632c-1.3973405.12793-2.3147222.54076-3.1308594 1.33199h-.00195C.73840872 4.76006.73795173 7.46473 2.3457064 9.20089c.01979.0505.049702.0963.087891.13476h.00195l5.7402343 5.75391c.1543639.15504.4050805.15594.5605469.002l5.7402334-5.73047c.0044-.004.0093-.008.01367-.0117.002-.002.004-.004.0059-.006.0097-.009.01963-.0183.0293-.0274.004-.004.0079-.008.01172-.0117 1.709157-1.75617 1.677419-4.57518-.07031-6.29297-1.655648-1.62642-4.246883-1.64589-5.9863287-.16796-.847356-.72896-1.8847572-1.12889-2.9375-1.11719zm.00977.78906c.9348454-.0104 1.8727796.33751 2.5976562 1.04297.00819.009.017285.0165.025391.0254.00445.005.009.009.013672.0137.028195.0281.060457.0518.095703.0703.023693.0122.048558.022.074219.0293.019156.006.038744.0106.058594.0137.00649.00083.013005.001.019531.002a.39759413.39759413 0 00.039062 0c.013046-.00002.026082-.00069.039062-.002.013112-.001.026149-.003.039062-.006.00656-.002.013073-.004.019531-.006.00656-.002.013073-.004.019531-.006.00591-.002.011766-.004.017578-.006.00658-.002.013093-.005.019531-.008.00592-.003.011784-.005.017578-.008.00594-.003.011805-.007.017578-.01l.00586-.004c.00394-.002.00785-.004.011719-.006.00131-.001.00262-.003.00391-.004.0006523-.00066.0013-.001.00195-.002.02241-.0141.043348-.0305.0625-.0488 1.426867-1.42362 3.72228-1.43203 5.160156-.0195 1.442106 1.4174 1.467535 3.72006.05859 5.16992-.000655.00068-.0013.001-.002.002-.0091.009-.01811.017-.02734.0254-.004.004-.0079.009-.01172.0137-.0081.007-.01596.0153-.02344.0234l-5.4492189 5.4375-5.4375-5.44922c-.00744-.009-.01526-.0173-.023437-.0254-1.4222667-1.42556-1.4319808-3.71814-.023438-5.15625.00132-.001.00259-.003.00391-.004h.00195c.709023-.72139 1.6393733-1.08922 2.5742188-1.09961z" 
+            color="#000" 
+            fontWeight="400" 
+            fontFamily="sans-serif" 
+            overflow="visible" 
+            paintOrder="fill markers stroke"
+            />
+          </svg>
+        </button>
+
+        <button className="icon play">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <path
+            d="M50 6.00001c-24.2767 0-44.0000001 19.7233-44.0000001 44.00001 0 24.2767 19.7233001 44 44.0000001 44s44-19.7233 44-44C94 25.72331 74.2767 6.00001 50 6.00001zm0 4c22.1149 0 40 17.8851 40 40.00001 0 22.1149-17.8851 40-40 40s-40.0000001-17.8851-40.0000001-40C9.9999999 27.88511 27.8851 10.00001 50 10.00001zm-15 21v38.00001l34-19-34-19.00001z" 
+            overflow="visible" 
+            color="#000"
+            />
+          </svg>
+        </button>
+
+        <button className="icon dots">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g>
+            <circle 
+            cx="2.5" 
+            cy="12.5" 
+            r="2.5"
+            />
+            <circle 
+            cx="12" 
+            cy="12.5" 
+            r="2.5"
+            />
+            <circle 
+            cx="21.5" 
+            cy="12.5" 
+            r="2.5"
+            />
+            </g>
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/Header.jsx

@@ -0,0 +1,5 @@
+export const Header = () => {
+  return (
+    <h1 className="header">New albums and single releases</h1>
+  )
+}

src/index.css

@@ -1,13 +1,113 @@
-:root {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  background-color: black;
+  margin: 20px;
+}
+
+.header {
+  display: flex; 
+  flex-direction: column;
+  align-items: center;
+  color: white; 
+  font-size: 30px; 
+}
+
+.album-wrapper {
+  display: grid;
+  grid-template-columns: 1fr; 
+  gap: 20px; 
+}
+
+.artist-wrapper {
+  display: flex;
+}
+
+h2 {
+  color: #ffffff;
+  font-size: 14px;
+}
+
+h3 {
+  color: #a0a0a0;
+  font-size: 14px;
+}
+
+.album-link {
+  text-decoration: none; 
+}
+
+.album-link:hover {
+  text-decoration: underline; 
+  text-decoration-color: #ffffff;
+}
+
+.artist-link {
+  text-decoration: none; 
+}
+
+.artist-link:hover {
+  text-decoration: underline; 
+  text-decoration-color: #a0a0a0; 
+}
+
+.cover-image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cover-image img {
+  width: 100%;
+}
+
+button {
+  border: none;
+}
+
+.icon {
+  width: 50px;
+  background-color: transparent;
+  opacity: 1;
+  margin-right: 20px;
+}
+
+.play {
+  width: 70px;
+}
+
+.play:hover {
+  scale: 1.4;
+}
+
+svg {
+  fill:white;
+}
+
+.btn-wrapper {
+  position: absolute;
+  display: none;
+  opacity: 1;
+}
+
+.cover-image:hover > img {
+  opacity: 0.5;
+  transition: 0.3s;
+}
+
+.cover-image:hover .btn-wrapper {
+  display: block;
+  transition: 0.3s;
+}
+
+@media (min-width: 667px) {
+  .album-wrapper {
+    grid-template-columns: repeat(2, 1fr); 
+  }
+}
+
+@media (min-width: 1025px) {
+  .album-wrapper {
+    grid-template-columns: repeat(4, 1fr); 
+  }
 }