Maryyy-Ux_Project_music_releases

README.md

@@ -5,30 +5,24 @@
 </h1>
 
 # 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.
+9th week's project. First time on React/Vite. Spotify's API. 
 
 ## 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?
+It was really challenging: new tools, new components, I had a lot of technical issues on npm and the server... but I get it! 
+React is challenging but its also the base to build amazing sites! 
+I find JSX a little difficult to cope but, with a little more time, I will get use to it, for sure!
 
 ### 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.
+Netlify: https://670bf7d3da100ba49a05ea71--cute-profiterole-7ddc46.netlify.app/
+Host: http://localhost:5175/
 
 ## Instructions
 

src/Album.css

@@ -0,0 +1,80 @@
+//*Album.css*//
+.album-container {
+    position: relative;
+    background-color: #000;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: background-color 0.3s;
+}
+
+.album-cover {
+    position: relative;
+}
+
+.album-cover img {
+    width: 100%;
+    display: block;
+    border-radius: 8px;
+}
+
+.album-hover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.album-container:hover .album-hover {
+    opacity: 1;
+}
+
+.play-button,
+.heart-button,
+.ellipsis-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: white;
+}
+
+.play-button img:hover {
+    transform: scale(1.2);
+}
+
+.album-info {
+    padding: 10px;
+    text-align: center;
+}
+
+.album-title {
+    font-family: Helvetica, sans-serif;
+    font-size: 14px;
+    color: white;
+    text-decoration: none;
+}
+
+.album-title:hover {
+    text-decoration: underline;
+}
+
+.artist-names {
+    font-family: Helvetica, sans-serif;
+    font-size: 14px;
+    color: #a0a0a0;
+}
+
+.artist-name {
+    color: #a0a0a0;
+    text-decoration: none;
+}
+
+.artist-name:hover {
+    color: #fff;
+}

src/Album.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ArtistName from './ArtistName.jsx';
+import './Album.css';
+
+const Album = ({ album }) => {
+    return (
+        <div className="album-container">
+            <div className="album-cover">
+                <img src={album.images[0].url} alt={album.name} />
+                <div className="album-hover">
+                    <button className="play-button">
+                        <img src="/assets/icons/play-icon.svg" alt="Play" />
+                    </button>
+                    <button className="heart-button">
+                        <img src="/assets/icons/heart-icon.svg" alt="Favorite" />
+                    </button>
+                    <button className="ellipsis-button">
+                        <img src="/assets/icons/ellipsis-icon.svg" alt="More" />
+                    </button>
+                </div>
+            </div>
+            <div className="album-info">
+                <a href={album.external_urls.spotify} className="album-title" target="_blank" rel="noopener noreferrer">
+                    {album.name}
+                </a>
+                <div className="artist-names">
+                    {album.artists.map((artist, index) => (
+                        <ArtistName key={artist.id} artist={artist} isLast={index === album.artists.length - 1} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Album;

src/App.css

@@ -0,0 +1,27 @@
+//*App.css*//
+
+.app-container {
+    padding: 20px;
+}
+
+.app-container h1 {
+    text-align: center;
+}
+
+.album-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+}
+
+@media (max-width: 768px) {
+    .album-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
+    .album-grid {
+        grid-template-columns: 1fr;
+    }
+}

src/App.jsx

@@ -1,7 +1,29 @@
-import data from "./data.json";
+import React from 'react';  // Importa React primero
+import data from './data.json';  // Importa data.json solo una vez
+import Album from './Album.jsx';  // Importa el componente Album
+import './App.css';  // Importa el archivo de estilos CSS
 
-console.log(data);
-
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+// Componente App
+const App = () => {
+  return (
+    <div className="app-container">
+      <h1>Maria's Music Releases</h1>
+      <div className="album-grid">
+        {/* Mapea los álbumes del JSON y pasa los datos al componente Album */}
+        {data.albums.items.map((album) => (
+          <Album key={album.id} album={album} />
+        ))}
+      </div>
+    </div>
+  );
 };
+
+export default App;  // Exporta el componente App por defecto
+
+
+
+
+
+
+
+

src/ArtistName.css

@@ -0,0 +1,20 @@
+//*ArtistName.css*//
+.artist-name {
+    color: #a0a0a0;
+    text-decoration: none;
+}
+
+.artist-name:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+//*Icon hover capacity*//
+button img {
+    opacity: 0.7;
+    transition: opacity 0.3s;
+}
+
+button img:hover {
+    opacity: 1;
+}

src/ArtistName.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './ArtistName.css';
+
+const ArtistName = ({ artist, isLast }) => {
+    return (
+        <>
+            <a href={artist.external_urls.spotify} className="artist-name" target="_blank" rel="noopener noreferrer">
+                {artist.name}
+            </a>
+            {!isLast && ', '}
+        </>
+    );
+};
+
+export default ArtistName;
+

src/index.css

@@ -5,9 +5,11 @@
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+  Color: white;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+}

src/main.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
+import App from "./App.jsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(