bleh, and spotify redirect uri

https://developer.spotify.com/blog/2025-02-12-increasing-the-security-requirements-for-integrating-with-spotify

.env.development

@@ -1 +1 @@
-REACT_APP_API_BASE_URL = "http://localhost:9001"
+REACT_APP_API_BASE_URL = "http://127.0.0.1:9001"

src/components/Navbar/index.tsx

@@ -12,6 +12,7 @@ const Navbar = () => {
     <nav className={`${styles.navbar_wrapper} custom_scrollbar`}>
       <StyledNavLink path="/" text="About" />
       <StyledNavLink path="/graph" text="Graph" />
+      <StyledNavLink path="/how-to" text="How To" />
       {auth === true ? (
         <StyledNavLink path="/logout" text="Logout" />
       ) : (

src/pages/HowToUse/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const HowToUse = () => {
+  return (
+    <div>
+      <h1>How To Use?</h1>
+    </div>
+  );
+};
+
+export default HowToUse;

src/pages/Login/index.tsx

@@ -11,7 +11,7 @@ const Login = () => {
 
     return () => clearTimeout(timeoutID);
   }, []);
-  return <div className={styles.login_wrapper}>Redirecting to Spotify...</div>;
+  return <div className={styles.login_wrapper}>Logging in to Spotify...</div>;
 };
 
 export default Login;

src/routes/AllRoutes.tsx

@@ -8,6 +8,7 @@ import PageNotFound from "../pages/PageNotFound";
 import Graph from "../pages/Graph";
 import Login from "../pages/Login";
 import Logout from "../pages/Logout";
+import HowToUse from "../pages/HowToUse";
 
 const AllRoutes = () => {
   return (
@@ -26,6 +27,7 @@ const AllRoutes = () => {
 
       {/* Common routes */}
       <Route path="/" element={<Landing />} />
+      <Route path="/how-to" element={<HowToUse />} />
 
       {/* 404 */}
       <Route path="/page-not-found" element={<PageNotFound />} />