rekonise-com

byCharlesV2 CharlesV2

Buatkan Clone Website rekonise.com full stack, Version Gratis No Pay

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for rekonise-com

1. Introduction

rekonise-com is a full-stack, free-version clone of the rekonise.com link-unlock platform. The product lets a creator gate a destination link behind a set of social actions (subscribe, follow, join) that a visitor must complete before the content is revealed — without the visitor ever needing an account. The clone reproduces the free tier only: no payment, no paid tier, no billing surface of any kind.

The audience is content creators, musicians, streamers and their followers: mobile-first, attention-poor, and allergic to enterprise chrome. The product must read as a creator brand — a locked door the audience wants to walk through — not as a SaaS dashboard.

Two human roles use the product:

  • The Link Creator, who enrolls, configures a social-unlock link, shares it, and watches it perform.
  • The Visitor, who opens a shared unlock link, completes the required social actions, and reaches the destination — with no account and no payment.

Everything in this document is scoped to the free version. Paid features are explicitly out of scope and must not be implemented.

Page 1 of 42

2. System Overview

rekonise-com is delivered as a full-stack web application: a React front end and a Python/FastAPI back end with durable storage, run together via Docker Compose. The back end owns link persistence, unlock-link resolution, per-link click and unlock counting, and server-side validation of unlock completion.

Actors

ActorTypeRole
VisitorHuman personaOpens a shared unlock link, completes the free unlock step, reaches the destination. No account required.
Link CreatorHuman personaEnrolls, creates and shares durable unlock links, monitors their performance.
Back end serviceSystem actorPersists links, resolves unlock links, counts clicks/unlocks, validates unlock completion server-side.

Accepted behavior in scope

Page 2 of 42
  • Creating links that only unlock after a viewer completes a social action (follow, subscribe, join).
  • No viewer account required to interact with or unlock content.
  • Viewer progress display (e.g. "Progress update: 0/3 done", "Unlock progress 0/3 done").
  • Unlock only when all required steps are completed; the Unlock button appears only then.
  • Custom URLs under the creator's namespace (e.g. rekonise.com/your-name/custom-name) with per-link click tracking.
  • Real-time metrics: clicks, unlocks, conversion rates, unlock-today, total unlocks, views, conversion percentage, and a per-day chart.
  • Email capturing during unlock, with segmentation into lists (Newsletter, VIP, Beat Buyers).
  • Integration with multiple social platforms (YouTube, TikTok, Spotify, Discord, and more) managed in one dashboard.
  • Link-in-Bio: a profile page with all links and socials in one place.
  • Branded custom URLs.
  • Ad-free locked pages — no distractions before unlock.
  • Expiring content: time-limited access to create urgency.
  • Bypass Protection: server-side validation preventing bypass scripts/extensions from skipping unlock steps.

Narrow exclusions

  • No paid tier, no payment flow, no billing, no upgrade prompts, no paywalled capability. The free version is the whole product.
  • No viewer account, sign-up, or login for the Visitor.
  • No account-management surface beyond first-use enrollment and returning verification for the Link Creator.
Page 3 of 42

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The product is first-party and full-stack. The application owns its own identity for the Link Creator: a creator must be able to enroll once, then return and keep controlling the durable links they created. That identity is application-owned and is established through an anonymous entry interaction (Sign Up) and re-established through returning verification (Login). The Visitor never establishes identity — the unlock workflow is anonymous and ephemeral by design, and the product must never require a Visitor account.

Access boundary. Landing, Sign Up, Login, and Unlock are reachable without an existing session. Create Link is the only destination that requires the Link Creator to be verified, because it operates on durable creator-owned state. Sign Up and Login are themselves anonymous entry surfaces — a protected destination cannot own the interaction that grants access to itself.

Current vs. future. Everything described in this document is current. The free version is the complete current product. No paid capability, no billing surface, and no adjacent account-management module is part of the current or planned scope.

Provider and external boundaries. Social platforms (YouTube, TikTok, Spotify, Discord, and the wider set of integrations) are external destinations. The product links out to them and records that a step was completed; it does not own their authentication, their content, or their APIs beyond the link-out and the completion signal. Email lists are first-party data captured during unlock.

Page 4 of 42

2b. Source Content Inventory

The reference directive for rekonise.com declares feature_reference and structure_reference uses only — no content_source. No Source Content Inventory is therefore included.

2c. Page Content and Component Coverage

Landing

Information and state. Anonymous public entry. Headline "Control access to your content and grow your audience". Feature sections grouped under Social Actions, Audience Insights, Email Capturing, Integrations, Analytics, Link-in-Bio, Custom URLs, Ad-Free Links, Expiring Content, Bypass Protection. Trust section: "Trusted by 101K+ content creators who gained 664M+ followers". Testimonials with creator quotes and metrics. Repeated "Get started for free" calls to action.

Primary actions. "Create my first link" (primary CTA, routes to Sign Up when unauthenticated, Create Link when verified). "Sign up free". "Sign in". "How it works" (in-page anchor to the feature sections).

Supporting actions. Navigate feature sections; read testimonials; follow the repeated CTA after the feature list.

Domain entities. Feature category, capability, testimonial, trust metric, integration platform.

Page 5 of 42

