feat: restore and refine loop feature in BeatPlayer

README.md

@@ -0,0 +1,139 @@
+<div align="center">
+  <img src="./client/public/favicon.png?v=2" alt="Draft16 Logo" width="120" height="120" />
+
+  # Draft16 Studio
+
+  **The ultimate distraction-free drafting workspace tailored specifically for lyricists and songwriters.**
+
+  [**Visit Live App**](https://draft16.vercel.app/) • [**Report Bug**](https://github.com/daksh006v/draft16/issues/new?labels=bug) • [**Request Feature**](https://github.com/daksh006v/draft16/issues/new?labels=enhancement)
+</div>
+
+<br/>
+
+## 🎵 About The Project
+
+Draft16 is a professional-grade web application designed from the ground up for music artists, producers, and lyricists. Far too often, writers are forced to juggle multiple apps—a notes app for writing, a browser for finding beats, and a separate app for syllable counting. 
+
+Draft16 merges the entire creative workflow into a single, cohesive environment. 
+
+With a deeply considered, distraction-free UI inspired by premium tools like Notion and Figma, Draft16 allows artists to write verses, count syllables in real-time, record takes, and loop audio tracks simultaneously without ever breaking their creative flow.
+
+### ✨ Key Features
+
+- **Distraction-Free Editor**: A fluid, typography-focused writing canvas (powered by CodeMirror) designed for writing bars without visual clutter.
+- **Integrated BeatPlayer**: Load local audio files or instantly stream YouTube beats directly alongside your lyrics, complete with loop functionality.
+- **Real-time Syllable Counting**: Built-in syllable analysis helps you perfect your flow and manage your cadences effortlessly.
+- **Instant Cloud Syncing**: Secure, real-time saving of all your sessions so your lyrics are never lost.
+- **Invisible Authentication**: Seamless, one-click Google OAuth means getting straight to writing without password fatigue.
+
+---
+
+## 📸 Interface Previews
+
+
+<div align="center">
+  <img src="./.github/assets/landing.png" alt="Draft16 Landing Page" width="800" />
+  <p><em>The intuitive and welcoming landing portal.</em></p>
+
+  <br/>
+
+  <img src="./.github/assets/dashboard-dark.png" alt="Draft16 Dashboard (Dark Mode)" width="800" />
+  <p><em>Managing your sessions and creative projects.</em></p>
+
+  <br/>
+
+  <img src="./.github/assets/editor.png" alt="Draft16 Session Editor" width="800" />
+  <p><em>The core editing environment featuring the integrated BeatPlayer and syllable counter.</em></p>
+
+  <br/>
+
+  <img src="./.github/assets/dashboard-light.png" alt="Draft16 Dashboard (Light Mode)" width="800" />
+  <p><em>Seamless light mode support for different studio environments.</em></p>
+</div>
+
+---
+
+## 🛠️ Technology Stack
+
+Draft16 is a modern Full-Stack application utilizing a decoupled client-server architecture.
+
+### Frontend (Client)
+- **Framework**: [React 19](https://react.dev/) + [Vite](https://vitejs.dev/)
+- **Styling**: Vanilla CSS with [TailwindCSS 4](https://tailwindcss.com/) overrides for maximum control.
+- **Editor**: [CodeMirror 6](https://codemirror.net/) via `@uiw/react-codemirror`
+- **Utilities**: `syllable` for lyrical analysis, `dnd-kit` for drag-and-drop interactions.
+
+### Backend (Server)
+- **Environment**: [Node.js](https://nodejs.org/) & [Express.js](https://expressjs.com/)
+- **Database**: [MongoDB](https://www.mongodb.com/) & Mongoose
+- **Authentication**: JWT (JSON Web Tokens) & Google OAuth 2.0 Integration
+- **Media Storage**: [Cloudinary](https://cloudinary.com/) (Multer integration)
+
+### Deployment
+- **Frontend Hosting**: [Vercel](https://vercel.com/)
+- **Backend Hosting**: [Render](https://render.com/)
+
+---
+
+## 🚀 Getting Started Locally
+
+To get a local copy of Draft16 up and running, follow these simple steps.
+
+### Prerequisites
+Make sure you have Node.js and npm installed on your machine.
+* npm
+  ```sh
+  npm install npm@latest -g
+  ```
+
+### Installation
+
+1. **Clone the repo**
+   ```sh
+   git clone https://github.com/your-username/draft16.git
+   ```
+
+2. **Setup the Backend**
+   ```sh
+   cd server
+   npm install
+   ```
+   *Create a `.env` file in the `server` directory using `.env.example` as a template and provide your MongoDB URI and Cloudinary credentials.*
+
+3. **Setup the Frontend**
+   ```sh
+   cd ../client
+   npm install
+   ```
+
+4. **Run both environments**
+   *You can run them in separate terminal windows.*
+
+   *Window 1 (Backend):*
+   ```sh
+   cd server
+   npm run dev
+   ```
+
+   *Window 2 (Frontend):*
+   ```sh
+   cd client
+   npm run dev
+   ```
+
+5. **Open Application**
+   Navigate to `http://localhost:5173` in your browser.
+
+---
+
+## 🔒 License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+---
+
+<div align="center">
+  Built specifically to push the culture forward. 
+  <br/>
+  <b>Draft16</b>
+</div>

client/.env.example

@@ -0,0 +1,4 @@
+# Backend API base URL (no trailing slash)
+# Development: http://localhost:5000/api
+# Production: https://your-backend.com/api
+VITE_API_URL=http://localhost:5000/api

client/index.html

@@ -2,9 +2,30 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>client</title>
+
+    <!-- Primary Meta Tags -->
+    <title>Draft16 Studio | Professional Songwriting Workspace</title>
+    <meta name="title" content="Draft16 Studio | Professional Songwriting Workspace" />
+    <meta name="description" content="Draft16 is the ultimate drafting workspace for lyricists. Write verses, record takes, play beats, and perfect your flow in a distraction-free studio environment." />
+    <meta name="keywords" content="Draft16, draft16 studio, songwriting app, lyricist workspace, beat player, music studio software, rap lyrics editor, distraction-free writing" />
+    <meta name="author" content="Draft16 Studio" />
+    <meta name="robots" content="index, follow" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://draft16.vercel.app/" />
+    <meta property="og:title" content="Draft16 Studio | Professional Songwriting Workspace" />
+    <meta property="og:description" content="The ultimate drafting workspace for lyricists. Write verses, record takes, play beats, and perfect your flow." />
+    <meta property="og:image" content="https://draft16.vercel.app/favicon.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:url" content="https://draft16.vercel.app/" />
+    <meta property="twitter:title" content="Draft16 Studio | Professional Songwriting Workspace" />
+    <meta property="twitter:description" content="The ultimate drafting workspace for lyricists. Write verses, record takes, play beats, and perfect your flow." />
+    <meta property="twitter:image" content="https://draft16.vercel.app/favicon.png" />
   </head>
   <body>
     <div id="root"></div>

client/package.json

@@ -19,6 +19,7 @@
     "@tailwindcss/vite": "^4.2.1",
     "@uiw/react-codemirror": "^4.25.8",
     "axios": "^1.13.6",
+    "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.13.1",

client/public/google9400ccb65d51108d.html

@@ -0,0 +1 @@
+google-site-verification: google9400ccb65d51108d.html

client/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://draft16.vercel.app/sitemap.xml

client/public/sitemap.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://draft16.vercel.app/</loc>
+    <lastmod>2026-04-02</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://draft16.vercel.app/signup</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://draft16.vercel.app/login</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>