Baithakby Echo
Visit BaithakA place for the stories
we grew up around.
Punjab’s folk stories, shared by village elders and youth. I built Baithak so more people could find them, read them, and pass them on.
Over 150 stories published
It started with
what I saw around me.
Young people were spending their time on short-form content. The elders around them held a rich heritage of folk stories.
That contrast stayed with me. There was so much here worth sharing, but it needed a place that younger people would feel comfortable using.
Baithak grew from that thought. The stories come from village elders and youth. I took care of the idea, research, design, and full-stack development myself.
I wanted someone to open it, find a story, and stay because they wanted to read. A familiar way to browse could help them take that first step.
150+ stories published.
And more to share.
The collection brings together folk stories from village elders and youth. Having them in one place means someone else can find a story they might never have heard.
This is what I’m happiest to have built: a collection of those stories that people can open and read.
Over 150 published stories as of October 15, 2026. Count reported by the project founder.Come for a story.
Follow your curiosity.
One story at a time.
The feed gives each story its own space. You can move through the cards, stop on one that interests you, and open it to read more.
The current feed shuffles the stories. A new visit can bring a different order, while loading more keeps the same sequence for that visit.
A word can lead somewhere.
A folk story can mention a place, an object, or a tradition that a reader has never come across. Keywords help explain those references without making someone leave the story to search for them.
They also connect stories. A reader can follow a word to its meaning and discover other writing around it. The feed and keyword features are working parts of Baithak.
Read in a familiar language.
The interface offers English, Shahmukhi Punjabi, and Roman Punjabi. The language choice stays close at hand, so readers can change it as they go.
Shahmukhi needs right-to-left space and enough room for its letterforms. English and Roman Punjabi read left to right. Each needs to feel natural on the same screen.
A warm place
to sit and read.
Baithak belongs to Echo, but Punjab’s stories give it a character of its own.
Start with the writing.
The Punjabi calligraphy gives the landing page its identity. Inside the app, the layout gets quieter. Warm paper, dark text, and fine rules leave most of the screen to the story.
#F7F2E8Clay
#874632Olive
#3E4737
Give each script enough room.
Bodoni Moda is used for English headings and the Baithak wordmark. Manrope handles interface text. Noto Nastaliq Urdu supports Shahmukhi, with generous line spacing and connected letters kept intact.
Keep the story close on a phone.
Desktop navigation sits beside the reading area. On phones, the main destinations move to the bottom. The story keeps most of the screen, with reading controls within reach.
Let movement stay in the background.
The calligraphy has room for motion on the landing page. The feed uses a small settling movement as a card arrives. Reduced-motion preferences keep the content available without those effects.
From the idea
to a working place.
- Interface
- React · JavaScript · Tailwind CSS
React Router · GSAP - Server & data
- Node.js · Express
MongoDB · Mongoose - My role
- Idea & research
Design · Frontend · Backend
Keep a visit consistent.
The feed creates a random seed when it opens and sends it with its story requests. The seed stays the same as more stories load. Reloading starts a new shuffle.
The reading deck uses native scroll snapping. Scrolling and the arrow controls move through the same card positions, so the reader has more than one way to browse.
Explain a word without changing the story.
The keyword matcher checks stored labels and aliases against the text. It records where a match appears, so the interface can mark the word while preserving the original writing.
Phrase matching respects sentence and paragraph boundaries. When matches overlap, the annotations keep the related meanings together. These details matter when a short name sits inside a longer one.
Build both sides of the experience.
React handles the reading interface and language choices. Express and MongoDB handle the stories and their related records. Keeping the frontend and backend separate lets each part have a clear job.
Building the whole project myself meant carrying the same idea through the design, the data, and the way a reader moves between stories.
How the idea
took shape.
An illustrative timeline from May to October 2026. The dates below were arranged for this case study; they are not a verified development record.
Start with the stories.
The starting point was the contrast between young people watching short videos and elders who had so many folk stories to tell. Stories from village elders and youth gave Baithak its subject and its reason to exist.
Give them a place to live.
The idea took shape around reading and sharing Punjab’s folklore. Text came first, with room for short passages, longer stories, and the words that need a little explanation.
Make reading feel familiar.
A feed gave readers a simple way to begin. One story at a time, with a longer reading view when something caught their attention. The interface needed to feel comfortable on a phone.
Connect the words to their meaning.
Keywords became a way to learn while reading. A word could lead to its cultural context and to other stories where it appears. Language choices made space for different ways of reading Punjabi.
Give Baithak its own character.
Warm paper, clay-colored lettering, and Punjabi calligraphy shaped the identity. The reading pages stayed simple, with clear controls and room for the writing.
Keep building around the stories.
The feed and keywords now work, and more than 150 stories have been published as of October 15. The next work is about making the collection easier to explore and keeping the people behind it part of the experience.
There’s more
I’d like to do.
The collection is growing. I want the next steps to help people read, contribute, and keep the stories connected to where they came from.
Keep the storytellers part of the story.
Make attribution and permission clear when someone shares an elder’s account. Leave room for different local versions of the same tale.
Make more stories readable across languages.
Build on translations with review from fluent readers. Keep the original writing available, and say plainly when a translation is missing.
Listen to the people using it.
Watch readers browse on their own phones. Find out where a word is unclear, where a control is hard to reach, or where reading feels like work. Use that feedback to choose what to improve.
Make room for the spoken story.
Voice and video are future directions. Hearing a storyteller’s voice could add something that text alone cannot carry. For now, the focus is on the text collection and the reading experience.