ref: create an example for env, fix lastfm

Reviewed-on: GivFNZ/my-website#2

.env.example

@@ -0,0 +1,2 @@
+VITE_GIV_EMAIL = 'youremail@email.com'
+VITE_LAST_USERNAME = 'your_last_username'

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "givs-website-react",
-  "version": "1.2.4",
+  "version": "1.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "givs-website-react",
-      "version": "1.2.4",
+      "version": "1.3.3",
       "dependencies": {
         "@fontsource-variable/red-hat-display": "^5.1.1",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -15,7 +15,6 @@
         "@tanstack/react-query": "^5.69.0",
         "@types/node": "^22.13.0",
         "axios": "^1.8.4",
-        "dotenv": "^16.4.7",
         "fs": "^0.0.1-security",
         "i18next": "^24.2.2",
         "i18next-browser-languagedetector": "^8.0.4",
@@ -209,25 +208,25 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.26.7",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
-      "integrity": "sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==",
+      "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.25.9",
+        "@babel/template": "^7.27.0",
-        "@babel/types": "^7.26.7"
+        "@babel/types": "^7.27.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.7",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
-      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.26.7"
+        "@babel/types": "^7.27.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -267,9 +266,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.26.9",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -278,14 +277,14 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.9",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
-      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.25.9",
+        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.25.9",
+        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.27.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -319,9 +318,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.7",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
-      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -1312,11 +1311,6 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
-    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1864,17 +1858,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.4.7",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
-      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2990,9 +2973,9 @@
       }
     },
     "node_modules/pnpm": {
-      "version": "9.15.5",
+      "version": "9.15.9",
-      "resolved": "https://registry.npmjs.org/pnpm/-/pnpm-9.15.5.tgz",
+      "resolved": "https://registry.npmjs.org/pnpm/-/pnpm-9.15.9.tgz",
-      "integrity": "sha512-hFGWAmqrHMPwmKBHS2TfurKv56G06R3YaJXY5Koyp6bQMEni0K13C75N4COnEi+2jBodbg0DPHB2CF+dXUgA1A==",
+      "integrity": "sha512-aARhQYk8ZvrQHAeSMRKOmvuJ74fiaR1p5NQO7iKJiClf1GghgbrlW1hBjDolO95lpQXsfF+UA+zlzDzTfc8lMQ==",
       "bin": {
         "pnpm": "bin/pnpm.cjs",
         "pnpx": "bin/pnpx.cjs"
@@ -3158,11 +3141,10 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.1.5",
+      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.2.tgz",
-      "integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
+      "integrity": "sha512-9Rw8r199klMnlGZ8VAsV/I8WrIF6IyJ90JQUdboupx1cdkgYqwnrYjH+I/nY/7cA1X5zia4mDJqH36npP7sxGQ==",
       "dependencies": {
-        "@types/cookie": "^0.6.0",
         "cookie": "^1.0.1",
         "set-cookie-parser": "^2.6.0",
         "turbo-stream": "2.4.0"
@@ -3181,11 +3163,11 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.1.5",
+      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.2.tgz",
-      "integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==",
+      "integrity": "sha512-yk1XW8Fj7gK7flpYBXF3yzd2NbX6P7Kxjvs2b5nu1M04rb5pg/Zc4fGdBNTeT4eDYL2bvzWNyKaIMJX/RKHTTg==",
       "dependencies": {
-        "react-router": "7.1.5"
+        "react-router": "7.5.2"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3559,9 +3541,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.14",
+      "version": "5.4.18",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.18.tgz",
-      "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
+      "integrity": "sha512-1oDcnEp3lVyHCuQ2YFelM4Alm2o91xNoMncRm1U7S+JdYfYOvbiGZ3/CxGttrOu2M/KcGz7cRC2DoNUA6urmMA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "givs-website-react",
   "private": true,
-  "version": "1.3.3",
+  "version": "1.3.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,6 @@
     "@tanstack/react-query": "^5.69.0",
     "@types/node": "^22.13.0",
     "axios": "^1.8.4",
-    "dotenv": "^16.4.7",
     "fs": "^0.0.1-security",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.4",

src/api/lastfm.ts

@@ -1,61 +1,10 @@
 import { api } from "../lib/axios";
 
-export interface TrackResponse {
-    track: {
-        album: {
-            mbid: string,
-            "#text": string
-        },
-        artist: {
-            mbid: string,
-            "#text": string
-        },
-        date: {
-            uts: string,
-            "#text": string
-        },
-        image: [{
-            "#text": string,
-            size: string
-        }],
-        mbid: string,
-        name: string,
-        streamable: string,
-        url: string
-    }
-}
-
-export interface getRecentTracksResponse {
-    recenttracks: {
-        track: [{
-            artist: {
-                mbid: string,
-                "#text": string
-            },
-            streamable: string,
-            image: [{
-                "#text": string,
-                size: string
-            }],
-            mbid: string,
-            name: string,
-            url: string,
-            date: {
-                uts: string,
-                "#text": string
-            }
-        }]
-    }
-}
-
 export async function getRecentTracks() {
     try {
-        const response = await api.get<TrackResponse>('');
+        const response = await api.get('/latest-song');
-        console.log('Last.fm data:', response.data);
-        
         return response.data;
     } catch (error) {
-        console.error('Err while fetching Last.fm data:', error);
+        return error;
-        throw error;
     }
 }

src/lib/axios.ts

@@ -1,7 +1,8 @@
 import axios from 'axios'
 
-const defaultApiUrl = 'https://lastfm-last-played.biancarosa.com.br/givfnz/latest-song';
+const username = import.meta.env.VITE_LAST_USERNAME;
+const defaultApiUrl = `https://lastfm-last-played.biancarosa.com.br/${username}`;
 
 export const api = axios.create({
-    baseURL: import.meta.env.VITE_LASTFM_API_URL || defaultApiUrl,
+    baseURL: defaultApiUrl,
 })

src/pages/music/index.tsx

@@ -1,4 +1,4 @@
-import { getRecentTracks, TrackResponse } from "../../api/lastfm";
+import { getRecentTracks } from "../../api/lastfm";
 import { MainContainer } from "../../components/MainContent/styles";
 import { useQuery } from '@tanstack/react-query'
 import { Paragraph } from "../../components/Paragraph/styles";
@@ -8,7 +8,7 @@ import { MusicDescription, MusicTitle } from "./styles";
 
 export default function Music() {
     const { t } = useTranslation()
-    const { data: lastResponse, isLoading, isError, error } = useQuery<TrackResponse>({
+    const { data: lastResponse, isLoading, isError, error } = useQuery({
         queryKey: ['song'],
         queryFn: getRecentTracks,
         retry: 1,