Component responsibilities.

  • Top navigation: wordmark left; "How it works / Sign up free / Sign in" right.
  • Hero: headline block, primary CTA, secondary outlined CTA, metadata rail (trusted-by count, followers gained, integration count).
  • Numbered feature sections (01 Social Actions, 02 Audience Insights, …), each with heading, subheading, and capability list.
  • Social Actions section: grouped actions Subscribe, Join, Follow.
  • Email Capturing section: email collected plus segmentation lists (Newsletter, VIP, Beat Buyers).
  • Integrations section: platform examples (YouTube, TikTok, Spotify, Discord) with a "+64 more" indicator.
  • Custom URL Manager section: example rows of rekonise.com/your-name/custom-name with click counts.
  • Analytics section: unlock-today, total unlocks, views, conversion percentage, per-day chart.
  • Testimonials section: creator quotes and metrics.
  • Footer: dense ruled index of links in three columns.

States. Loading: skeleton rules for feature sections. Empty: not applicable (static marketing content). Success: full render. Error: if feature content fails to load, render the headline, hero CTAs, and navigation so the entry path stays usable, with an inline retry. Recovery: retry re-fetches feature content without losing scroll position.

Page 6 of 42

Sign Up

Information and state. Anonymous enrollment surface for a person who wants to create durable shareable links. Explains that the product is free and that no payment is ever required.

Primary actions. Submit enrollment (email + password). Navigate to Login if already enrolled.

Supporting actions. Read the free-version statement; correct invalid input.

Domain entities. Creator account, credential, enrollment attempt.

Component responsibilities.

  • Enrollment form: email field, password field, submit control.
  • Free-version statement: explicit "free, no payment" copy.
  • Cross-link to Login.
  • Inline validation messaging per field.

States. Loading: submit control in progress state, form disabled. Empty: pristine form. Success: enrollment accepted, session established, routed to Create Link. Error: invalid email, weak password, or already-registered email — each shown inline against the offending field, form re-enabled, entered values preserved. Recovery: correct the field and resubmit; or follow the cross-link to Login if the account already exists.

Page 7 of 42

Login

Information and state. Anonymous returning-verification surface for a Link Creator who already enrolled and needs to continue controlling previously created durable links.

Primary actions. Submit credentials. Navigate to Sign Up if not yet enrolled.

Supporting actions. Correct invalid input; retry after a failed attempt.

Domain entities. Creator account, credential, verification attempt.

Component responsibilities.

  • Verification form: email field, password field, submit control.
  • Cross-link to Sign Up.
  • Inline error messaging.

States. Loading: submit control in progress state, form disabled. Empty: pristine form. Success: verification accepted, session established, routed to Create Link. Error: unrecognized credentials — a single non-enumerating message, form re-enabled, email value preserved. Recovery: retry, or follow the cross-link to Sign Up.

Page 8 of 42

Create Link

Information and state. Verified Link Creator's working surface. Shows the creator's namespace, the configured unlock link, its required social actions, its target destination, its expiry setting, and its performance figures (clicks, unlocks, views, conversion percentage, unlock-today, total unlocks, per-day chart). Lists the creator's custom URLs with per-link click counts. Lists captured email subscribers grouped by segment.

Primary actions. Configure required social actions and target URL; create the unlock link; copy the shareable link; set an expiry; view per-link click counts; view unlock metrics; view captured email segments.

Supporting actions. Add or remove a required social action; adjust the target URL; change the expiry; revisit a previously created link.

Domain entities. Unlock link, custom URL, namespace, required social action, target URL, expiry setting, click, unlock, view, conversion rate, email subscriber, segment.

Component responsibilities.

  • Link configuration panel: required social actions (Subscribe, Join, Follow), target URL field, expiry setting, create control.
  • Shareable link display: the resolved rekonise.com/your-name/custom-name URL with a copy control.
  • Custom URL manager: ruled index of the creator's links, each row showing the URL and its click count.
  • Audience Insights panel: unlock today, total unlocks, views, conversion percentage, per-day chart.
  • Email subscribers panel: captured emails grouped by segment (Newsletter, VIP, Beat Buyers).
  • Empty state for a creator with no links yet.
Page 9 of 42

States. Loading: ruled skeleton rows for the link index and metrics. Empty: no links yet — the configuration panel is the only active surface, with a prompt to create the first link. Success: link created, shareable URL shown with copy control, row appears in the custom URL index. Error: invalid target URL or no social action selected — inline message, configuration preserved. Recovery: correct the configuration and resubmit; previously created links remain intact and listed.

Page 10 of 42

Unlock

Information and state. Anonymous surface reached by opening a shared unlock link. Shows the required social actions as a ruled checklist, a live progress counter (e.g. "Unlock progress 0/3 done"), and a per-step completion indicator. Ad-free: no distractions before unlock. If the link has expired, shows an expiry state instead of the checklist.

Primary actions. Complete each required social action; submit an email when the link captures emails; activate Unlock once all steps are complete; reach the destination.

Supporting actions. Re-open a social action if it was not registered; correct an invalid email.

Domain entities. Unlock link, required social action, step completion, progress count, captured email, segment, destination URL, expiry.

Component responsibilities.

  • Ruled checklist: one full-width row per required social action, with a completion indicator per row.
  • Progress counter: live "n/m done" figure.
  • Email capture field: shown when the link captures emails, with segment assignment.
  • Unlock control: appears only when all steps are complete.
  • Destination handoff: reveals and routes to the target URL.
  • Expiry state: replaces the checklist when the link's time limit has passed.
