This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
I built Little Outside, a small AI-powered progressive web app designed to help people spend less time staring at a screen and pay more attention to the physical world around them.
The idea came from a fairly simple observation that there are already plenty of apps that can tell us to take a break, go for a walk, be present, or spend less time online.
I didn't want to build another app that asked people to spend more time on a screen in order to learn how to spend less time on one.
Instead, Little Outside starts by giving you a reason to leave the screen.
You choose the kind of experience you want, and the app gives you a small real-world mission.
It could be something as simple as looking for an interesting texture, noticing something you've never paid attention to on your usual route, or finding a detail in your surroundings that tells you something about the place you're in. Then you put the phone away.
Little Outside asks you to describe what you noticed. Its vocabulary coach then helps you find a more precise word for that observation.
For example, you might come back and write:
There were so many things packed together in the shop that everything looked scattered.
Instead of simply giving you a definition from a dictionary, the vocabulary coach can suggest a word such as cluttered, explain why that word fits your observation, and then ask you to rewrite your original thought using the new word.
That creates the loop i wanted:
Choose → Explore → Notice → Reflect → Discover a word → Rewrite → Save
The vocabulary is therefore not a separate flashcard exercise.
The real world comes first. The vocabulary comes from what you actually noticed.
Demo
Live Demo: https://little-outside.onrender.com
The core flow is:
- Choose a mission.
- Go outside and complete it.
- Record what you noticed.
- Ask the vocabulary coach to help you find a better word.
- Rewrite your observation.
- Save the completed adventure to your journal.
Demo video:
Code
GitHub Repository:
Little Outside
A small app for getting off your screen, paying attention to the world around you, and finding better words for what you notice.
Built for the DEV Hacktoberfest 2026 “Touch Grass” challenge.
Why Little Outside?
It is surprisingly easy to spend an entire day looking at a screen without really noticing what is happening around you. Little Outside gives you a reason to step away.
Instead of telling you to "go outside and relax," it gives you a small, specific adventure to try. You might be asked to notice five different sounds, find something that has changed with age, or take a short walk and pay attention to the things you normally pass by.
The fun part is finding the right words for what you experienced.
How it works
Choose what you want
↓
Get a small outdoor mission
↓
Go outside
↓
Write about what you noticedThe project is built as an open-source Next.js application. The repository contains the application code, local mission and vocabulary data, AI integration, PWA configuration, and the persistence layer used for the journal.
How I Built It
I built Little Outside with Next.js, TypeScript, Tailwind CSS, Serwist, and IndexedDB.
There are two important architectural decisions behind the project.
- The real-world missions don't depend on AI. I deliberately kept the mission system local and deterministic. When a user starts an adventure, the app can generate an appropriate mission from its local mission data instead of asking an AI model to invent one every time.
That matters because the most important part of the application is not the AI. It is getting the user outside. The AI should enhance that experience rather than become a dependency for every part of it.
- Gemma handles the vocabulary coaching The AI portion of the application uses Google's Gemma open-weight model, accessed through OpenRouter.
The request flow looks roughly like this:
User reflection
↓
Mission page
↓
/api/vocabulary
↓
Vocabulary service
↓
Gemma via OpenRouter
↓
Structured vocabulary response
↓
Word + definition + explanation + example + rewrite prompt
The browser never talks directly to OpenRouter. The API key remains on the server, and the application validates the model response before passing it back to the client. The vocabulary response is structured around the actual reflection rather than being a generic word of the day.
The model is asked to provide:
- a useful word for the observation
- its meaning
- why it fits the user's description
- an example
- a prompt for rewriting the original observation
How the AI fits in
I used Google's Gemma through OpenRouter to help users find more precise words for things they notice outside. When a user submits an observation, the app sends it to a server-side API route, which handles the vocabulary request.
I also wanted the experience to remain useful when the AI provider or network is unavailable, so the app includes a local vocabulary fallback.
Local fallback
I also didn't want a temporary network or AI failure to completely destroy the experience. The vocabulary system has a curated local dataset that can be used when the online AI provider is unavailable.
The application also keeps the missions and journal experience local.
Completed adventures are persisted using IndexedDB, which means the journal isn't dependent on a remote database just to remember what the user has done. This is because the goal of the application is to encourage people to disconnect from the internet for a while.
It would be slightly ironic if the app itself became unusable the moment the connection disappeared.
Progressive Web App
Little Outside is also configured as a PWA using Serwist.
The application has a web app manifest, application icons, and a service worker setup so that it can behave more like an installable application.
The local mission data, vocabulary fallback, and journal persistence are particularly important here because they give the application useful behavior beyond simply loading a webpage.
Why Does Open Innovation Matter?
For Little Outside, using an open-weight model matters because i didn't want the AI component to become the entire product.
The core experience belongs to the application:
- the missions
- the reflection flow
- the vocabulary structure
- the local fallback
- the journal
- the PWA experience
Gemma is one component inside that system.
Using an open-weight model also gives the vocabulary layer a replaceable boundary. The application doesn't have to be designed around one permanently closed AI provider.
The provider is separated from the rest of the vocabulary logic, which means the application can change how the model is served without having to redesign the entire user experience.
More importantly, open models make it possible to think about applications where AI is small, specific, and useful, rather than putting a chatbot in front of every problem.
Prize Categories
Best Use of Gemma
Little Outside uses Google Gemma as the vocabulary coach at the heart of its reflection experience. It receives the user's real-world observation and helps turn that observation into a more precise piece of writing.Best Use of Render
Little Outside is deployed using Render, which hosts the production Next.js application and its server-side AI API routes.
Check it out
If you'd like to try Little Outside or see how it was built:
Top comments (0)