Latest music app - Jenny

README.md

@@ -1,37 +1,10 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/music-releases.svg" alt="Project Banner Image">
-  </a>
-</h1>
 
 # Music Releases
 
-Replace this readme with your own information about your project.
+A project to practice React and creating components that will use data from Spotify, which will then transfer to its children's components using props.
 
-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 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?
+The project was to build a page that shows new albums and single releases.
 
 ### 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://new-music-app-jenny.netlify.app/

package.json

@@ -21,6 +21,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/App.jsx

@@ -1,7 +1,35 @@
+// src/App.jsx
+
+// Importing React to create our component
+import React from 'react';
+
+// This imports all the Spotify data from the JSON file
 import data from "./data.json";
 
-console.log(data);
+// This imports the Album component
+import { Album } from './components/Album';
 
+//This is the main App compontent
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    // This is the main container for the whole app
+    <div className="app">
+      <div className="title-container">
+        <h1>New Releases</h1>
+      </div>
+       {/* This div contains all album cards */}
+      <div className="album-grid">
+         {/* Breakdown of this line:
+            1. data.albums.items is an array of albums
+            2. .map() goes through each album one by one
+            3. For each album, an Album component is created
+            4. Each Album component is given a unique 'key' + all the album data */}
+        {data.albums.items.map((album) => (
+          <Album key={album.id} album={album} />
+        ))}
+      </div>
+    </div>
+  );
 };
+
+

src/components/Album.jsx

@@ -0,0 +1,18 @@
+// src/components/Album.jsx
+
+import React, { useState } from 'react';
+import { AlbumCover } from './AlbumCover';
+import { AlbumName } from './AlbumName';
+import { ArtistName } from './ArtistName';
+
+export const Album = ({ album }) => {
+
+    return (
+        // This is the main container for our album card
+        <div className ="album-card">
+        <AlbumCover album={album}/>
+        <AlbumName album={album}/>
+        <ArtistName album={album}/>
+        </div>
+    );
+};

src/components/AlbumCover.jsx

@@ -0,0 +1,39 @@
+// src/components/AlbumCover.jsx
+
+import React, { useState } from 'react';
+// Importing our icon SVGs
+import heartIcon from '../assets/icons/heart.svg';
+import playIcon from '../assets/icons/play.svg';
+import dotsIcon from '../assets/icons/dots.svg';
+
+export const AlbumCover = ({ album }) => {
+
+     // This line creates a state to track whether the album is being hovered
+     const [isHovered, setIsHovered] = useState(false);
+
+
+    return (
+        <div className="album-cover"
+
+            // Added onMouseEnter and onMouseLeave to handle hover state
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            >
+            {/* This is a container for our album image and the overlay with icons */}
+            <div className="image-container">
+
+            {/* This shows the album cover image */}
+            <img src={album.images[0].url} alt={album.name} className="album-image" />
+
+            {/* If the album is being hovered, we show the overlay with icons */}
+            {isHovered && (
+                <div className="overlay">
+                    <img src={heartIcon} alt="Like" className="icon heart-icon" />
+                    <img src={playIcon} alt="Play" className="icon play-icon" />
+                    <img src={dotsIcon} alt="More" className="icon dots-icon" />
+                </div>
+                )}
+            </div>
+        </div>
+    )
+}

src/components/AlbumName.jsx

@@ -0,0 +1,15 @@
+// src/components/AlbumName.jsx
+
+export const AlbumName = ({ album }) => {
+    return (
+        <h3>
+            {/* Create a link to the album Spotify page */}
+            <a href={album.external_urls.spotify} 
+                target="_blank">
+
+                {/* This displays the album name */}
+                {album.name}
+            </a>
+        </h3>
+    );
+}

src/components/ArtistName.jsx

@@ -0,0 +1,29 @@
+// src/components/Artistame.jsx
+
+import React from 'react';
+
+export const ArtistName = ({ album }) => {
+    return (
+        <p>
+            {/* Map to iterate over each artist in the album's artists array */}
+            {album.artists.map((artist, index) => (
+                <React.Fragment key={artist.id}>
+
+                    {/* If this isn't the first artist, add a comma and space before the name */}
+                    {index > 0 && ", "}
+
+                    {/* Create a link to the artist's Spotify page */}
+                    <a href={artist.external_urls.spotify} 
+
+                        // target="_blank" opens the link in a new tab or window
+                        target="_blank">
+
+                        {/* This displays the artist name */}
+                        {artist.name}
+                    </a>
+                </React.Fragment>
+            ))}
+        </p>
+    );
+}
+

src/index.css

@@ -1,13 +1,169 @@
-:root {
+/* src/index.css */
+
+html {
   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;
+  font-family: Helvetica;
+  background-color: #010101;
+}
+
+.title-container {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.album-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  max-width: 1400px;
+  margin: 0 auto;
+  gap: 20px;
+  padding: 15px;
+}
+
+.album-card {
+  background-color: #000000;
+  padding: 13px;
+  border-radius: 8px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.image-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.album-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: all 0.3s ease;
+}
+
+/* Overlay styles for hover effect */
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.album-card:hover .overlay {
+  opacity: 1;
+}
+
+/* Icon styles */
+.icon {
+  width: 46px;
+  height: 46px;
+  margin: 0 25px;
+  cursor: pointer;
+  filter: brightness(0) invert(1);
+}
+
+.play-icon {
+  width: 80px;
+  height: 80px;
+  position: static;
+  transition: transform 0.2s ease;
+}
+
+.play-icon:hover {
+  transform: scale(1.12);
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+.heart-icon {
+  position: absolute;
+  left: 10px;
+  position: static;
 }
+
+.dots-icon {
+  position: absolute;
+  right: 10px;
+  position: static;
+}
+
+.icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 15px;
+}
+
+/* Hover effect for album image */
+.album-card:hover .album-image {
+  transform: scale(1.03);
+}
+
+/* Album title styles */
+.album-card h3 {
+  margin: 10px 0 5px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.album-card h3 a {
+  color: white;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.album-card h3 a:hover,
+.album-card h3 a:visited,
+.album-card h3 a:active {
+  color: white;
+  text-decoration: underline;
+}
+
+/* Artist name styles */
+.album-card p {
+  margin: 0;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.album-card p a {
+  color: #a0a0a0;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.album-card p a:hover,
+.album-card p a:visited,
+.album-card p a:active {
+  color: #a0a0a0;
+  text-decoration: underline;
+}
+
+h1 {
+  margin: 30px 5px 20px 30px;
+  font-size: 2rem;
+  color: #ffffff;
+}
+
+@media (min-width: 667px) and (max-width: 1023px) {
+  .album-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .album-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 1400px) {
+  h1 {
+    margin: 30px 5px 20px 11px;
+  }
+}

src/main.jsx

@@ -1,3 +1,5 @@
+// src/main.jsx
+
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App.jsx";

style.css

@@ -0,0 +1,14 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }