Tanush

Posted on Oct 11 AI-assisted

SmartNotes AI: Minimizing Screen Time for Outdoor Thinkers

#devchallenge #hf26challenge #ai

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

🌿 What I Built

The Philosophy: The Screen Should Be the Shortest Part of the Experience

When we go out into nature — whether on a morning trail run, tracking garden frost dates, birdwatching, or taking a weekend hike — inspiration often strikes. But traditional note-taking apps do the opposite of what outdoor thinkers want: they pull you into a screen for 20 minutes of formatting, organizing, fixing typos, and filing bullet points.

SmartNotes AI was built around a singular philosophy: Make the screen the shortest part of the experience so you can get right back outside.

It is an ultra-fast, minimalist note intelligence tool designed for hikers, gardeners, trail runners, and field thinkers:

Raw Thought Dump: Jot down rough, fragmented field observations, trail notes, or garden thoughts into a clean, distraction-free editor.
One-Click Instant Synthesis: With a single key shortcut (Ctrl + Enter) or button click, our backend synthesizes your thoughts into:
- Executive Summary: The core takeaway of your outdoor session.
- Structured Key Points: Actionable, high-impact bullets (e.g. what to plant next week, trail hazards noticed, milestones reached).
- Writing Improvement: Clean, polished prose free from hasty typos.
Copy & Put Away: Copy in one tap, close the laptop, and go back to touching grass.

🌐 Demo

🚀 Live Application (Frontend on Vercel):

https://smartnotes-esch1suwk-titan90.vercel.app/
🟢 Live AI Backend (Web Service on Render):

https://smartnotes-7pcn.onrender.com/api/health

💻 Code

👉 View Full Source Code on GitHub: tanush326k/Smart-Notes →

🐙 GitHub Repository: https://github.com/tanush326k/Smart-Notes

* 📄 Open Source License: MIT License

🛠️ How I Built It

Architecture Overview

SmartNotes AI uses a decoupled, full-stack architecture built for high performance, zero client secret leakage, and instant responsiveness:

[User Browser]
      │
      ▼
[Vercel Frontend (React 19 + Vite + Tailwind v4 + Framer Motion)]
      │
      │ HTTP POST /api/generate (Restricted CORS)
      ▼
[Render Backend (Node.js 26 + Express + @google/genai)]
      │
      ▼
[Google Gemini 2.5 Flash / Open Model Runtime]

1. The Frontend (Vercel)

React 19 & Vite 8: Sub-second load times and zero Cumulative Layout Shift (CLS).
Tailwind CSS v4: Clean, lightweight styling with dark and light mode persistence.
Framer Motion: 60FPS spring micro-interactions and animated skeleton loading states while AI responses process.
Double-Submission Guards: Ensures accidental double-taps while moving outdoors won't spam API requests.

2. The Backend (Render)

Node.js 26 & Express: Built with native ES modules running as an active Web Service on Render.
Zero Secret Exposure: The AI API credentials live strictly in the Render backend environment — never exposed in frontend bundles or network requests.
Configurable CORS Filter: Automatically validates allowed origins and seamlessly connects with Vercel production domains.
Official @google/genai SDK: Leverages gemini-2.5-flash with a configurable model layer designed to swap in open-weight models like Gemma.

💡 Why Does Open Innovation Matter?

Freedom from Walled Gardens: Traditional note apps lock your thoughts behind closed proprietary formats, subscriptions, and invasive telemetry. By building with open tooling and transparent APIs, users own their words and their workflow.
Pluggable Architecture: Because the backend architecture isolates the model execution via a modular prompt builder, developers can swap the runtime from cloud inference to local open-weight models (like Gemma or Ollama) with zero UI changes.
Data Privacy First: Field research, personal reflections, and creative ideas shouldn't be trained on or tracked by closed platforms. Keeping the backend isolated on your own infrastructure ensures you remain in complete control of your data.

🏅 Prize Categories

Best Use of Render ($200 USD)

Role in Project: Render serves as the core AI runtime for SmartNotes AI.
Why Render:
- Native Node.js ES Module Support: Seamlessly runs our Node 26 Express server with fast cold starts and continuous git-triggered deployments.
- Secure Environment Layer: Houses our secret AI credentials away from the browser, guaranteeing zero token leaks.
- Production Health Monitoring: Built-in GET /api/health diagnostics allow real-time status tracking and automated uptime monitoring.
- Seamless Cross-Cloud CORS: Operates alongside Vercel's static edge frontend with strict, configurable origin validation.

🌲 Taking It Outside

To put this to the test, I took SmartNotes outside for a trail session. Instead of spending 15 minutes typing detailed journal logs on a phone while sitting on a park bench, I jotted down a quick 3-sentence fragment of trail observations:

"Saw red tail hawk near north ridge trail muddy after recent rainfall need hiking boots next time oak leaves turning amber"

In under two seconds, SmartNotes synthesized it into:

Key Points:
- North Ridge trail is muddy; hiking boots required.
- Red-tailed hawk sighting reported near the ridge.
- Fall foliage peak beginning with amber oak leaves.
Polished Journal Entry: Cleanly formatted and ready to save.

Screen time: under 20 seconds. Time back outside enjoying the trail: the rest of the day.

DEV Community