Page 11 of 42

States. Loading: checklist skeleton with progress counter at 0. Empty: not applicable. Success: all steps complete, Unlock appears, destination reached. Error: a step not registered, or an invalid email — inline message, completed steps preserved. Recovery: re-open the unregistered action, or correct the email and resubmit; progress is not lost. Expired: a clear expiry message with no unlock path.

Page 12 of 42

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Landing value proposition (explicit) As a Visitor, I should land on a public page that states what the product does — control access to your content and grow your audience — so that I understand the offer before doing anything else.

  • Trigger: opening the site root.
  • Observable result: headline, feature sections, trust metrics, and CTAs render.
  • Access: anonymous.
  • Failure/recovery: if feature content fails, headline and CTAs still render with an inline retry.
  • Continuation: follow a CTA into Sign Up or an unlock link.

FR-2 — Landing feature sections (explicit) As a Visitor, I should see the product's capabilities grouped under Social Actions, Audience Insights, Email Capturing, Integrations, Analytics, Link-in-Bio, Custom URLs, Ad-Free Links, Expiring Content, and Bypass Protection, so that I can judge whether it fits my needs.

  • Trigger: scrolling the Landing page.
  • Observable result: each named section renders with its heading, subheading, and capability list.
  • Access: anonymous.
  • Failure/recovery: inline retry per section.
  • Continuation: reach the repeated "Get started for free" CTA.
Page 13 of 42

FR-3 — Landing trust and testimonials (explicit) As a Visitor, I should see "Trusted by 101K+ content creators who gained 664M+ followers" and creator testimonials with quotes and metrics, so that I can trust the product.

  • Trigger: scrolling to the trust section.
  • Observable result: trust metric and testimonial entries render.
  • Access: anonymous.
  • Failure/recovery: section omitted gracefully if unavailable; the rest of the page remains usable.
  • Continuation: continue to the CTA.

FR-4 — Landing navigation (explicit) As a Visitor, I should see a minimal navigation with "How it works", "Sign up free", and "Sign in", so that I can move to the action I want.

  • Trigger: page load.
  • Observable result: navigation renders with those three entries plus the wordmark.
  • Access: anonymous.
  • Failure/recovery: navigation is static and always renders.
  • Continuation: "How it works" anchors to the feature sections; "Sign up free" routes to Sign Up; "Sign in" routes to Login.
Page 14 of 42

FR-5 — Primary landing CTA (explicit) As a Visitor, I should be able to click "Create my first link" to begin the setup workflow for a social-unlock link.

  • Trigger: clicking "Create my first link".
  • Observable result: an unauthenticated visitor is routed to Sign Up; a verified Link Creator is routed to Create Link.
  • Access: anonymous entry, converging on the correct destination by session state.
  • Failure/recovery: if routing fails, the CTA remains clickable and retries.
  • Continuation: complete enrollment, then configure the link.

FR-6 — Self-service enrollment (required_inference) As a Link Creator, I should be able to enroll myself with an email and password so that I can create durable shareable links.

  • Trigger: submitting the enrollment form on Sign Up.
  • Observable result: enrollment accepted, session established, routed to Create Link.
  • Access: anonymous entry surface.
  • Failure/recovery: invalid email, weak password, or already-registered email shown inline; entered values preserved; the visitor may cross-link to Login.
  • Continuation: configure the first unlock link.
Page 15 of 42

FR-7 — Returning verification (required_inference) As a Link Creator, I should be able to verify myself on return so that I can continue controlling the durable links I already created.

  • Trigger: submitting credentials on Login.
  • Observable result: verification accepted, session established, routed to Create Link with my existing links listed.
  • Access: anonymous entry surface.
  • Failure/recovery: a single non-enumerating error message; form re-enabled; email preserved; cross-link to Sign Up.
  • Continuation: manage existing links or create a new one.

FR-8 — Configure a social-unlock link (explicit) As a Link Creator, I should be able to configure the required social actions and the target URL for a link so that viewers must complete those actions before reaching the destination.

  • Trigger: submitting the configuration on Create Link.
  • Observable result: the link is created and its shareable URL is displayed.
  • Access: verified Link Creator.
  • Failure/recovery: invalid target URL or no social action selected produces an inline message and preserves the configuration.
  • Continuation: copy and share the link.
Page 16 of 42

FR-9 — Social action types (explicit) As a Link Creator, I should be able to require actions such as Subscribe, Join, and Follow, so that the unlock matches the platform I am growing on.

  • Trigger: selecting actions in the configuration panel.
  • Observable result: selected actions appear as the link's required steps.
  • Access: verified Link Creator.
  • Failure/recovery: deselecting an action removes it from the requirement before creation.
  • Continuation: create the link.

FR-10 — Durable link persistence and resolution (required_inference) As a Link Creator, I should have my created links persisted and resolvable so that a shared link keeps working after I leave the page.

  • Trigger: link creation; later, a Visitor opening the shared URL.
  • Observable result: the back end stores the link and resolves it to the correct unlock configuration on open.
  • Access: creation requires a verified Link Creator; resolution is anonymous.
  • Failure/recovery: an unresolvable or unknown link shows a clear not-found state rather than a broken page.
  • Continuation: the Visitor proceeds through the unlock checklist.
Page 17 of 42

FR-11 — Custom URLs under the creator namespace (explicit) As a Link Creator, I should be able to set a branded custom URL under my namespace (e.g. rekonise.com/your-name/custom-name) so that my links look clean and on-brand.

  • Trigger: setting the custom name during configuration.
  • Observable result: the shareable URL uses my namespace and custom name.
  • Access: verified Link Creator.
  • Failure/recovery: a name already taken produces an inline message and preserves the rest of the configuration.
  • Continuation: copy and share the link.

FR-12 — Per-link click tracking (explicit) As a Link Creator, I should see a click count per link so that I know which links are being opened.

  • Trigger: opening Create Link.
  • Observable result: each row in the custom URL index shows its click count.
  • Access: verified Link Creator.
  • Failure/recovery: if metrics fail to load, the link rows still render with a placeholder count and an inline retry.
  • Continuation: compare links and adjust.
Page 18 of 42

FR-13 — Audience Insights metrics (explicit) As a Link Creator, I should see unlock today, total unlocks, views, conversion percentage, and a per-day chart so that I can judge how my links perform in real time.

  • Trigger: opening Create Link.
  • Observable result: the metrics panel renders those figures and the per-day chart.
  • Access: verified Link Creator.
  • Failure/recovery: metrics panel shows an inline retry; the rest of the page stays usable.
  • Continuation: adjust the link configuration based on performance.

FR-14 — Email capturing during unlock (explicit) As a Link Creator, I should be able to have viewer emails captured during the unlock so that I build my audience while people unlock.

  • Trigger: a Visitor submitting the email field on the Unlock page.
  • Observable result: the email is stored and assigned to the link's segment.
  • Access: anonymous for the Visitor; visible to the verified Link Creator.
  • Failure/recovery: an invalid email shows an inline message and preserves completed steps.
  • Continuation: the Visitor continues the unlock; the creator sees the subscriber in the segment list.
Page 19 of 42

FR-15 — Email segmentation (explicit) As a Link Creator, I should see captured emails grouped into segments such as Newsletter, VIP, and Beat Buyers so that I can target them differently.

  • Trigger: opening Create Link.
  • Observable result: the subscribers panel lists captured emails grouped by segment.
  • Access: verified Link Creator.
  • Failure/recovery: empty segments render an empty state rather than disappearing.
  • Continuation: use the segments for future sends.

FR-16 — Multi-platform integrations (explicit) As a Link Creator, I should be able to require actions on multiple social platforms — YouTube, TikTok, Spotify, Discord, and more — managed in one place, so that I grow across the platforms I actually use.

  • Trigger: selecting platforms in the configuration panel.
  • Observable result: the selected platforms appear as required steps on the unlock link.
  • Access: verified Link Creator.
  • Failure/recovery: an unavailable platform is shown as unavailable rather than silently dropped.
  • Continuation: create the link.
Page 20 of 42

FR-17 — Link-in-Bio profile page (explicit) As a Link Creator, I should be able to present a profile page with all my links and socials in one place so that my audience has a single destination.

  • Trigger: opening the profile page from the creator's namespace.
  • Observable result: the profile page renders the creator's links and socials.
  • Access: anonymous for viewers.
  • Failure/recovery: an unknown namespace shows a clear not-found state.
  • Continuation: viewers follow a link or a social.

FR-18 — Ad-free locked pages (explicit) As a Visitor, I should see a locked page with no ads or distractions before unlock so that the only thing in front of me is the unlock step.

  • Trigger: opening a shared unlock link.
  • Observable result: the Unlock page renders the checklist with no advertising or promotional content.
  • Access: anonymous.
  • Failure/recovery: not applicable — the ad-free property is a rendering constraint.
  • Continuation: complete the steps.

FR-19 — Expiring content (explicit) As a Link Creator, I should be able to set a time limit on a link's access so that I can create urgency.

  • Trigger: setting the expiry during configuration.
  • Observable result: the link stops unlocking after the set time.
  • Access: verified Link Creator sets it; anonymous Visitor experiences it.
  • Failure/recovery: an expired link shows a clear expiry state instead of the checklist.
  • Continuation: the creator can create a new link; the Visitor has no unlock path on the expired one.
Page 21 of 42

FR-20 — Unlock progress display (explicit) As a Visitor, I should see my progress as I complete the required actions (e.g. "Unlock progress 0/3 done") so that I know how much is left.

  • Trigger: opening the unlock link and completing steps.
  • Observable result: the progress counter updates as each step completes.
  • Access: anonymous.
  • Failure/recovery: if a step is not registered, an inline message appears and completed steps are preserved.
  • Continuation: complete the remaining steps.

FR-21 — Unlock only when all steps are complete (explicit) As a Visitor, I should see the Unlock button appear only once every required step is done, so that the gate is real.

  • Trigger: completing the final required step.
  • Observable result: the Unlock control becomes available and reveals the destination.
  • Access: anonymous.
  • Failure/recovery: if a step later fails validation, the Unlock control is withdrawn and the step is marked incomplete.
  • Continuation: reach the destination.

FR-22 — No viewer account required (explicit) As a Visitor, I should be able to complete the unlock without creating an account so that nothing stands between me and the content.

  • Trigger: opening a shared unlock link.
  • Observable result: the entire unlock workflow completes with no sign-up or login prompt.
  • Access: anonymous.
  • Failure/recovery: not applicable — no identity step exists to fail.
  • Continuation: reach the destination.
Page 22 of 42

FR-23 — Bypass Protection (explicit) As a Link Creator, I should have unlock completion validated server-side so that bypass scripts and extensions cannot skip the required steps.

  • Trigger: a Visitor attempting to unlock.
  • Observable result: the back end validates that all required steps were completed before releasing the destination.
  • Access: anonymous for the Visitor; the validation is a system responsibility.
  • Failure/recovery: an unvalidated unlock attempt is refused and the checklist shows the incomplete step.
  • Continuation: the Visitor completes the step legitimately.

FR-24 — Free version only (explicit) As a Visitor or Link Creator, I should never encounter a payment, a paid tier, or an upgrade prompt, so that the free version is genuinely free.

  • Trigger: any interaction with the product.
  • Observable result: no billing surface, no price, no upgrade control renders anywhere.
  • Access: all surfaces.
  • Failure/recovery: not applicable — the absence is the requirement.
  • Continuation: all workflows complete without payment.

4. User Personas

Page 23 of 42

Visitor

Product context. The Visitor arrives from a shared unlock link, usually on a phone, usually with a specific piece of content in mind. They did not come to use a product; they came to get past a door. They have no account, no history with the site, and no patience for friction.

Primary goal. Reach the destination content by completing the required social actions, without paying anything and without creating an account.

Distinct accepted responsibilities.

  • Open a shared unlock link and read the required actions.
  • Complete each required social action (subscribe, follow, join) on the external platform.
  • Watch the progress counter advance and know how many steps remain.
  • Submit an email when the link captures emails.
  • Activate Unlock once every step is complete and reach the destination.

Relevant inputs or decisions. Which action to complete next; whether to hand over an email address; whether to abandon if the gate feels unreasonable.

Interactions with other accepted participants. The Visitor is the counterparty to the Link Creator's gate. The Link Creator configured the steps the Visitor must complete; the Visitor's completion is what the Link Creator later sees as an unlock. The Visitor never interacts with the Link Creator directly.

Observable success. The Unlock control appears, the destination is reached, and the Visitor never saw a payment prompt or an account prompt.

Page 24 of 42

What makes this role different. The Visitor is the only participant who never establishes identity and never owns durable state. Their entire lifecycle is ephemeral and anonymous — the product must work for someone who will never return and never sign in.

Page 25 of 42

Link Creator

Product context. The Link Creator is a content creator, musician, or streamer who wants to grow an audience by gating content behind social actions. They work from a sparse, single-column dashboard, not a dense analytics tool. They care about whether the link works and how many people got through it.

Primary goal. Produce a working shareable unlock link and know that recipients can open it and complete it.

Distinct accepted responsibilities.

  • Enroll once, then verify on return to keep controlling previously created links.
  • Configure the required social actions and the target URL.
  • Set a branded custom URL under their namespace.
  • Set an expiry when they want urgency.
  • Copy and share the resulting link.
  • Monitor clicks, unlocks, views, conversion, and the per-day chart.
  • Review captured emails grouped by segment.

Relevant inputs or decisions. Which social actions to require; what the target URL is; what custom name to use; whether to set an expiry; which segment captured emails belong to.

Interactions with other accepted participants. The Link Creator configures the gate that the Visitor must pass. The Visitor's completions become the creator's unlock metrics and captured subscribers. The creator never interacts with the Visitor directly.

Page 26 of 42

Observable success. A shared link that a recipient can open, complete, and pass through — with the creator able to see the resulting clicks and unlocks.

What makes this role different. The Link Creator is the only participant with durable, privately owned state: their links, their namespace, their metrics, their subscriber lists. That ownership is exactly why enrollment and returning verification exist, and why Create Link is the only protected destination.

5. Core User Flows

Page 27 of 42

Flow A — Visitor completes an unlock (Visitor)

  1. Starting context. The Visitor has a shared unlock link and opens it on their phone. They are not signed in and have no account.
  2. Open the link. The Unlock page loads and resolves the link. The Visitor sees a ruled checklist of the required social actions and a live progress counter reading "Unlock progress 0/3 done". The page carries no ads or promotional content.
  3. Read the requirements. The Visitor sees each required action as its own full-width row with a completion indicator.
  4. Complete the first action. The Visitor taps the first row and is taken to the external platform (YouTube, TikTok, Spotify, Discord, or another) to subscribe, follow, or join. They return to the Unlock page.
  5. Progress updates. The first row's indicator fills and the counter advances to "1/3 done".
  6. Complete the remaining actions. The Visitor repeats steps 4–5 for the second and third actions. The counter reaches "3/3 done".
  7. Email capture (when the link captures emails). Before the final step, the Visitor is asked for an email address. They enter it and submit. The email is stored and assigned to the link's segment. If the address is invalid, an inline message appears and their completed steps are preserved.
  8. Unlock appears. Only now does the Unlock control appear. The Visitor activates it.
  9. Server validation. The back end validates that all required steps were genuinely completed. If validation fails — for example a bypass script tried to skip a step — the unlock is refused and the incomplete step is marked again.
  10. Destination reached. The destination URL is revealed and the Visitor is routed to it.
Page 28 of 42
  1. Failure and recovery. If a step was not registered, an inline message appears and the Visitor can re-open that action; progress is never lost. If the link has expired, the checklist is replaced by a clear expiry state and there is no unlock path.
  2. Continuation. The Visitor has the content. They may encounter another unlock link later and repeat the flow — still without an account.
