Merge remote-tracking branch 'origin/experiments'

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",

src/About.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const apiUrl = process.env.REACT_APP_API_URL;
+console.log("API URL:", apiUrl);
+
+const About = () => {
+    // const navigate = useNavigate();
+
+    const handleAuthorize = () => {
+        // Redirect to backend authorization endpoint
+        window.location.href = `${apiUrl}/auth/login`;
+    };
+
+    return (
+        <div>
+            <h1>About Mood Melody</h1>
+            <h1>Welcome to Mood Melody!</h1>
+            <p>
+                <strong>Mood Melody</strong> is a unique music recommendation app designed to tailor Spotify playlists based on your current mood or desired musical atmosphere. Here's how you can enjoy a custom playlist experience:
+            </p>
+            <ol>
+                <li><strong>Authorize Your Spotify Account:</strong> Securely link your Spotify account to allow Mood Melody to generate playlists and access songs that fit your mood descriptions.</li>
+                <li><strong>Describe Your Mood:</strong> Navigate to the recommendation page and describe what you're feeling or the type of music you're looking for. Whether it's "relaxing jazz evening" or "high-energy rock", just type it in.</li>
+                <li><strong>Get Recommendations:</strong> Click the "Get Recommendations" button to let Mood Melody use advanced AI to suggest songs that align with your input.</li>
+                <li><strong>Enjoy Your Playlist:</strong> View your custom playlist on the next page. You can listen to the songs directly within the app or open your playlist in Spotify to enjoy it there.</li>
+                <li><strong>Continuous Discovery:</strong> Ready for more? Just enter another mood or song description for new recommendations without needing to reauthorize or leave the playlist page.</li>
+            </ol>
+            <p>
+                Mood Melody is the perfect companion for those looking to explore new music or for anyone who wants their music to match their mood without the hassle of searching. Let Mood Melody create the perfect soundtrack for any part of your day!
+            </p>
+            <button onClick={handleAuthorize}>Authorize with Spotify</button>
+        </div>
+    );
+};
+
+export default About;

src/App.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./Home";
 import Playlist from "./Playlist";
+import About from "./About";
 import Header from "./Header";
 import "./App.css";
 
@@ -11,7 +12,8 @@ function App() {
       <div className="App">
         <Header />
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route path="/" element={<About />} />
+          <Route path="/home" element={<Home />} />
           <Route path="/playlist" element={<Playlist />} />
         </Routes>
       </div>
@@ -20,123 +22,3 @@ function App() {
 }
 
 export default App;
-
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-// import Header from "./Header";
-// // import Home from "./Home";
-// import TextInput from "./TextInput";
-// import Button from "./Button";
-// import Rectangle1 from "./Rectangle1";
-// import "./App.css";
-
-// function App() {
-//   const [description, setDescription] = useState("");
-//   const [recommendations, setRecommendations] = useState([]);
-//   const [spotifyLink, setSpotifyLink] = useState(null);
-//   const [error, setError] = useState(null);
-//   const [authorized, setAuthorized] = useState(true);
-//   const [sessionId, setSessionId] = useState(null);
-//   const [loading, setLoading] = useState(false);
-
-//   useEffect(() => {
-//     const urlParams = new URLSearchParams(window.location.search);
-//     const sessionIdParam = urlParams.get("session_id");
-//     if (sessionIdParam) {
-//       setSessionId(sessionIdParam);
-//     }
-//   }, []);
-
-//   const handleInputChange = (e) => {
-//     setDescription(e.target.value);
-//   };
-
-//   const handleGetRecommendations = async () => {
-//     setLoading(true);
-//     try {
-//       const response = await axios.post(
-//         `http://127.0.0.1:5000/recommend`,
-//         { description },
-//         { params: { session_id: sessionId } }
-//       );
-//       if (response && response.data) {
-//         if (response.data.authorized) {
-//           setRecommendations(response.data.recommendation);
-//           setSpotifyLink(response.data.spotify_link);
-//           setError(null);
-//           setAuthorized(true);
-//         } else {
-//           setAuthorized(false);
-//         }
-//       } else {
-//         console.error("Unexpected response structure:", response);
-//       }
-//     } catch (error) {
-//       console.error("Error fetching recommendation:", error);
-//       setError("Error fetching recommendation. Please try again.");
-//       if (error.response && error.response.status === 401) {
-//         setAuthorized(false);
-//       }
-//     } finally {
-//       setLoading(false); // End loading
-//     }
-//   };
-
-//   return (
-//     <div className="App">
-//       <Header />
-//       <Rectangle1
-//         title="Mood Melody"
-//         description="Discover music that fits your mood. + add description"
-//       />
-
-//       <TextInput
-//         value={description}
-//         onChange={handleInputChange}
-//         placeholder="Enter the desired song qualities or mood..."
-//       />
-//       <br />
-//       <Button
-//         type="button"
-//         label={loading ? "Loading..." : "Get Recommendations"}
-//         onClick={handleGetRecommendations}
-//         disabled={loading}
-//       />
-//       {error && <p style={{ color: "red" }}>{error}</p>}
-//       {!authorized && (
-//         <div>
-//           <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
-//           <Button
-//             type="button"
-//             label="Authorize"
-//             onClick={() =>
-//               (window.location.href = "http://127.0.0.1:5000/auth/login")
-//             }
-//           />
-//         </div>
-//       )}
-//       {authorized && recommendations.length > 0 && (
-//         <div>
-//           <h2>Recommendations</h2>
-//           <ul>
-//             {recommendations.map((rec, index) => (
-//               <li key={index}>{rec}</li>
-//             ))}
-//           </ul>
-//           {spotifyLink && (
-//             <div>
-//               <h2>Spotify Playlist</h2>
-//               <p>
-//                 <a href={spotifyLink} target="_blank" rel="noopener noreferrer">
-//                   Open Playlist on Spotify
-//                 </a>
-//               </p>
-//             </div>
-//           )}
-//         </div>
-//       )}
-//     </div>
-//   );
-// }
-
-// export default App;