docs: restore original voice and humor in README intro

aboderinsamuel · aboderinsamuel · commit a9e105a70829 · 2026-03-15T18:07:27.000+01:00
diff --git a/README.md b/README.md
@@ -2,213 +2,192 @@
 
 > *"Because even ChatGPT forgets sometimes..."*
 
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/aboderinsamuel/closedNote)
+
 ---
 
-### 👋 What is closedNote?
+## 👋 What is closedNote?
 
-closedNote is a simple web app for **saving, organizing, and re-using your best prompts**, built for *students, teachers, engineers, prompt engineers, prompt tutors, and even regular folks like my mum 😅.*
+closedNote is a simple web app for saving, organizing, and re-using your best prompts, built for students, teachers, engineers, prompt engineers, prompt tutors, and even parents like my mum 😅.
 
-It's the one place you can finally dump all your fire prompts without digging through old chats or screenshots.
-A calm home for all your creativity.
+It's the one place you can finally dump all your fire prompts without digging through old chats or screenshots. A calm home for all your creativity.
 
 ---
 
-### 💡 The Story
+## 💡 The Story
 
-I got tired of re-engineering my "perfect ChatGPT prompts" every time I needed a particular kind of answer.
-Then my mum started doing the same thing (don't ask how she got into it 😭).
-Then my grandma.
-Then my classmates.
+I got tired of re-engineering my "perfect ChatGPT prompts" every time I needed a particular kind of answer. Then my mum started doing the same thing (don't ask how she got into it 😭). Then my grandma. Then my classmates.
 
 Meanwhile, prompt engineers were dropping crazy tips on X (Twitter) and Stack Overflow, but I had nowhere to store them neatly.
 
-So, I built one.
-That's what **closedNote** is all about, a small home to make **prompt saving easier for everyone**. 🙂🙂
+So, I built one. That's what closedNote is all about, a small home to make prompt saving easier for everyone. 🙂🙂
 
 Completely open source, open to contributions, and continuously improving.
 
 ---
 
-### ⚙️ Tech Stack
-
-<div align="center">
-
-| Frontend | Backend | AI/OCR | Database | Deployment |
-|:--------:|:-------:|:------:|:--------:|:----------:|
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" width="40" height="40" alt="Next.js"/><br/>**Next.js 14** | <img src="https://avatars.githubusercontent.com/u/54469796?s=200&v=4" width="40" height="40" alt="Supabase"/><br/>**Supabase** | <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" width="40" height="40" alt="Hugging Face"/><br/>**Hugging Face** | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg" width="40" height="40" alt="PostgreSQL"/><br/>**PostgreSQL** | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vercel/vercel-original.svg" width="40" height="40" alt="Vercel"/><br/>**Vercel** |
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width="40" height="40" alt="React"/><br/>**React 18** | JWT Auth | TrOCR Models | RLS Policies | Auto Deploy |
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" width="40" height="40" alt="TypeScript"/><br/>**TypeScript** | API Routes | Zephyr Chat | Real-time Sync | Edge Functions |
-| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" width="40" height="40" alt="Tailwind"/><br/>**Tailwind CSS** | Storage | Tesseract.js | Migrations | Preview URLs |
-
-</div>
-
----
+## 🖥️ Demo
 
-### 🖥️ Desktop View
+### Dashboard
 
 ![Desktop Screenshot 1](./screenshots/desktop1.png)
 
 ![Desktop Screenshot 2](./screenshots/desktop2.png)
 
+### Prompt Editor
+
 ![Desktop Screenshot 3](./screenshots/desktop3.png)
 
-> clean, minimal, and distraction-free, because prompts deserve peace too 😌
+> clean, minimal, distraction-free — because prompts deserve peace too 😌
 
----
+### Image to Text (OCR)
+
+![OCR Feature](./screenshots/OCR.png)
 
-### 📱 Mobile View
+> Upload a screenshot, get the text out. No retyping. Ever.
+
+### 📱 Mobile
 
 |                                                   |                                                   |
 | ------------------------------------------------- | ------------------------------------------------- |
 | ![Mobile Screenshot 1](./screenshots/mobile1.png) | ![Mobile Screenshot 2](./screenshots/mobile2.png) |
 
-> fully responsive, works smoothly on mobile for on-the-go creativity
+> Fully responsive. Works on the go.
 
 ---
 
-### 🗄️ Database Setup (Supabase + PostgreSQL)
-
-closedNote runs on **Supabase**, which provides both authentication and secure cloud storage using **Row Level Security (RLS)**, meaning no one can see your notes but you.
+## 🏗️ Architecture
 
-#### 🧾 Example Schema Snippets
+```
+User Browser
+    │
+    ├── Next.js 14 App Router (client-side pages)
+    │       ├── / .............. Dashboard (prompt list + search + collections)
+    │       ├── /prompts/[id] .. View / Edit a prompt
+    │       ├── /ocr ........... Image → Text → Refine → Save
+    │       ├── /settings ...... API keys, theme, account
+    │       └── /home .......... Marketing landing page
+    │
+    ├── API Routes (server-side, Next.js edge)
+    │       ├── /api/ocr ....... Vision OCR (OpenAI GPT-4o-mini if user key provided)
+    │       └── /api/chat ...... AI text refinement (OpenAI or HuggingFace user key)
+    │
+    ├── Supabase (PostgreSQL + Auth)
+    │       ├── Auth: PKCE flow, email/password
+    │       ├── Tables: users · prompts · (RLS on everything)
+    │       └── RPC: delete_user()
+    │
+    └── Tesseract.js (offline OCR fallback, runs in browser, no API needed)
+```
 
-![SQL Screenshot 1](./screenshots/sql1.png)
+**AI Provider Chain:**
+- OCR: `OpenAI GPT-4o-mini (user key)` → `Tesseract.js (offline fallback)`
+- Refinement: `OpenAI (user key)` → `HuggingFace Zephyr (user key)` → error with Settings link
 
-![SQL Screenshot 2](./screenshots/sql2.png)
+Users without API keys still get full prompt management + offline OCR. AI features unlock when they add a key in Settings.
 
-#### 🏛️ Public Schema
+### 🗄️ Database Schema
 
 ![Public schema diagram](./screenshots/postgresSchema.png)
 
-_Public schema diagram showing tables and relationships used by closedNote._
-
-> Every user's data is tied to their `auth.uid()`. No mix-ups, no leaks.
+Every user's data is tied to their `auth.uid()`. No mix-ups, no leaks. Row Level Security enforced on every table.
 
 ---
 
-### 🧠 Features
+## 🧠 Features
 
-* 🏠 **Local + Cloud Storage**, works offline, syncs later
-* 🔍 **Search & Filter**, find prompts in seconds
-* 🏷️ **Tag System**, group prompts by category or mood
-* 💾 **One-Click Copy**, paste straight into ChatGPT, Claude, Cursor, etc.
-* 🔒 **Private by Default**, RLS ensures your data stays yours
-* 🖼️ **Image to Text (OCR)**, turn screenshots into prompts instantly
-* 🌍 **Open Source Forever**, fork it, remix it, teach with it
+- 🔍 **Instant Search** — command palette (`⌘K`) across all prompts and pages
+- 📁 **Collections** — group prompts by topic, project, or vibe
+- 🖼️ **Image to Text (OCR)** — upload screenshots → extract text → save as prompt
+- ✨ **AI Refinement** — clean up extracted text into a polished, reusable prompt
+- 💾 **One-Click Copy** — paste straight into ChatGPT, Claude, Cursor, whatever
+- 🌗 **Dark Mode** — because your eyes matter
+- 📱 **Fully Responsive** — works on mobile without crying
+- 🔒 **Private by Default** — RLS ensures your data stays yours
+- ⚡ **Instant UI Updates** — add, edit, delete — no page refresh needed
 
 ---
 
-### 🖼️ Image to Text (OCR)
-
-closedNote lets you turn screenshots, photos, and handwritten notes into prompts without retyping everything.
-
-**How it works:**
-
-1. You upload an image (screenshot, photo of notes, whatever)
-2. The app tries to send it to **Hugging Face OCR API** (our planned primary engine)
-3. If that fails or isn't set up yet, it falls back to **Tesseract.js** running right in your browser
-4. The extracted text shows up, you can edit it if needed
-5. One click saves it as a prompt in your library
+## ⚙️ Tech Stack
 
-![OCR Feature](./screenshots/OCR.png)
-
-**Current Status:**
-
-Right now, Tesseract is the stable workhorse while we finalize the Hugging Face integration (API hiccups, you know how it goes). The code is structured so swapping between both or combining them later is super easy.
-
-**Why This Matters:**
-
-Ever find yourself screenshotting a great prompt from Twitter or a Discord server, then having to manually retype the whole thing? Yeah, me too. That's done now.
-
-**The Details:**
-
-When you upload an image:
-* **Online Mode**: Sends to Hugging Face TrOCR (Microsoft's printed/handwritten models)
-* **Offline Mode**: Falls back to Tesseract.js (runs locally, no internet needed)
-* **AI Refinement**: After extraction, you can clean up the text with Zephyr or Mixtral chat models
-* **Auto-Save**: Tagged with "ocr" so you can find all your screenshot-based prompts later
-
-![Console Debug View](./screenshots/console1.png)
-*Debug console showing OCR processing flow and state management*
+<div align="center">
 
-**What's Cool:**
+| Frontend | Backend | AI/OCR | Database | Deployment |
+|:--------:|:-------:|:------:|:--------:|:----------:|
+| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" width="40" height="40" alt="Next.js"/><br/>**Next.js 14** | <img src="https://avatars.githubusercontent.com/u/54469796?s=200&v=4" width="40" height="40" alt="Supabase"/><br/>**Supabase** | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/openai/openai-original.svg" width="40" height="40" alt="OpenAI"/><br/>**OpenAI** | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg" width="40" height="40" alt="PostgreSQL"/><br/>**PostgreSQL** | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vercel/vercel-original.svg" width="40" height="40" alt="Vercel"/><br/>**Vercel** |
+| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width="40" height="40" alt="React"/><br/>**React 18** | PKCE Auth | GPT-4o-mini Vision | RLS Policies | Auto Deploy |
+| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" width="40" height="40" alt="TypeScript"/><br/>**TypeScript** | API Routes | HuggingFace Zephyr | Real-time Sync | Preview URLs |
+| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" width="40" height="40" alt="Tailwind"/><br/>**Tailwind CSS** | Edge Functions | Tesseract.js (offline) | Migrations | CDN |
 
-The architecture is built with a **primary + fallback** mindset. Even if Hugging Face is down, you're not blocked. Even if you're offline on a train, Tesseract still works. No single point of failure.
+</div>
 
 ---
 
-### 🧪 How to Run Locally
+## 🧪 Run Locally
 
 ```bash
 git clone https://github.com/aboderinsamuel/closedNote.git
 cd closedNote
 npm install
 cp .env.example .env.local
-# Add your Supabase keys inside .env.local
-# (Optional) Add HUGGINGFACE_API_KEY for online OCR
+# Fill in your Supabase keys in .env.local
 npm run dev
 ```
 
-Then visit 👉 **[http://localhost:3000](http://localhost:3000)**
+Visit 👉 **[http://localhost:3000](http://localhost:3000)**
 
-**OCR Setup (Optional):**
-- Get a free Hugging Face token from [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)
-- Add `HUGGINGFACE_API_KEY=hf_yourtoken` to `.env.local`
-- That's it! OCR will automatically use Hugging Face when available, or fall back to Tesseract
+**.env.local variables:**
 
----
+```env
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+```
 
-### 🚀 Deploy to Production
+**AI features (optional):**
 
-#### Quick Deploy with Vercel (Recommended)
+Users can add their own API keys in the Settings page — no server key needed:
+- **OpenAI key** → unlocks AI-powered OCR (GPT-4o-mini vision) + AI refinement
+- **HuggingFace key** → unlocks AI refinement (Zephyr-7b)
+- **No key** → OCR still works via Tesseract.js (offline, in-browser)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/aboderinsamuel/closedNote)
+---
+
+## 🚀 Deploy to Production
+
+#### Vercel (Recommended)
 
-**Important Steps:**
-1. Click the button above or go to [Vercel](https://vercel.com)
-2. Import your forked repository
+1. Fork this repo
+2. Import to [Vercel](https://vercel.com)
 3. Add environment variables:
    - `NEXT_PUBLIC_SUPABASE_URL`
    - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
-4. Deploy!
+4. Deploy
 
 **After Deployment:**
-- Go to your Supabase Dashboard → Authentication → URL Configuration
+- Go to Supabase Dashboard → Authentication → URL Configuration
 - Add your Vercel domain to **Redirect URLs**: `https://your-app.vercel.app/**`
 - Update **Site URL** to: `https://your-app.vercel.app`
 
 ---
 
-### 🧰 Developer Notes
-
-closedNote is **developer-friendly**:
-
-* Uses clean React hooks and modular components
-* Minimal Tailwind classes (no spaghetti CSS)
-* Supabase client handles all Auth + DB calls
-* Easy to self-host or extend
-
----
-
-### 🔒 Security Highlights
+## 🔒 Security
 
-* ✅ Row Level Security (RLS) enabled on all tables
-* ✅ Auth via Supabase (JWT-secured)
-* ✅ `.env.local` excluded from Git (already in `.gitignore`)
-* ✅ HTTPS enforced on production (Vercel)
-* ✅ Minimal data collection - only email + prompts
+- ✅ Row Level Security (RLS) on all tables
+- ✅ Auth via Supabase (PKCE + JWT)
+- ✅ User API keys stored in `localStorage` only — never persisted server-side
+- ✅ `.env.local` excluded from Git
+- ✅ HTTPS enforced on Vercel
 
 ---
 
-### 🧑🏽‍💻 Contributing
+## 🧑🏽‍💻 Contributing
 
-closedNote is **completely open source** and **open for amendments**.
+closedNote is **completely open source** and open to contributions.
 The goal is to make prompt saving easier for *everyone*, not just developers.
 
-If you've got ideas, dark mode, AI tag suggestions, team sharing, prompt history, whatever, you're welcome to hop in!
+Got ideas? Dark mode themes, AI tag suggestions, team sharing, prompt history — hop in!
 
 ```bash
-# Steps to contribute
 1. Fork this repo 🍴
 2. Create a branch (feature/my-new-idea)
 3. Commit & push
@@ -217,21 +196,21 @@ If you've got ideas, dark mode, AI tag suggestions, team sharing, prompt history
 
 ---
 
-### 👨🏽‍🎓 About the Developer
+## 👨🏽‍🎓 About
 
 Built by [**Samuel Aboderin**](https://github.com/aboderinsamuel),
 Computer Engineering student at **UNILAG 🇳🇬**,
-who just got tired of losing his prompts (and decided to fix it for everyone else too).
+who got tired of losing his prompts and decided to fix it for everyone else too.
 
-Reach me on [LinkedIn](https://www.linkedin.com/in/samuelaboderin).
+[LinkedIn](https://www.linkedin.com/in/samuelaboderin) · [GitHub](https://github.com/aboderinsamuel)
 
 ---
 
-### 🧾 License
+## 🧾 License
 
-MIT License, use it, remix it, or improve it.
-Just don't lock it behind a paywall. 🙏🏽
+MIT -
+ use it, remix it, improve it. Just don't lock it behind a paywall. 🙏🏽
 
 ---
 
-**closedNote**, *because your prompts deserve better than browser history.* ✨
+*closedNote - because your prompts deserve better than browser history.* ✨