Page 29 of 42

Flow B — Link Creator enrolls and creates a first link (Link Creator)

  1. Starting context. A creator lands on the Landing page, reads the headline and the numbered feature sections, and decides to try it.
  2. Enter the workflow. They click "Create my first link". Because they are not yet verified, they are routed to Sign Up.
  3. Enroll. On Sign Up they enter an email and a password and submit. The page states plainly that the product is free and that no payment is required. If the email is invalid, the password is weak, or the email is already registered, an inline message appears against the offending field and their input is preserved.
  4. Enrollment accepted. A session is established and they are routed to Create Link.
  5. Configure the gate. On Create Link they select the required social actions — Subscribe, Join, Follow, and platforms such as YouTube, TikTok, Spotify, or Discord. They enter the target URL.
  6. Brand the link. They set a custom name so the link reads rekonise.com/your-name/custom-name. If the name is already taken, an inline message appears and the rest of the configuration is preserved.
  7. Set urgency (optional). They set an expiry so the link stops unlocking after a chosen time.
  8. Create. They submit. The link is persisted by the back end and its shareable URL is displayed with a copy control.
  9. Share. They copy the link and share it with their audience.
  10. Failure and recovery. If the target URL is invalid or no social action was selected, an inline message appears and the configuration is preserved so they can correct and resubmit. Previously created links remain intact and listed.
  11. Continuation. They move to Flow C to watch the link perform.
Page 30 of 42

Flow C — Link Creator monitors performance and audience (Link Creator)

  1. Starting context. The Link Creator has shared a link and returns to Create Link, either in the same session or after verifying again on Login.
  2. See the link index. The custom URL manager lists their links as ruled rows, each showing the URL and its click count.
  3. Read the metrics. The Audience Insights panel shows unlock today, total unlocks, views, conversion percentage, and a per-day chart.
  4. Review captured emails. The subscribers panel lists captured emails grouped into segments such as Newsletter, VIP, and Beat Buyers. Empty segments show an empty state rather than disappearing.
  5. Act on the result. Based on the figures, the creator adjusts the required actions, the target URL, or the expiry, or creates an additional link.
  6. Failure and recovery. If metrics fail to load, the link rows still render with a placeholder count and an inline retry; the rest of the page stays usable.
  7. Continuation. The creator shares the link further or creates the next one.

Flow D — Link Creator returns and verifies (Link Creator)

  1. Starting context. A creator who enrolled earlier comes back to manage links they already created.
  2. Verify. They open Login and submit their email and password.
  3. Verification accepted. A session is established and they are routed to Create Link with their existing links listed.
  4. Failure and recovery. If the credentials are not recognized, a single non-enumerating message appears, the form is re-enabled, and the email value is preserved. They can retry or cross-link to Sign Up.
  5. Continuation. They continue in Flow C.
Page 31 of 42

Flow E — Visitor reaches a creator's Link-in-Bio profile (Visitor)

  1. Starting context. A Visitor opens a creator's namespace profile page.
  2. View the profile. The page renders the creator's links and socials in one place.
  3. Choose. The Visitor follows a link or a social.
  4. Failure and recovery. An unknown namespace shows a clear not-found state rather than a broken page.
  5. Continuation. If the chosen link is a social-unlock link, the Visitor continues in Flow A.
Page 32 of 42

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Tobias van Schneider. Headline idea: editorial swagger for a link-unlock product — oversized type, black ground, one acid signal.

Colour tokens (dark mode)

RoleTokenHex
Background--bg#0B0B0C
Surface--surface#141416
Hairline rule--rule#2A2A2C
Text (primary)--text#F4F1EA
Primary (type / unlocked state)--primary#F4F1EA
Accent (the only colour)--accent#FF3B1F
Muted (labels, counts, metadata)--muted#8A877F

Black ground carries roughly 70% of every screen. Warm off-white is the type and the "unlocked" state. Vermilion is rationed: it marks the single live action on a screen — "Create my first link", "Unlock", the active progress step, the numbered section numerals. Surfaces are flat hairline-bordered panels, never glass. No blue, no indigo, no gradients, no glassmorphism.

Typography

Page 33 of 42
  • Headings: Archivo Black, weight 400 only, uppercase, tracking -0.03em, leading 0.88. Headlines run to 128px desktop and may break mid-word across two or three stacked lines.
  • Numbers and metrics: Archivo Black as well, so counts read as editorial figures rather than UI chips.
  • Body: Archivo 400/500 at 17px with 1.6 line-height.
  • Micro-labels: Archivo 600 uppercase 12px, tracking 0.14em.
  • Display scale (1.5 modular): 128 / 88 / 56 / 32 / 20 / 16 desktop; 56 / 40 / 28 / 20 / 16 / 14 mobile.

Shape language. Sharp corners everywhere — 0px radius on cards, inputs, and buttons. 1px hairline rules instead of shadows. The only soft shape in the system is the circular progress ring on unlock steps. Panels are hard-edged rectangles that butt against each other like a magazine spread. The CTA is a solid vermilion rectangle, never a pill.

Layout. Asymmetric editorial grid: 12 columns, content deliberately off-centre with a 9-column headline block pushed left and a 3-column metadata rail on the right. Sections are separated by full-width hairline rules and numbered like a magazine contents page (01 Social Actions, 02 Audience Insights, …). Feature sections alternate between a full-bleed type block and a two-column text-plus-interface-panel arrangement. The dashboard is a single-column stack of ruled rows — no card grid, no tile wall. The footer is one dense ruled index of links in three columns.

