Skip to content

RhythrosaLabs/labelflow

Repository files navigation

LabelFlow 🎡

The ultimate record label management platform built for modern independent labels. Manage artists, plan campaigns, track analytics, generate AI-powered content, and run complete label operations β€” all in one sleek React application.

Live Demo React Vite License


✨ Features

LabelFlow ships with 15 fully functional modules out of the box:

Module Description
πŸ“Š Dashboard Real-time overview of label stats, activity feed, upcoming events & AI insights
🎀 Artists Manage roster cards with streaming stats, growth trends & artist profiles
πŸ“£ Campaigns Track marketing campaigns with progress bars, budgets & performance metrics
πŸ“ Assets Filter and organise audio, images, video and document files
πŸ“… Schedule Interactive calendar with drag-into-month navigation & upcoming events list
πŸ“’ Contacts Industry CRM β€” save managers, promoters, radio, press & brand contacts
⭐ Opportunities AI-powered discovery for sync deals, festivals, grants & playlist placements
πŸ“ Notes Categorised notes editor for meetings, ideas & campaign notes
βœ… To-Do & Workflows Drag-and-drop Kanban board with priority-colour task cards
πŸ€– AI Artist Development Generate a complete artist profile, album concept & merch line with AI
✍️ AI Blog Writer Full rich-text editor with AI content generation, chat assistant & blog library
πŸ‘• AI Merch Mockups Generate product mockups for tees, hoodies, mugs, posters & more
πŸ“š Resources Categorised link/document library with add/delete functionality
πŸ“ Street Marketing AI-powered city location scouting for poster drops and street activations
πŸ“ˆ Analytics Chart.js-powered streaming growth, audience geography & revenue mix

πŸ–₯️ Screenshots

Dashboard

Live stats, activity feed, upcoming events & AI insights at a glance.

Dashboard

Artists Roster

Cards for each artist with streaming stats and growth trends.

Artists

AI Blog Writer

Full rich-text editor with AI chat assistant, style selector & blog library.

AI Blog Writer

Kanban To-Do Board

Drag cards between To Do β†’ In Progress β†’ Review β†’ Done columns.

Kanban Board

Street Marketing (Spot-Spotter)

Search any city for AI-recommended street marketing locations with match scores.

Spot Spotter

Analytics

Chart.js streaming growth, audience geography heat map & revenue doughnut.

Analytics

Campaigns

Create, track, and measure marketing campaigns with live progress and budget breakdowns.

Campaigns

Asset Manager

Upload, filter, download, and delete audio, image, video & document files.

Assets

Merch Mockups

AI-generated product mockups β€” rotate angles, favourite and compare designs.

Merch Mockups

πŸ“Έ Screenshots captured automatically using Puppeteer against the running dev server.


πŸš€ Getting Started

Prerequisites

  • Node.js β‰₯ 18 (download)
  • npm β‰₯ 9 (bundled with Node)

Installation

# 1. Clone the repository
git clone https://github.com/RhythrosaLabs/labelflow.git
cd labelflow/labelflow-react

# 2. Install dependencies
npm install

# 3. (Optional) Configure environment variables
cp .env.example .env
# Edit .env with your values

# 4. Start development server
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build       # outputs to dist/
npm run preview     # preview production build locally

βš™οΈ Configuration

Copy .env.example to .env and fill in the values for any AI integrations you want to enable:

cp labelflow-react/.env.example labelflow-react/.env
Variable Description Required
VITE_OPENAI_API_KEY OpenAI API key for live AI generation Optional
VITE_APP_NAME Overrides the app display name Optional

⚠️ Security: Never commit your .env file. It is excluded via .gitignore. All API keys must be prefixed with VITE_ to be exposed to the browser β€” never use server-side secrets in a Vite frontend.


πŸ—‚οΈ Project Structure

labelflow/
β”œβ”€β”€ labelflow-react/          # ← Main React app (Vite)
β”‚   β”œβ”€β”€ public/
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”‚   β”œβ”€β”€ sections/     # One file per feature module
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ DashboardSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ ArtistsSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ CampaignsSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AssetsSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ ScheduleSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ ContactsSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ OpportunitiesSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ NotesSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AIArtistSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ AIBlogWriterSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ MerchMockupsSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ ResourcesSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ TodosSection.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ SpotSpotterSection.jsx
β”‚   β”‚   β”‚   β”‚   └── AnalyticsSection.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Sidebar.jsx
β”‚   β”‚   β”‚   └── MainContent.jsx
β”‚   β”‚   β”œβ”€β”€ App.jsx           # Root component + FloatingAI
β”‚   β”‚   β”œβ”€β”€ labelflow.css     # Core design system
β”‚   β”‚   └── integrated_styles.css
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ vite.config.js
β”‚   └── package.json
β”œβ”€β”€ labelflow/                # Original vanilla HTML prototype
β”œβ”€β”€ ai_merch_mockup_maker_by_rhythrosa_labs/
β”œβ”€β”€ cardspots___find_perfect_flyer_locations_by_rhythrosa_labs/
β”œβ”€β”€ .gitignore
└── README.md

πŸ› οΈ Tech Stack

Layer Technology
Framework React 19
Build Tool Vite 7
Charts Chart.js (CDN)
Icons Font Awesome 6 (CDN)
Fonts Google Fonts – Inter
Styling Custom CSS design system (dark theme, CSS variables)
State React useState / useEffect (no external state library)

πŸ”’ Security

  • No secrets are committed β€” all sensitive keys go in .env (gitignored)
  • No external API calls by default β€” all AI responses are simulated locally, keeping the app safe to open-source
  • XSS prevention β€” user-generated HTML is only rendered where explicitly safe via dangerouslySetInnerHTML on static data
  • No telemetry β€” the app makes no external network requests unless you configure an API key
  • CDN integrity β€” Font Awesome is loaded with integrity and crossorigin attributes for subresource integrity

🀝 Contributing

Pull requests are welcome! For major changes, open an issue first.

  1. Fork the repository
  2. Create your branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'feat: add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the MIT License β€” see LICENSE for details.


πŸ™Œ Credits

Built by Rhythrosa Labs β€” crafting tools for independent music creators.

"The music industry runs on relationships, creativity, and hustle. LabelFlow powers all three."

About

🎡 LabelFlow β€” The ultimate record label management platform. Built with React 19 + Vite. 15 fully functional modules: artists, campaigns, analytics, AI blog writer, merch mockups, street marketing & more.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages