DEV Community

Juanita Mumbi
Juanita Mumbi

Posted on

WanderJournal: A digital travelling Journal

DEV Weekend Challenge: Generosity Edition Submission 💜

This is a submission for Weekend Challenge: Generosity Edition

What I Built

When I saw that the theme of this weekend challenge was generosity, I kept thinking about what it actually means to give something to another person.

We usually think of giving as something physical ; money, food, a gift, something we own.

But there are smaller things we give each other all the time.

A recommendation. A story. A photograph. A place we almost walked past. A song that reminds us of home. A tiny piece of a life somebody else would never have known existed.

That thought became WanderJournal.

The idea is simple:

Someone, somewhere, left you a page. Now you can leave one for somebody else.

WanderJournal is a collection of digital travelling journals. Instead of posting into one endless social feed, people contribute pages to journals built around shared themes.

One journal might contain food memories from Tokyo. Another might collect discoveries from Seoul, stories from the Kenyan coast, sounds that remind people of home, pieces of nature, or simply ordinary moments from someone's life.

Each page belongs to a person and a place.

And when you're finished reading, the journal doesn't end with you.

You're invited to leave a page of your own.

But what happens when we don't speak the same language?

While building WanderJournal, I realized there was a problem with the whole idea.

If these journals are supposed to travel between different people and different places, then eventually a page is going to reach someone who can't understand the language it was written in.

I didn't want the answer to be making everyone write in English.

The whole point is that the journal belongs to everyone.

So I added translation using Google AI.

A reader can choose a language and ask Google AI to translate the page they're currently reading. The translated version is displayed separately, while the contributor's original page remains unchanged and can be returned to at any time.

That distinction mattered to me.

AI isn't there to rewrite someone's contribution or replace their voice. It's there to help another person reach it.

That's why one of the little handwritten notes in WanderJournal says:

language shouldn't be the border

And that eventually became one of my favourite ideas in the entire project.

Demo

Here is WanderJournal in action:

Live application:

https://wander-journal-psi.vercel.app/

Video demo:

https://youtu.be/Frbu9g9fs2k

The demo follows the experience from discovering a journal, reading somebody's page and translating it with Google AI, to leaving something behind for the next person.

The loop is intentionally simple:

Discover → Read → Understand → Contribute → Pass it on.

Code

The source code for WanderJournal is available on GitHub:

https://github.com/Algo-jtx/WanderJournal

I built the project during the Weekend Challenge using React and Vite, with Supabase handling persistent data and Google AI powering the translation experience.

How I Built It

Making a website feel like something that has travelled

One of my first decisions was that WanderJournal shouldn't feel like a normal social platform.

No rows of identical posts. No likes competing for attention. No profile-first experience.

I wanted opening it to feel closer to finding a journal somebody had actually passed to you.

That shaped most of the visual design.

I used large editorial typography, warm paper-like backgrounds, photographs, handwritten annotations, stamps, slightly rotated elements and different colour identities for different journals.

The journals themselves are also deliberately structured as collections rather than individual posts.

A journal has its own theme, location, cover, description and pages. Then each page can have its own contributor, location, story, photograph, original language and small annotation.

It means that as more people contribute, the journal becomes something no individual contributor could have created alone.

Building the reading experience

The frontend is built with React + Vite, with reusable components handling the journal cards, page content, navigation, images, annotations and contribution experience.

I also seeded several journals so that opening WanderJournal for the first time already feels like discovering something that has been travelling.

Those include journals about food, travel, discoveries, music, nature and personal stories.

But seeded pages are only the beginning.

The Leave a Page experience lets a visitor become part of the journal instead of remaining only a reader.

Keeping the pages

For persistence, I connected the application to Supabase.

That lets new contributions move beyond the static demo content and become actual stored pages.

This was important because the central idea only really works if the next person's contribution can remain after the previous visitor leaves.

The journal needs to remember.

Letting stories cross languages with Google AI

The most interesting technical problem was translation.

I integrated Google AI into the reading experience so a reader can choose another language and translate the title and body of a contribution.

But I didn't want the translated result to silently replace what somebody originally wrote.

Instead, WanderJournal treats it as another way of reading that page.

The interface identifies the original and target languages, presents the Google AI translation separately, and gives the reader the option to return to the original.

That small architectural/UI decision ended up expressing something important about the project:

AI should help people understand each other without pretending their differences weren't there in the first place.

Getting it into the world

Finally, I deployed WanderJournal with Vercel.

That was particularly satisfying for this project because something built around passing stories between strangers shouldn't end its life running on localhost. :)

Prize Categories

Best Use of Google AI

I'm submitting WanderJournal for Best Use of Google AI.

I wanted the AI integration to solve a problem that naturally existed in the product rather than add AI simply because there was an AI prize category.

WanderJournal asks people from different places to give pieces of their lives to people they may never meet.

Language is therefore a real barrier.

Google AI becomes the bridge.

A person can discover a page written somewhere else in the world, translate it into a language they understand, read it, return to the contributor's original version, and then perhaps leave a page of their own.

The AI isn't the destination.

The other person is.

What I Took Away From This Weekend

This started as an idea about travelling journals, but somewhere during the build I realized I was making something slightly different.

I was thinking about how much of the world we experience through tiny things other people choose to share with us.

Not necessarily their biggest story.

Sometimes it's breakfast from a convenience store.

A street they nearly walked past.

A sound they associate with home.

Something growing after the rain.

An extremely ordinary Sunday.

None of those things seems particularly important on its own.

But give one to a stranger, and suddenly they get to see a tiny part of the world through somebody else's eyes.

That's the version of generosity I wanted WanderJournal to explore.

You don't have to give someone something enormous.

Sometimes you can just...

leave them a page.

Top comments (0)