Problem
Currently, the story textarea on both /share-story and /edit-story provides no feedback about content length while users type.
This creates several UX issues:
- Users cannot tell whether their story is detailed enough for AI grammar correction or translation features to work effectively
- There is no indication of approaching backend or UI limits
- Mobile users especially lack visibility into how much content they’ve written
- The textarea grows silently with no typing feedback or progression indicator
As a result, users may submit stories that are either too short for meaningful AI enhancement or unintentionally exceed recommended limits.
Proposed Solution
Add a lightweight live character counter beneath the story textarea in both:
src/pages/ShareStory.tsxsrc/pages/EditStory.tsx
The counter should update reactively on every keystroke using the existing content state already present in both components.
User Story
As a user, I want live feedback while writing my story so I can understand whether my content is detailed enough for AI enhancement and avoid exceeding recommended limits.
As a mobile user, I want a visible content-length indicator so I can better judge how much I’ve written without manually estimating.
As a contributor, I want this implemented using existing state and styling utilities so the feature remains lightweight and consistent with the current design system.
Acceptance Criteria
| Character counter visible below textarea on both pages ✅
| Counter updates live on every keystroke ✅
| Counter turns yellow near limit ✅
| Counter turns red at/over limit ✅
| “Too short for AI suggestions” hint appears under 50 characters ✅
| Works correctly in both light and dark themes ✅
| No new npm packages introduced ✅
Contribution Interest
Hiii @Piyushydv08
Problem
Currently, the story textarea on both
/share-storyand/edit-storyprovides no feedback about content length while users type.This creates several UX issues:
As a result, users may submit stories that are either too short for meaningful AI enhancement or unintentionally exceed recommended limits.
Proposed Solution
Add a lightweight live character counter beneath the story textarea in both:
src/pages/ShareStory.tsxsrc/pages/EditStory.tsxThe counter should update reactively on every keystroke using the existing
contentstate already present in both components.User Story
As a user, I want live feedback while writing my story so I can understand whether my content is detailed enough for AI enhancement and avoid exceeding recommended limits.
As a mobile user, I want a visible content-length indicator so I can better judge how much I’ve written without manually estimating.
As a contributor, I want this implemented using existing state and styling utilities so the feature remains lightweight and consistent with the current design system.
Acceptance Criteria
| Character counter visible below textarea on both pages ✅
| Counter updates live on every keystroke ✅
| Counter turns yellow near limit ✅
| Counter turns red at/over limit ✅
| “Too short for AI suggestions” hint appears under 50 characters ✅
| Works correctly in both light and dark themes ✅
| No new npm packages introduced ✅
Contribution Interest
Hiii @Piyushydv08
GSSOC'26contributor