Imagery. Large-scale monochrome photography of creators at work — a hand on a fader, a mic in low light, a phone screen glowing in a dark room — cropped hard and bled off the left or right edge, treated with a heavy black-and-white grade and one duotone pass in vermilion for the hero image only. No stock smiling people, no illustration, no 3D blobs. Dashboard panels are the second imagery: real interface, rendered flat on black.

Page 34 of 42

Accessibility. Readable text and controls stay whole at 375px, 768px, and 1280px — headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container, wrapping or scaling (e.g. font-size: clamp(...) with its mobile size) to fit. Imagery and decoration may bleed, crop, or overlap; readable text and controls may not.

7. Signature Design Concept

The poster that is also a door.

The Landing page is a full-viewport black poster. The headline "CONTROL ACCESS TO YOUR CONTENT" is set in Archivo Black at clamp(56px, 11vw, 128px), stacked over three lines in a 9-column block, flush left, with the words ACCESS and CONTENT knocked out in vermilion while the rest stays off-white. Under it sits a single vermilion rectangle CTA — "Create my first link" — pinned flush to the left grid edge, with "Sign up free" as a hairline-outlined rectangle beside it. The right 3 columns hold a vertical ruled rail: "Trusted by 101K+ creators", "664M+ followers gained", "70+ integrations" as stacked label/value pairs. Behind the headline, a black-and-white duotone photograph of a creator's hands on a phone bleeds off the right edge at 40% opacity, cropped so it never touches the type. The nav is a single hairline row: wordmark left, "How it works / Sign up free / Sign in" right, 14px uppercase.

The concept carries through the product as a set of signature moves:

Page 35 of 42
  • Oversized headline spanning 9 of 12 columns, breaking across three lines, with two key words knocked out in vermilion.
  • Numbered editorial section headers — a hairline rule, a 12px vermilion numeral (01, 02, 03…), then the feature name in uppercase — so the feature list reads like a magazine contents page rather than a card grid.
  • The Unlock page as a ruled checklist — each social action is a full-width row with a hairline divider, a 32px circular progress ring on the right that fills vermilion as steps complete, and a live "0/3 done" counter. The Unlock button is a flat vermilion rectangle that only appears when the ring closes.
  • Analytics as editorial figures — "1,204 unlocks" set in Archivo Black at 56px with a small muted label beneath, and a single ruled bar row per day instead of a gradient area chart.
  • Custom URL manager as a ruled index — each row is rekonise.com/your-name/custom-name in Archivo 500 with the click count right-aligned in Archivo Black, separated by hairlines; no card, no hover lift, just the row inverting to off-white-on-vermilion on hover.

This concept only recomposes accepted content, states, and controls. It introduces no new behavior, page, or destination.

Page 36 of 42

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject. The duotone photograph of a creator's hands on a phone, bleeding off the right edge at 40% opacity, cropped so it never touches the type.
  • Input → transformation → outcome thesis. On load, the three headline lines clip up from below in a staggered 80ms sequence; the vermilion words settle last. The photograph crossfades in behind the type. The outcome is a composed first frame in which the headline is fully readable and the CTAs are already live — motion never delays the entry path.
  • Motion vocabulary. Restrained and editorial: headline lines reveal by clipping up from below (staggered 80ms); images crossfade on hover instead of lifting; the unlock progress ring fills with a 400ms ease-out; numbers count up once when they enter the viewport. No bounce, no float, no parallax blobs.
  • Composed first frame. Black ground, three stacked headline lines flush left in a 9-column block, vermilion rectangle CTA pinned to the left grid edge, hairline-outlined secondary CTA beside it, and the 3-column metadata rail on the right — all readable before any motion runs.
  • Reduced-motion state. prefers-reduced-motion collapses all of it to instant state changes: headline and photograph appear immediately, the progress ring jumps to its filled state, and numbers render at their final values.
Page 37 of 42

9. Non-Functional Requirements

NFR-1 — Full-stack delivery (explicit) The product must be implemented as a full stack: a front end and a back end. Rationale: explicit user constraint.

NFR-2 — Free version only (explicit) No payment, billing, paid tier, or upgrade capability may be implemented anywhere in the product. Rationale: explicit user constraint and hard scope boundary.

NFR-3 — Durable persistence (required_inference) Created unlock links, their configuration, their click and unlock counts, and captured emails must survive process restarts. Rationale: a shared link must keep working after the creator leaves the page, and metrics must accumulate.

NFR-4 — Server-side unlock validation (explicit) Unlock completion must be validated on the server so that bypass scripts and extensions cannot skip required steps. Rationale: explicit Bypass Protection capability.

NFR-5 — Anonymous unlock path (explicit) The unlock workflow must complete without any viewer account, sign-up, or login. Rationale: explicit "no viewer account required" behavior.

NFR-6 — Ad-free locked pages (explicit) The Unlock page must render no advertising or promotional content before unlock. Rationale: explicit Ad-Free Links capability.

Page 38 of 42

NFR-7 — Mobile-first readability (required_inference) Readable text and controls must stay whole and inside the viewport at 375px, 768px, and 1280px. Rationale: the audience is mobile-first and attention-poor; the creative direction makes this an explicit constraint.

