Dayrate | Creator Partnership Studio

Dayrate is an independent Noerong product for creators managing their own brand partnerships. I designed and built a complete React application connecting partnerships, deliverables, recorded payments, and an editable media kit.

The demonstration studio belongs to the fictional creator Maya Chen. Brands, audience figures, campaigns, and amounts are sample content. This is an independent product, not a commissioned client engagement.

A partnership starts as a conversation, becomes a brief, then turns into dated deliverables and a payment to record. Alongside that work, a creator needs a clear way to introduce their story, audience, and services to the next partner.

The brief was to connect those moments in a focused application with a strong creative identity. The next action needed to remain clear across working screens and the more expressive media kit. This was a self-directed product brief, without a claimed customer-research cohort.

Product scope, interface and interaction design, frontend engineering, data modeling, original synthetic campaign artwork, responsive layouts, motion behavior, workflow testing, deployment, and source-kit documentation.

Overview: active partnerships, recorded amounts, deliverable progress, and upcoming work in one starting point.

Partnerships: create and edit campaigns with a brand, brief, category, fee, date, contact, notes, and deliverables. Switch between a visual grid and a stage-based pipeline, search, and filter.

Campaign detail: update the stage, complete deliverables, and record received amounts. Changes feed the surrounding summaries.

Calendar: review monthly deliverables, open the campaign behind a date, and download an ICS snapshot.

Earnings: review entered fees, received amounts, outstanding balances, and category mix. These are user-entered records, not a connected bank balance or recognized revenue.

Media kit: edit the creator profile, audience figures, and collaboration packages. Preview the kit, then print or save a PDF without navigation or private campaign records.

Studio settings and introduction: manage profile details, JSON backups, motion preferences, and explicit reset actions, with a product introduction explaining the workflow.

Warm neutral surfaces, precise sans-serif typography, soft category colors, and four original synthetic campaign images give the product a distinct visual identity. Repeated spacing, action styles, and type sizes keep the working screens coherent.

The media kit carries the same identity into an editorial composition. Its content comes from editable application data. Short entrance sequences, responsive controls, and smooth navigation add character while keeping the workflow accessible. An interface motion setting and the system reduced-motion preference are both respected.

Forms preserve entered content when a save fails. Payments above the entered fee are rejected. Destructive actions request confirmation. Empty search results explain what happened. Dialogs support keyboard navigation and Escape, and mobile navigation restores focus when it closes.

React, TypeScript, and Vite power the application. CSS handles responsive layouts and motion. Typed records connect campaigns, deliverables, profile details, and packages. The domain layer validates data and calculates summaries.

Workspace data stays in localStorage in the current browser and website origin. Another browser or device has separate data, and clearing site storage can erase the workspace. JSON backups provide an explicit transfer and recovery path.

Backup imports validate schema, values, dates, identifiers, and local image paths before replacement. Oversized imports are rejected. Corrupt saved data is preserved until a recovery action is chosen. Blocked writes produce visible feedback. CSV reports escape spreadsheet-sensitive content, and ICS exports use all-day dates and escaped text.

The release passed its production build and 32 automated tests: 13 domain tests and 19 browser tests. Responsive checks covered all seven views at six widths from 360 to 1440 pixels, totaling 42 view-and-width combinations. No page-level overflow or page errors were reported in those checks, and visible images loaded.

Automated accessibility scans found no violations in the configured WCAG 2 A/AA and WCAG 2.1 AA rules across seven desktop views. This is automated coverage, not accessibility certification. The exported media kit was visually reviewed as one A4 page. Six additional smooth-scroll checks passed on the live Railway deployment at phone, tablet, and laptop widths.

A functioning, editable creator workspace with a responsive interface, original synthetic artwork, printable media kit, portable exports, buyer guide, commercial license, deployment files, HD visuals, and the narrated walkthrough above.

The $299 source kit licenses one end project. The separate $599 setup service includes that license, one brand configuration, one buyer-owned deployment, two scoped revision rounds, and handoff. Customer adoption, revenue improvements, and time savings have not been measured.

Dayrate runs with local browser data. Accounts, backend services, cloud backup, shared collaboration, payment processing, email delivery, social-data sync, image upload, and AI services are not included. Amounts use USD. These additions require a separate implementation scope.