organize file structure

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Jost } from "next/font/google";
 import "./globals.css";
-import Navbar from "../components/nav-bar";
+import Navbar from "@/components/layout/nav-bar";
 
 const jost = Jost({ subsets: ["latin"] });
 

src/app/page.tsx

@@ -1,8 +1,8 @@
-import HeroSection from "../components/hero-section";
-import AboutMeSection from "../components/about-me-section";
-import TechnologiesSection from "../components/technologies-section";
-import ProjectsSection from "../components/projects-section";
-import ContactSection from "../components/contact-section";
+import HeroSection from "../components/sections/hero-section";
+import AboutMeSection from "../components/sections/about-me-section";
+import TechnologiesSection from "../components/sections/technologies-section";
+import ProjectsSection from "../components/sections/projects-section";
+import ContactSection from "../components/sections/contact-section";
 import { SiNextdotjs } from "react-icons/si";
 
 export default async function Home() {

src/components/nav-bar.tsx → src/components/layout/nav-bar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import NavLogo from "../assets/nav-logo.svg";
+import NavLogo from "@/assets/nav-logo.svg";
 import Image from "next/image";
 import { motion } from "framer-motion";
 

src/components/now-playing-widget.tsx

@@ -1,14 +1,14 @@
-/* eslint-disable @next/next/no-img-element */
 "use client";
 
 import Image from "next/image";
-import { useGetNowPlaying } from "../services/use-get-now-playing";
+import { useGetNowPlaying } from "@/hooks/use-get-now-playing";
 import SoundWave from "./sound-wave";
 import { GoCloudOffline } from "react-icons/go";
 import { IoIosMusicalNote } from "react-icons/io";
 
 export default function NowPlayingWidget() {
   const { nowPlaying, error, isLoading } = useGetNowPlaying();
+
   return (
     <>
       {!isLoading ? (

src/components/about-me-section.tsx → src/components/sections/about-me-section.tsx

@@ -2,7 +2,7 @@
 
 import { Glow, GlowCapture } from "@codaworks/react-glow";
 import { motion } from "framer-motion";
-import SectionTitleMotion from "./motions/section-title-motion";
+import SectionTitleMotion from "../motions/section-title-motion";
 
 export default function AboutMeSection() {
   return (

src/components/contact-section.tsx → src/components/sections/contact-section.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import NowPlayingWidget from "./now-playing-widget";
+import NowPlayingWidget from "../now-playing-widget";
 import { motion } from "framer-motion";
 
 export default function ContactSection() {

src/components/hero-section.tsx → src/components/sections/hero-section.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { just_me_again_down_here } from "../app/fonts";
+import { just_me_again_down_here } from "@/app/fonts";
 import Image from "next/image";
-import HeroLogo from "../assets/hero-logo.svg";
-import Underline from "../assets/underline.svg";
+import HeroLogo from "@/assets/hero-logo.svg";
+import Underline from "@/assets/underline.svg";
 import { motion } from "framer-motion";
 
 export default function HeroSection() {

src/components/projects-section.tsx → src/components/sections/projects-section.tsx

@@ -1,7 +1,7 @@
-import { projects } from "../constants";
-import SectionTitleMotion from "./motions/section-title-motion";
-import ProjectCard from "./project-card";
-import ProjectContainerMotion from "./motions/project-container-motion";
+import { projects } from "../../constants";
+import SectionTitleMotion from "../motions/section-title-motion";
+import ProjectCard from "../project-card";
+import ProjectContainerMotion from "../motions/project-container-motion";
 
 export default function ProjectsSection() {
   return (

src/components/technologies-section.tsx → src/components/sections/technologies-section.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { technologies } from "../constants";
+import { technologies } from "../../constants";
 import { Glow, GlowCapture } from "@codaworks/react-glow";
 import { IconType } from "react-icons";
 import { motion } from "framer-motion";
-import SectionTitleMotion from "./motions/section-title-motion";
+import SectionTitleMotion from "../motions/section-title-motion";
 
 export default function TechnologiesSection() {
   const [isContainerHovered, setIsContainerHovered] = useState(false);

src/services/use-get-now-playing.ts → src/hooks/use-get-now-playing.ts

@@ -1,33 +1,6 @@
 import queryString from "query-string";
 import { useEffect, useState } from "react";
 
-const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
-
-export const getAccessToken = async () => {
-  //generated a base64 code of client_id:client_secret as required by the API
-  const basic = Buffer.from(
-    `2895ead45ceb4370bb19a0bb2b36210a:c8478690a7f147d59e3ec30ddd923f4f`
-  ).toString("base64");
-
-  //request for creating an access token
-  const response = await fetch(TOKEN_ENDPOINT, {
-    method: "POST",
-    headers: {
-      Authorization: `Basic ${basic}`,
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: queryString.stringify({
-      grant_type: "refresh_token",
-      refresh_token:
-        "AQCnQ_t0OJPOzFhjxcZHqOug4YvdK1h1IuyZs_mbZYByaJ0e1LMiPqbTLKzfNm3vd3h6nD08WiHy782J6KcLYpToP9u3FYzgR87povMLJUl1OHiFvIY-AawvxPry3l72Kj0",
-    }),
-  });
-
-  const data = await response.json();
-
-  return data;
-};
-
 type TNowPlaying = {
   songUrl: string;
   albumImageUrl: string;
@@ -38,7 +11,6 @@ type TNowPlaying = {
   timeTotal: number;
   artistUrl: string;
 };
-
 type TError = "not-playing" | "fetch-error" | null;
 
 const NOW_PLAYING_ENDPOINT =
@@ -60,15 +32,14 @@ export function useGetNowPlaying() {
             Authorization: `Bearer ${access_token}`,
           },
         });
-        //If response status > 400 means there was some error while fetching the required information
+        //if response status > 400 means there was some error while fetching the required information
         if (response.status > 400) {
           setError("fetch-error");
+          //this returns no content and that means the user is either offline/not playing
         } else if (response.status === 204) {
-          //The response was fetched but there was no content
           setError("not-playing");
         }
 
-        //Extracting the required data from the response into seperate variables
         const song = await response.json();
 
         const albumImageUrl: string = song.item.album.images[0].url;
@@ -93,7 +64,7 @@ export function useGetNowPlaying() {
           artistUrl,
         });
       } catch (error: any) {
-        console.error("Error fetching currently playing song: ", error);
+        console.error("Error fetching playing song: ", error);
       } finally {
         setIsLoading(false);
       }
@@ -107,3 +78,28 @@ export function useGetNowPlaying() {
     isLoading,
   };
 }
+
+
+const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
+
+export const getAccessToken = async () => {
+  //generated a base64 code of client_id:client_secret as required by the spotify API
+  const basic = Buffer.from(
+    `${process.env.NEXT_PUBLIC_CLIENT_ID}:${process.env.NEXT_PUBLIC_CLIENT_SECRET}`
+  ).toString("base64");
+
+  //request access token along with the refresh token
+  const response = await fetch(TOKEN_ENDPOINT, {
+    method: "POST",
+    headers: {
+      Authorization: `Basic ${basic}`,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: queryString.stringify({
+      grant_type: "refresh_token",
+      refresh_token: process.env.NEXT_PUBLIC_REFRESH_TOKEN,
+    }),
+  });
+
+  return await response.json();
+};