Draft16 Studio

The ultimate distraction-free drafting workspace tailored specifically for lyricists and songwriters.

Visit Live App • Report Bug • Request Feature

🎵 About The Project

Draft16 is a professional-grade web application designed from the ground up for music artists, producers, and lyricists. It acts as an integrated studio environment, allowing creatives to write verses, perfect their flow, and listen to instrumental tracks without ever having to switch contexts.

🎯 The Problem

Music artists and lyricists typically suffer from a highly fragmented creative workflow. When crafting a song, they are often forced to juggle multiple, unintegrated tools simultaneously:

• A notes app or basic text editor for writing lyrics.
• A web browser to search for and stream instrumental beats.
• An audio player application to loop local files.
• Manual counting or separate third-party websites to analyze syllable counts and perfect rhythmic cadences.

This constant context-switching introduces severe friction, breaks the artist's focus, and ultimately hinders the creative flow.

💡 The Solution

Draft16 merges this entire workflow into a single, cohesive, and distraction-free workspace. Inspired by the premium, intuitive interfaces of tools like Notion and Figma, Draft16 brings the writing canvas, audio playback, and lyrical analysis onto one screen. By centralizing these essential tools, artists can remain deeply immersed in their creative zone.

🚀 Why Draft16? (How It Stands Out)

Unlike generic text editors or basic note-taking apps, Draft16 is purpose-built for the musical cadence.

• Built for Flow: While other apps just capture text, Draft16 actively assists your songwriting by providing real-time syllable counting right as you type.
• No More Juggling Apps: Instead of tabbing out to YouTube or iTunes to replay a beat, the integrated BeatPlayer sits right next to your lyrics, allowing you to loop, pause, and play instantly.
• Frictionless Experience: With invisible authentication (Google OAuth) and auto-saving cloud sessions, the technical overhead of saving and organizing files vanishes, leaving only the music.

---

✨ Key Features

• Distraction-Free Editor: A fluid, typography-focused writing canvas powered by CodeMirror 6. It provides a visual clutter-free environment optimized specifically for writing bars and verses.
• Integrated BeatPlayer: An embedded, robust audio player. You can load and loop local audio files directly from your device, or seamlessly stream beats from YouTube right alongside your lyrics.
• Real-time Syllable Counting: Built-in, on-the-fly lyrical analysis. As you type, Draft16 instantly calculates syllable counts, helping you master complex rhythmic cadences effortlessly.
• Instant Cloud Syncing: Secure, real-time saving and cloud storage of your lyrics, beats, and sessions to ensure no creative idea is ever lost.
• Invisible Authentication: A frictionless login experience utilizing Google OAuth 2.0, meaning you can bypass password fatigue and get straight to creating.
• Intuitive Session Management: Drag-and-drop interactions and clean dashboard UI for managing all your creative projects smoothly.

---

📸 Interface Previews

The intuitive and welcoming landing portal.

Managing your sessions and creative projects.

The core editing environment featuring the integrated BeatPlayer and syllable counter.

Seamless light mode support for different studio environments.

---

🛠️ Technology Stack & Methods

Draft16 is a modern, high-performance Full-Stack application utilizing a decoupled client-server architecture.

Frontend (Client Layer)

• Framework: React 19 + Vite for an ultra-fast SPA experience.
• Styling: Vanilla CSS complemented by TailwindCSS 4 overrides, providing a highly custom, deeply controlled UI aesthetic.
• Editor Integration: CodeMirror 6 (via @uiw/react-codemirror) for the core writing experience.
• Utilities: syllable for lyrical text analysis, dnd-kit for drag-and-drop mechanics.
• Hosting: Vercel

Backend (Server Layer)

• Environment: Node.js & Express.js serving a robust RESTful API.
• Database: MongoDB & Mongoose for scalable user and session persistence.
• Authentication: JWT (JSON Web Tokens) combined with Google OAuth 2.0.
• Media Storage: Secure file handling using multer and cloud storage via Cloudinary.
• Hosting: Render

---

🚀 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

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/daksh006v/draft16.git

2. Setup the Backend

   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

   cd ../client
   npm install

4. Run both environments You can run them in separate terminal windows.

   Window 1 (Backend):

   cd server
   npm run dev

   Window 2 (Frontend):

   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.

---

Built specifically to push the culture forward.
Draft16