NFR-8 — Reduced-motion support (required_inference) All motion must collapse to instant state changes under prefers-reduced-motion. Rationale: accessibility baseline for the directed motion system.

NFR-9 — Non-enumerating credential errors (required_inference) Login failures must not reveal whether an email is registered. Rationale: standard protection for the application-owned identity the product requires.

10. Tech Stack

  • Front end: React (web).
  • Back end: Python with FastAPI, extending a single shared backend process for all API routes and domain modules.
  • Storage: a relational database for creator accounts, unlock links, custom URLs, clicks, unlocks, views, expiry settings, and captured emails with segments.
  • Containerization: Docker with docker-compose.yml as the inventory of runnable services — the front end and the backend, with the database as a service.
  • Kubernetes: not required for this deployment.

No source-specified technology was overridden; the stack above follows the full-stack constraint and the standard service boundary of one shared backend.

Page 39 of 42

11. Assumptions and Constraints

Assumptions

  • A1 (required_inference): The Link Creator's identity is application-owned, because durable links, metrics, and subscriber lists must remain bound to the correct creator across sessions.
  • A2 (required_inference): Sign Up and Login are anonymous entry surfaces; Create Link is the only destination requiring verification.
  • A3 (required_inference): Social platforms are external destinations. The product links out to them and records step completion; it does not own their authentication or content.
  • A4 (required_inference): Email segments (Newsletter, VIP, Beat Buyers) are first-party data captured during unlock.
  • A5 (required_inference): The "+64 more" integrations figure is presented as a marketing claim on the Landing page; the concrete platform set available for selection is the set the product actually supports.

Constraints

Page 40 of 42
  • C1 (explicit): Free version only — no pay or paid features may be implemented.
  • C2 (explicit): Full-stack implementation is required (front end and back end).
  • C3 (explicit): No viewer account may be required to interact with or unlock content.
  • C4 (explicit): Unlock completion must be validated server-side.
  • C5 (explicit): Locked pages must be ad-free.
  • C6 (creative direction): No blue or indigo anywhere in the palette; the only colour is vermilion #FF3B1F. No rounded cards, pill buttons, soft shadows, or glassmorphism. No grid of identical hover-lift feature cards. No centred headline-plus-subtext-plus-button SaaS hero. No gradient blobs or particle fields. No stock smiling-people photography or illustrated mascots. No Inter, Roboto, or Poppins for headings. No dense dashboard chrome — no sidebar trees, no filter bars, no sparkline clutter.
Page 41 of 42

12. Glossary

  • Unlock link — a durable, shareable URL that gates a destination behind required social actions.
  • Social action — a required step a Visitor must complete on an external platform (subscribe, follow, join) before unlocking.
  • Unlock — the act of revealing and routing to the destination after all required steps are validated.
  • Progress counter — the live "n/m done" figure shown on the Unlock page.
  • Custom URL — a branded link under the creator's namespace, e.g. rekonise.com/your-name/custom-name.
  • Namespace — the creator-owned path segment under which their custom URLs live.
  • Audience Insights — the metrics surface showing unlock today, total unlocks, views, conversion percentage, and a per-day chart.
  • Segment — a named group of captured emails, such as Newsletter, VIP, or Beat Buyers.
  • Link-in-Bio — a profile page presenting a creator's links and socials in one place.
  • Expiring content — a link setting that stops unlocking after a chosen time.
  • Bypass Protection — server-side validation that prevents scripts or extensions from skipping required unlock steps.
  • Ad-Free locked page — an Unlock page rendered with no advertising or promotional content before unlock.
  • Link Creator — the accepted human persona who enrolls, creates, shares, and monitors unlock links.
  • Visitor — the accepted human persona who opens a shared unlock link, completes the steps, and reaches the destination without an account.
Page 42 of 42

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View value proposition
Landing: Click create first link
Landing: Click sign in nav
Sign Up: 1. Enroll account
Sign Up: 2. Correct invalid input
Sign Up: 3. Cross-link to login
Login: 4. Verify credentials
Login: 5. Correct invalid credentials
Login: 6. Cross-link to sign up
Create Link: 1. Configure social actions
Create Link: 2. Set target url
Create Link: 3. Set custom url name
Create Link: 4. Correct taken custom name
Create Link: 5. Set expiry
Create Link: 6. Create link
Create Link: 7. Correct invalid configuration
Create Link: 8. Copy shareable link
Create Link: 9. View custom url index
Create Link: 10. View audience insights
Create Link: 11. Retry metrics load
Create Link: 12. View email subscribers
Create Link: 13. Adjust link configuration

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View value proposition
Landing: Click create first link
Landing: Click sign in nav
Sign Up: 1. Enroll account
Sign Up: 2. Correct invalid input
Sign Up: 3. Cross-link to login
Login: 4. Verify credentials
Login: 5. Correct invalid credentials
Login: 6. Cross-link to sign up
Create Link: 1. Configure social actions
Create Link: 2. Set target url
Create Link: 3. Set custom url name
Create Link: 4. Correct taken custom name
Create Link: 5. Set expiry
Create Link: 6. Create link
Create Link: 7. Correct invalid configuration
Create Link: 8. Copy shareable link
Create Link: 9. View custom url index
Create Link: 10. View audience insights
Create Link: 11. Retry metrics load
Create Link: 12. View email subscribers
Create Link: 13. Adjust link configuration