⚡ A Neo-Brutalist Second Brain for the Unapologetic Thinker ⚡
One place. One vault. Everything captured.
The Goted is a personal knowledge management system built with raw, unapologetic Neo-Brutalism design. Capture notes, ideas, code snippets, links, and files — all searchable, all organized, all yours.
No frameworks. No bloat. Just HTML + Vanilla JS + Supabase with thick borders, hard shadows, and bold typography.
|
Quickly capture ideas without overthinking. Type, crystallize, done. Filter and search all your captured notes, links, code, and ideas in one organized view. Connect ideas spatially with an interactive drag-and-drop mind map builder. Turn vault entries into study flashcards for memorization and review. |
Connect with friends, share mind maps, send peek requests, and collaborate in real-time. Real-time messaging between connected collaborators powered by Supabase Realtime. Soft-delete items with full restore capability. Incinerate when you're sure. An adorable mascot guides new users through every feature with a step-by-step tour. |
The Goted follows a strict Neo-Brutalist design language:
| Element | Rule |
|---|---|
| Borders | 3-4px solid black on everything |
| Shadows | Hard shadows: 4px 4px 0px #000 — no blur, ever |
| Hover | Element shifts: translate(-2px, -2px) |
| Active | Element presses: translate(2px, 2px) |
| Spacing | 8px grid system |
| Contrast | High contrast always — readability is non-negotiable |
Primary Yellow ─── #FFD028 ── Navigation, primary actions
Neo Pink ─── #FF90E8 ── CTAs, highlights, buttons
Accent Mint ─── #23F0C7 ── Success states, accents
Success Green ─── #00E074 ── Confirmations, notes
Hot Pink ─── #FF2D78 ── Ideas, danger, warnings
Code Orange ─── #FF6B00 ── Code blocks
Link Blue ─── #0066FF ── Links, references
| Usage | Font | Weight |
|---|---|---|
| Display / Headers | Space Grotesk | 700-800 |
| UI Labels / Mono | Space Mono | 400 / 700 |
| Body | Space Grotesk | 400-500 |
🔐 Login Screen (click to expand)
Invite-only access with email + password authentication via Supabase
🎓 GoTared Tutorial (click to expand)
GoTared, the mascot, guides you through every feature on your first visit
- A Supabase project (free tier works)
- Any HTTP server (Node.js, Python, etc.)
git clone https://github.com/bunnybot1121/goted.git
cd gotedRun the SQL files in your Supabase SQL Editor in this order:
1. supabase_setup.sql → Core items table + RLS policies
2. supabase_profiles.sql → User profiles + avatars
3. supabase_chat_setup.sql → Real-time chat tables
4. supabase_item_sharing.sql → Item sharing between users
Open app.js and update lines 1-2 with your Supabase credentials:
const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_KEY = 'your-anon-key';In Supabase Dashboard → Authentication → Users → Add User:
- Enter email + password
- Check "Auto Confirm User"
npx http-server . -p 8080 -c-1
# Open http://localhost:8080goted/
├── index.html # Main app (all views, modals, sidebars)
├── app.js # Core logic, Supabase integration, auth
├── mindmap.js # Interactive mind map engine
├── tutorial.js # GoTared mascot tutorial system
├── processor.py # GoTared sprite extractor from character sheet
├── clean_sprites.py # Sprite background remover + border adder
│
├── icons/ # App icons
│ ├── brain.png # Logo
│ ├── rocket.png # Login button icon
│ └── ...
│
├── assets/
│ └── avatars/ # GoTared mascot sprites (14 emotions)
│ ├── gotared_1.png → gotared_14.png
│ └── avatar_1.jpg → avatar_14.jpg # User profile avatars
│
├── screenshots/ # README screenshots
│
└── supabase_*.sql # Database setup scripts
GoTared — your personal guide through The Goted.
She appears on your first visit to walk you through every feature with 14 different emotions.
| Shortcut | Action |
|---|---|
Ctrl + K |
Focus search bar |
Ctrl + S |
Save current item |
Esc |
Close any open modal |
- Invite-only: Users are created manually in the Supabase dashboard
- Row Level Security: Every table has RLS policies — users can only access their own data
- No API keys exposed: Supabase anon key is read-only with RLS enforcement
- Session-based auth: Supabase handles JWT tokens automatically
| Layer | Technology |
|---|---|
| Frontend | HTML5, Vanilla JavaScript, Tailwind CSS |
| Backend | Supabase (PostgreSQL + Auth + Realtime + Storage) |
| Design | Neo-Brutalism via Tailwind custom config |
| Hosting | GitHub Pages / any static host |
| Auth | Supabase Auth (Email + Password) |
This project is private and invite-only. All rights reserved.
Built with brutal honesty.
No gradients hiding structure. No blur softening edges. Everything is what it is.