All build stories

04 / Product discovery / 2026

BedReads SEO Reader

Building the bridge between a search result, a free preview, and the mobile app.

A React reading experience supported by build-time SEO, shareable story pages, structured metadata, static AWS delivery, and a clear web-to-app journey.

seo-reader.portfolio.local
PRIMARY MEDIA PLACEHOLDER18–25 second video

Browse a safe public or synthetic story, read a free chapter, and reach the mobile-app call to action.

RoleFrontend contributor
StatusCompany product case study
Period2026
StackReact · TypeScript · Vite · Prerendering · S3 · CloudFront · Analytics

01 / Product problem

A good reader experience is invisible if search and social crawlers receive an empty shell.

The website needed to make stories discoverable, let visitors read a free preview, and provide a clear path into the native application.

Each story, genre, and tag also needed a stable URL with meaningful HTML, canonical metadata, Open Graph data, structured JSON-LD, and sitemap coverage.

02 / Contribution

My strongest contribution was the React product experience.

I worked on landing and discovery interfaces, responsive story and chapter reading flows, loading and error states, navigation, reading progress, paywall behavior, and the mobile-app handoff.

I also contributed to AI-assisted build scripts for prerendering and deployment. I describe that exposure honestly rather than presenting myself as a senior SEO or AWS specialist.

03 / Delivery approach

The build artifact carried both the interactive product and its discovery surface.

A production build fetched the catalog and generated route-specific HTML, canonical and social metadata, JSON-LD, robots instructions, and a sitemap. Static output was delivered through S3 and CloudFront with clean URL rewriting.

The important lesson was that SEO is a delivery concern, not just a collection of meta tags added inside a React component.

04 / Evidence boundary

This story documents my contribution without republishing company assets.

I no longer have access to company analytics, so I do not claim ranking, traffic, install, or conversion improvements. I also do not publish the repository, AWS identifiers, credentials, unpublished content, or internal API data.

Any screenshots or demo material used here should be public, explicitly permitted, or recreated with synthetic content.

System view

A simplified architecture to replace with the final diagram.

This intentionally describes boundaries without exposing credentials, internal hostnames, or company identifiers.

01Story API
02React reader
03Build-time prerender
04S3
05CloudFront

Evidence snapshot

What this story can honestly support.

Primary focusReact product UX
DiscoveryPrerender + sitemap
DeliveryS3 + CloudFront
BoundaryNo company source

Media shot list

Replace these cards with safe, deliberate proof.

Every placeholder states exactly what to capture. Use synthetic data and keep secrets, account identifiers, and private company material outside the frame.

18–25 second video

Reader journey

Browse a safe public or synthetic story, read a free chapter, and reach the mobile-app call to action.

Mobile screenshot

Mobile reading UI

Show typography, reading progress, theme controls, and the app CTA without admin or internal data.

Pipeline diagram

SEO delivery

Story API → build script → route HTML, metadata, and sitemap → S3 → CloudFront → crawler.

Public portfolio rule

Prove the work without exposing the environment.

All demos should use synthetic content, personal sandbox accounts, rotated credentials, and newly captured media. Never publish tokens, private keys, internal logs, production endpoints, Drive identifiers, or company-only source code.

Next build story

Taskie