Resolved conflicts

Persistent Design
pooranjoyb · Apr 15, 2024 · 4d33c0c · 4d33c0c
2 parents fa947d4 + dc9ee90
commit 4d33c0c
Show file tree

Hide file tree

Showing 22 changed files with 769 additions and 229 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -28,6 +28,20 @@ cd BeatBridge
 npm install
 ```
 
+- Setup Environment Variables
+  - Create a file `.env.local` in the root directory.
+  - Go to [Spotify Dashboard](https://developer.spotify.com/dashboard) and Login into your Spotify Account.
+  - Create an App and fill the required details like Name, Description, Website
+  - Make sure to add the Redirect URI to `https://localhost:5173` and check the following API
+  ![image](https://github.com/pooranjoyb/BeatBridge/assets/90945182/0b2e568e-20de-40bd-9f7f-b48740a1a2d4)
+  - Save the Details, Click on the App you just created and go to `Settings`
+  - Copy your `CLIENT_ID` and `CLIENT_SECRET`
+  - Add the following in the `.env.local` file.
+  - ```bash
+    VITE_CLIENT_ID=your_client_id
+    VITE_CLIENT_SECRET=your_client_secret
+    ```
+
 - Start the development server:
 
 ```bash

diff --git a/README.md b/README.md
@@ -1,7 +1,10 @@
 # BeatBridge - A Music Player with a Recommendation Engine 🚀
+![Open Source](https://img.shields.io/badge/Open%20Source-Yes-brightgreen.svg)
+![React](https://img.shields.io/badge/React-^18.2.0-blue.svg)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-^2.2.19-38B2AC.svg)
+![License](https://img.shields.io/badge/License-MIT-brightgreen.svg)
 
-This Web App is a dedicated application that'll use Spotify API to Fetch Songs and play 'em in the interactive GUI.
-
+This Web App is a dedicated application that'll use Spotify API to Fetch Songs and play them in the interactive GUI. It Utilizes Spotify API to fetch songs and an interactive GUI for is there for playing music with a recommendation Engine for suggesting songs.
 
 <div align="center">
 <img src="https://forthebadge.com/images/badges/built-with-love.svg" />
@@ -21,11 +24,14 @@ This Web App is a dedicated application that'll use Spotify API to Fetch Songs a
    <img src="https://img.shields.io/github/forks/pooranjoyb/BeatBridge?style=for-the-badge" />
   <img src="https://img.shields.io/github/last-commit/pooranjoyb/BeatBridge?style=for-the-badge" />
   </div>
-
-![Open Source](https://img.shields.io/badge/Open%20Source-Yes-brightgreen.svg)
-![React](https://img.shields.io/badge/React-^18.2.0-blue.svg)
-![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-^2.2.19-38B2AC.svg)
-![License](https://img.shields.io/badge/License-MIT-brightgreen.svg)
+
+<div align="center">
+
+#### Join Official Discord Server 
+
+<a href="https://discord.com/invite/PHRnze3W87"><img src="https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white"></a>
+
+</div>
 
 ## Table of Contents
 - [BeatBridge Introduction](#beatbridge---a-music-player-with-a-recommendation-engine-🚀)

diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,14 @@
-@import url("https://fonts.googleapis.com/css2?family=Jost&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Raleway:wght@300&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body{
     overflow-x: hidden;
+    font-family: 'Raleway', sans-serif;
+}
+
+input:focus{
+    outline: none;
 }
diff --git a/src/Components/Features.jsx b/src/Components/Features.jsx
@@ -51,14 +51,14 @@ export default function Features() {
       >
         <div>
           <div>
-            <h1 className="flex font-josh font-bold justify-center text-7xl pt-20">
+            <h1 className="flex font-bold justify-center text-7xl pt-20">
               Ready to make some noise?
             </h1>
-            <div className="flex text-3xl justify-center items-center font-josh">
+            <div className="flex text-3xl justify-center items-center">
               Bringing Harmony to Your Ears.
             </div>
           </div>
-          <div className="flex gap-16 justify-center items-center font-josh">
+          <div className="flex gap-16 justify-center items-center">
             <motion.div
               initial="hidden"
               animate={sectionControls}
@@ -111,4 +111,4 @@ export default function Features() {
       </div>
     </>
   );
-}
+}
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
@@ -5,6 +5,7 @@ import PageThree from "./PageThree";
 import Features from "./Features";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+import { Link } from "react-router-dom";
 
 export default function Home() {
   const animationControls = {
@@ -19,19 +20,17 @@ export default function Home() {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            // When the section is in the viewport, trigger the animation
             animationControls.visible && sectionControls.start("visible");
           } else {
-            // When the section is out of the viewport, reset the animation
             animationControls.hidden && sectionControls.start("hidden");
           }
         });
       },
       {
         root: null,
         rootMargin: "0px",
-        threshold: 0.5, // Adjust the threshold as needed
-      }
+        threshold: 0.5,
+      },
     );
 
     if (sectionRef.current) {
@@ -47,33 +46,34 @@ export default function Home() {
 
   const sectionControls = useAnimation();
 
-
   return (
     <>
-      <div ref={sectionRef} className="bg-cover bg-center font-josh">
+    <Navbar />
+      <div ref={sectionRef} className="bg-cover bg-center font-josh h-screen">
         <img
           src={Background}
           alt="background img"
-          className="mt-[-2%] w-[100%]"
+          className="w-full h-full object-cover"
         />
       </div>
-      <Navbar />
       <motion.div
         initial="hidden"
         variants={animationControls}
         animate={sectionControls}
         transition={{ duration: 0.5, delay: 0.25 }}
-        className=" absolute inset-0 items-center text-center justify-center mt-48 text-[#f3ead3] z-50"
+        className="absolute inset-0 items-center text-center justify-center mt-48 text-[#f3ead3] z-50"
       >
         <p className="font-bold text-3xl tracking-tight">
           Your Gateway to a World of Rhythm
         </p>
         <p className="text-8xl font-bold mt-1 tracking-tighter">
           Welcome to BeatBridge!
         </p>
-        <button className="rounded-full mt-20 font-bold bg-gradient-to-r from-[#2A2438] to-[#5C5470] px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#f3ead3] tracking-wide">
-          Explore
-        </button>
+        <Link to='/search'>
+          <button className="rounded-full mt-20 font-bold bg-gradient-to-r from-[#2A2438] to-[#5C5470] px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#f3ead3] tracking-wide">
+            Explore
+          </button>
+        </Link>
       </motion.div>
 
       <Features />

diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
@@ -19,7 +19,7 @@ export default function Navbar() {
 
     return (
         <>
-            <div className="absolute inset-0 items-center text-center justify-center z-50">
+            <div className="items-center text-center justify-center z-50 bg-[#2A2438]">
                 <div className="pt-1 pb-1 flex flex-row justify-between">
                     <div className="mx-auto flex flex-row mb-2">
                         <h1 className="font-normal text-4xl inline mt-1 ml-24 pr-2 text-[#f3ead3]">
@@ -96,6 +96,4 @@ export default function Navbar() {
             </div>
         </>
     )
-}
-
-
+}
diff --git a/src/Components/PageThree.jsx b/src/Components/PageThree.jsx
@@ -45,7 +45,7 @@ export default function PageThree() {
 
   return (
     <div
-      className="relative h-[800px] font-josh bg-[#2A2438]"
+      className="relative h-[800px] bg-[#2A2438]"
       style={{ overflow: "hidden" }}
       ref={sectionRef}
     >
@@ -119,4 +119,4 @@ export default function PageThree() {
         src={page3} alt="bg img" className="absolute right-0 w-50 top-28" style={{ zIndex: 1, filter: 'invert(1)' }} />
     </div>
   );
-}
+}
diff --git a/src/Components/Player.jsx b/src/Components/Player.jsx
@@ -3,6 +3,14 @@ import "../App.css";
 import Background from "/bag.jpg";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+// import Search from '../assets/search.svg';
+import HeartFill from '../assets/heart-fill.svg';
+import Pause from '../assets/pause.svg';
+import Repeat from '../assets/repeat.svg';
+import Shuffle from '../assets/shuffle.svg';
+import Previous from '../assets/previous.svg';
+import Next from '../assets/next.svg';
+import FullScreen from '../assets/full-screen.svg'
 
 export default function Player({ accessToken }) {
   const [searchInput, setSearchInput] = useState("");
@@ -108,130 +116,49 @@ export default function Player({ accessToken }) {
                 })}
               </div>
             </div>
-            <div className={`${isFullScreen ? "flex-style" : "flex"}`}>
-              <div className={`${isFullScreen ? "image" : ""}`}>
-                <img
-                  className="w-full rounded hidden md:block m-2"
-                  src="https://tailwindcss.com/img/card-top.jpg"
-                  alt="Album Pic"
-                />
-              </div>
-              <div className={`w-full ${isFullScreen ? "music" : " p-8 pb-0"}`}>
-                <div
-                  className={`${isFullScreen ? "title" : "flex justify-between"
-                    }`}
-                >
-                  <div>
-                    <h3 className="text-2xl text-grey-darkest font-medium">
-                      A Sky Full of Stars
-                    </h3>
-                    <p className="text-sm text-grey mt-1">Ghost Stories</p>
-                  </div>
-                  <div className="text-red-lighter">
-                    <svg
-                      className="w-6 h-6"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z" />
-                    </svg>
-                  </div>
-                  <div className="text-red-lighter">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth="1.5"
-                      stroke="currentColor"
-                      className="w-6 h-6"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z"
-                      />
-                    </svg>
-                  </div>
-                  <div className="text-red-lighter" onClick={toggleFullScreen}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.5}
-                      stroke="currentColor"
-                      className="w-6 h-6"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-                      />
-                    </svg>
-                  </div>
+            <div className="w-full md:w-2/3 h-full bg-white mx-2 rounded-xl p-2 sm:p-4">
+              <div className="h-28">
+                <div className="w-full flex items-center justify-between">
+                  <p className="font-bold text-2xl md:text-3xl">Shape of You</p>
+                  <span className="flex items-center">
+                    <img src={HeartFill} className="w-10 h-10 mx-3 cursor-pointer" />
+                    <div className="text-red-lighter" onClick={toggleFullScreen}>
+                      <img src={FullScreen} className="w-10 h-10 mx-3 cursor-pointer"/>
+                    </div>
+                  </span>
                 </div>
-
-                <div className="flex justify-between items-center mt-8">
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M6.59 12.83L4.4 15c-.58.58-1.59 1-2.4 1H0v-2h2c.29 0 .8-.2 1-.41l2.17-2.18 1.42 1.42zM16 4V1l4 4-4 4V6h-2c-.29 0-.8.2-1 .41l-2.17 2.18L9.4 7.17 11.6 5c.58-.58 1.59-1 2.41-1h2zm0 10v-3l4 4-4 4v-3h-2c-.82 0-1.83-.42-2.41-1l-8.6-8.59C2.8 6.21 2.3 6 2 6H0V4h2c.82 0 1.83.42 2.41 1l8.6 8.59c.2.2.7.41.99.41h2z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M4 5h3v10H4V5zm12 0v10l-9-5 9-5z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker p-8 rounded-full bg-red-light shadow-lg">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M5 4h3v12H5V4zm7 0h3v12h-3V4z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M13 5h3v10h-3V5zM4 5l9 5-9 5V5z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M5 4a2 2 0 0 0-2 2v6H0l4 4 4-4H5V6h7l2-2H5zm10 4h-3l4-4 4 4h-3v6a2 2 0 0 1-2 2H6l2-2h7V8z" />
-                    </svg>
+                <div className="w-full flex items-center justify-between">
+                  <p className="my-3 text-lg md:text-xl">Ed Sheeran</p>
+                  <div className="time">
+                    {clock.toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      hour12: true,
+                    })}
                   </div>
                 </div>
-                <div className="flex justify-between text-sm text-grey-darker">
-                  <p>0:40</p>
-                  <p>4:20</p>
+              </div>
+              <div className="h-16 my-5">
+                <div className="mx-3 bg-slate-200 h-3 rounded-full">
+                  <div className="bg-rose-300 h-3 rounded-full" style={{width: '50%'}}></div>
+                </div>
+                <div className="w-full flex justify-between items-center">
+                  <p>02:00</p>
+                  <p>04:00</p>
                 </div>
               </div>
+              <div className="flex justify-around items-center">
+                <img src={Shuffle} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                <img src={Previous} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                <div className="w-12 h-12 md:w-16 md:h-16 bg-stone-100 border-4 border-rose-400 rounded-full flex items-center justify-center">
+                  <img src={Pause} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                </div>
+                <img src={Next} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                <img src={Repeat} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+              </div>
             </div>
           </div>
         </div>
-
         <Footer />
       </div>
     </>