Echo.
Click to visitShare your thoughts.
Choose your feed.
A social web application that makes the rules of a feed part of the interface.
Product · Interaction · Design systems
Frontend · Backend · Information retrieval
Who decides
what you read?
A feed is a set of decisions. Echo puts those decisions within reach of the reader.
Social feeds can show an endless result while leaving the reasons for selection and ordering unclear. Echo starts with a question: what if choosing how to read were one of the main features?
Readers name and save their own Feeds. One might gather design and typography. Another might collect a few selected writers. A third might revisit older posts. Each view holds an explicit intention, expressed through topics, authors, exclusions, dates, and ordering.
That is the premise behind the project. It is a design question explored through a working application, with reader research still ahead.
Keep a post.
Keep a rule.
Two different acts of selection. One organizing idea: the Scroll.
Curation
“This belongs together.”
A person adds specific Echos to a collection. Favorites, reading lists, and thematic groups grow one post at a time. The saved collection contains references to those posts.
Curations can be public or private. Adding and removing posts is supported; the current reading order is newest first. Manual reordering remains future work.
Feed
“Show me more like this.”
A person saves a set of conditions. The server retrieves matching Echos whenever the Feed is read. As new posts arrive, the result changes while the chosen rules persist.
Feeds can also be public or private. Sharing a Scroll shares a way of organizing information, alongside the individual posts.
A text post of up to 1,000 characters, with up to ten tags. Readers can like it, reply, save it to a Curation, or share its link. Replies allow 500 characters. Tags connect the act of publishing to the rules that make discovery possible.
A rule you
can read.
Show me design or typography,
leave out promotions,
put the newest first.
The builder supports any/all tag matching, exclusions, selected authors, custom dates, and newest, oldest, or most-liked ordering. Readers can also hide Echos they have already liked.
The sentence summary brings separate controls together before creation. Tags remain exact matches: excluding “promotions” only removes posts carrying that tag.
Control has to
be usable.
A first Feed, before commitment.
Onboarding narrows the full builder to tags and an order, then previews real posts before the Feed is saved. Eight suggestions are drawn from a larger tag pool. Shuffling changes the offer while keeping selected tags visible and selected.
Preview state stays local, so exploring a first Feed cannot overwrite the main reading view. The flow can be skipped and reopened. Completion is saved per account in the browser, so it can appear again on another device.
Choice stays close to reading.
A horizontal Feed selector sits in the desktop header and moves to the bottom edge on mobile. The drum measures the centers of names of different lengths, then commits a choice when movement settles. Passing several names during a flick produces one committed selection.
Keyboard operation supports another way to choose. Only Feeds appear here; Curations remain separate collections. A stable loading height keeps the surrounding layout in place.
Help arrives when it is asked for.
The composer expands with the writing. It shows the remaining character count and accepts tags separated by spaces or commas. Case is normalized and duplicates are removed, including an unfinished tag entry when the post is submitted.
Tag suggestions require a button press. Already-chosen tags are excluded, and weak matches can produce no suggestions. The author keeps the decision.
Complexity appears when it matters.
Any/all matching appears only after multiple tags have been chosen. Additional filters live in an expandable area. The summary remains a place to check the combined rule.
Search spans Echos, Scrolls, users, and tags. Public Scrolls and community tags offer starting points, and saved Scrolls make those choices easy to return to.
Paper.
Ink.
Interaction.
Echo’s visual system borrows the structure of an editorial page: readable columns, distinct type roles, fine rules, and space around an idea.
Type sets the hierarchy.
Playfair Display gives Echo’s headings their character. Inter handles reading text, controls, metadata, and rule summaries. Landing statements have room to be large; the everyday application uses a quieter scale. Tabular numerals keep changing counts steady.
Contrast gives color a job.
Paper is #f9f9f9 and ink is #1a1c1c. Secondary text and fine dividers establish the rest of the hierarchy. Dark fills mark stronger actions and selected states; red can mark errors. Flat surfaces and square corners keep the text central.
#f9f9f9Ink
#1a1c1cRule
#c4c7c7
Small controls still need room.
Post actions say “Like,” “Reply,” “Save,” and “More.” “Liked” exposes its state through words, an underline, and a programmatic pressed state. The action targets are 44px high. Dialogs trap and restore focus and support Escape. Empty states point toward the next useful action.
Motion has to survive real use.
The shared motion vocabulary includes drawing a rule, setting type into place, revealing controls, and transitioning a Feed after selection. Repeated Feed reveals use a bounded stagger, so longer lists do not take proportionally longer to appear.
Fonts load before headline measurement. Temporary animation wrappers are removed so headings can wrap again after a resize. Offscreen examples pause, and reduced-motion preferences provide quieter behavior. These details let movement coexist with reading.
The reader
chooses
the rules.
Echo’s earlier phrase “Ditch the Algorithm” needed a more exact explanation. Filtering, sorting, caching, and tag suggestions all use algorithms.
The question is who chooses the selection rules and whether those rules can be understood. Automation can help a person carry out a decision while leaving that decision in their hands.
Under
the surface.
- Interface
- React 19 · Vite · React Router
Zustand · Tailwind CSS 4 · DaisyUI 5 · GSAP - Server & data
- Express 5 · MongoDB · Mongoose
Cookie-based JWT authentication · bcrypt
One idea,
all the way down.
The backend separates Users, Echos, Tags, and Scrolls. A Feed persists its configuration. A Curation persists selected post references. The server translates a Feed’s configuration into MongoDB filters and sorting.
Domain-specific Zustand stores handle authentication, posts, Scrolls, search, profiles, and community data. The same reading model is carried from form controls through application state to the query that returns posts.
Accounts use usernames and passwords. The main interface requires sign-in. Email verification and account recovery are not implemented in the reviewed version.
The latest choice
must win.
Imagine choosing Feed A, then Feed B while A is still loading. If A finishes last, it must not replace B. Cancellation and request-version checks reject superseded results.
The cache holds the first page of up to eight Feeds for five minutes. Prefetching prepares likely next views. Recency is kept separate from freshness, so reopening a Feed does not keep extending the age of its content. Writes invalidate affected state; logout clears the cache.
These are bounded implementation choices. The source does not provide measured latency improvements.
Suggestions from
the writing itself.
Echo suggests existing tags using its stored corpus, without an external language-model service. Post text builds weighted vocabulary profiles for tags. TF–IDF weighting and cosine similarity compare a draft with those profiles.
Literal tag-name matches and co-occurrence provide additional signals. Ranking considers relevance, specificity, use, and references in public Feeds. An MMR-style step reduces redundant suggestions, and weak evidence can lead to no result.
Tag-name words are removed from content profiles so vocabulary association stays distinct from name matching. The in-memory index lasts five minutes and is invalidated when posts are created or deleted. Feed-reference counts offer context, not guaranteed audience reach.
It didn’t start
here.
More than a year of additions, reversals, and smaller decisions. Removal is part of this history.
Sep–Oct 2025
Build the whole loop.
Authentication, posts, profiles, likes, and tags established the foundation. Scrolls followed: Curations, private collections, author filtering, replies, and infinite scrolling. The idea became a working path from writing a post to finding it through a chosen rule.
The Tailwind and DaisyUI migration included upgrades, reversions, and another attempt. The history records the retries, without establishing the full cause of each one.
January 2026
Explain. Try. Remove.
The landing page, home Feed, forms, search, and Explore pages went through repeated changes. Hero and animation experiments were revised, removed, or reverted. Search added a direct route to content and people.
An effect can be worth removing even after time has been spent building it.
August 2026
Give the system one voice.
An editorial overhaul brought shared typography, framing, and motion into the landing and authentication pages. A horizontal drum made Feed selection a persistent part of navigation. Onboarding added a real-content preview before saving a first Feed.
The composer moved from five tags to ten. Profile bios, share feedback, and tag counts arrived. Standalone person-following and the Popular Echos page were removed, while most-liked Feed ordering remained.
October 2026
Make repeated use matter.
The two Scroll types received clearer explanations. Landing examples became easier to read. Onboarding tag discovery improved, and Feed caching and requested tag suggestions joined the system.
The work shifted toward explaining choices, reducing repeated requests, and helping with a small decision at the moment it is made.
Still
unfinished.
The next question is whether readers can understand, use, and revise the control Echo gives them.
The directions below are proposals based on the current product and its gaps. They are not completed features or fixed delivery commitments.
Make the promise exact.
Align remaining copy, stored rules, and returned posts. Clarify how custom dates intersect with most-liked windows. Today, those windows filter post creation dates and sort by total likes; they do not count only likes received in that period.
Explain the result.
Add “Why this Echo?” to show which conditions admitted a post. Explore editing existing rules with a preview, and copying a public Feed as a starting point.
Let collections carry an order.
Explore manual Curation ordering, short curator notes, and read-only public previews. An authored collection could communicate a reading sequence as well as a set of posts.
Watch people use it.
Test creating a first Feed, explaining any/all matching, excluding a topic, recovering from empty results, and switching Feeds on mobile. Compare the drum with a simpler selector. Check keyboard, screen-reader, zoom, contrast, and reduced-motion flows.
Test the boundaries.
Verify filter combinations, pagination, access control, stale requests, and cache invalidation. Review validation, rate limits, recovery, moderation, and private-Scroll access before wider use. Evaluate tag suggestions on labeled drafts, including sparse topics and non-English writing.
Find a place to stop.
Echo currently scrolls indefinitely. A finite reading batch or an optional end marker could test a different way to finish a session. Reader control also raises questions about missed posts, overly narrow rules, and how new interests are discovered.