Features/backend setup

.github/workflows/frontend-ci.yml

@@ -0,0 +1,38 @@
+name: Frontend CI
+
+on:
+  push:
+    branches:
+      - develop
+      - feature/*
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Lint Code
+        run: npm run lint
+        working-directory: ./frontend
+
+      - name: Run Tests
+        run: npm test
+        working-directory: ./frontend
+
+      - name: Build Frontend
+        run: npm run build
+        working-directory: ./frontend

.gitignore

@@ -1,25 +1,15 @@
+# Node.js
+node_modules/
+.env
+
 # Logs
-logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
-dist
-dist-ssr
-*.local
+# Build
+dist/
+build/
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-.env
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# React
+.cache/

README.md

@@ -85,6 +85,14 @@ Follow these steps to set up the project on your local machine.
 
 We welcome contributions! If you'd like to contribute to the project, please fork the repository and use a feature branch. Pull requests are warmly welcome.
 
+# Branch Naming Conventions
+- `main`: Production-ready code.
+- `develop`: Latest integrated development work.
+- `feature/<feature-name>`: For new features.
+- `bugfix/<issue-id>`: For fixing bugs during development.
+- `release/<version>`: For preparing production releases.
+- `hotfix/<issue-id>`: For urgent fixes to production code.
+
 ### Steps to Contribute:
 
 1. Fork the repository.

frontend/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+.env
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/src/App.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import VideoBackground from './components/VideoBackground';
+import TopMenu from './components/TopMenu';
+import PomodoroTimer from './components/PomodoroTimer';
+import BottomMenu from './components/BottomMenu';
+import backgrounds from './assets/backgrounds';
+
+export default function App() {
+  // Set a fallback value for the background in case backgrounds array is empty
+  const [background, setBackground] = useState(
+    backgrounds[0] || { src: '', name: 'Default' }
+  );
+
+  const handleBackgroundChange = (newSrc) => {
+    const selectedBackground = backgrounds.find((bg) => bg.src === newSrc);
+    if (selectedBackground) {
+      setBackground(selectedBackground);
+    } else {
+      setBackground(backgrounds[0]);
+    }
+  };
+
+  useEffect(() => {
+    const storedBackground = JSON.parse(
+      window.localStorage.getItem('selectedBackground')
+    );
+    if (storedBackground) {
+      handleBackgroundChange(storedBackground);
+    }
+  }, [handleBackgroundChange]);
+
+  return (
+    <div className="relative flex flex-col h-screen overflow-hidden">
+      <VideoBackground
+        backgroundSrc={!background.src ? backgrounds[0] : background.src}
+      />
+
+      <div className="h-25">
+        <TopMenu />
+      </div>
+
+      <div className="flex-grow relative z-10">
+        <PomodoroTimer />
+      </div>
+
+      <div className="h-25">
+        <BottomMenu
+          onBackgroundChange={handleBackgroundChange}
+          backgrounds={backgrounds}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/assets/music/index.js

@@ -0,0 +1,4 @@
+import discover from './discover.mp3';
+import theSky from './the sky.mp3';
+
+export const music = [discover, theSky];

frontend/src/assets/musicData.js

@@ -0,0 +1,44 @@
+// src/musicData.js
+
+const baseYouTubeThumbnailUrl = 'https://img.youtube.com/vi';
+
+const videos = [
+  {
+    id: 'IRp0zhUFi-M',
+    title: 'Lofi Hip Hop Beats 24/7 Radio',
+  },
+  {
+    id: 'JWlKA9wmO64',
+    title: 'Japanese Lofi Radio 24/7',
+  },
+  {
+    id: 'unl1zQoWD9A',
+    title: '24/7 Dark Ambient Lofi 🌌 In Memory of Those We Miss',
+  },
+  {
+    id: '8Yqx3we3WJ4',
+    title:
+      'Space Lofi Hip Hop Radio 24/7 🚀 Chill Lofi Beats To Study, Lofi Sleep Music',
+  },
+  {
+    id: '9ljhQoFsahw',
+    title:
+      'Lofi Space Station 🚀 Aesthetic Lofi Beats to Chill / Study to 🌌 Lofi Radio',
+  },
+  {
+    id: 'RyA-7mzA2SI',
+    title: 'Rain Sounds & Lofi Music 🌧 Relaxing Lofi Sleep & Study Music 🌧',
+  },
+  {
+    id: 'JQUNIbAT934',
+    title: 'At the Laundry 🔴 Chill Lofi Hip Hop Beats to sleep/ study',
+  },
+];
+
+// Adding thumbnail URL dynamically to each video object
+const videosWithThumbnails = videos.map((video) => ({
+  ...video,
+  thumbnail: `${baseYouTubeThumbnailUrl}/${video.id}/0.jpg`,
+}));
+
+export default videosWithThumbnails;