A public-facing experimentation and showcase of DECK principles.
Dec is a web-based tiling interface that explores embodied computing, context-aware workspaces, and sovereign digital presence—translated into browser space.
DECK is a philosophy and framework for embodied computing—systems that live with you, respect context, and maintain memory. It rejects surveillance-driven design patterns and the commodification of identity, instead prioritizing:
- Identity sovereignty – Your presence is yours, not a cached variable in someone else's server
- Context awareness – Systems adapt to signals like location, mode, and intent
- Declarative intent – Define what should be, not just what is
- Workspace isolation – Multiple states (work, travel, focus) as first-class primitives
- The right to fail and rebuild – Systems that respect you enough not to pretend perfection
Dec brings DECK principles to the web:
- Tiling interface – Multiple concurrent contexts (Blog, Terminal, Media, Edit) in persistent spatial layouts
- Session-aware workspaces – UI adapts based on authentication and role (public/user/admin)
- Embodied navigation – Sidebar as spatial memory, top bar as context switcher
- Content sovereignty – Public users can draft locally (localStorage), admins publish to the site
- Theme as signal – Light/dark modes as contextual markers, not just aesthetics
This is a live experiment, not a finished product. It showcases what interface design looks like when identity, context, and control are non-negotiable.
- Blog – Markdown-based posts with frontmatter
- Terminal – xterm.js integration (auth-gated)
- Media – Content-agnostic player (YouTube, Twitch, direct video)
- Edit – Dual-mode editor (localStorage for public, database for admin)
- GitHub OAuth – Optional authentication with role-based access
- Theme system – CSS variables for consistent, adaptable theming
- Runtime: Bun (fast JavaScript runtime)
- Framework: SolidJS + SolidStart
- Auth: Auth.js with GitHub OAuth
- Database: SQLite via Drizzle ORM
- Styling: TailwindCSS with custom CSS variables
- Terminal: xterm.js
- Markdown: gray-matter + remark
IMPORTANT: This project uses Bun, not npm/yarn/pnpm.
- Bun installed
- (Optional) GitHub OAuth app for authentication
# Clone the repository
git clone https://github.com/BYTE-6D65/Dec.git
cd Dec
# Install dependencies
bun install
# Set up environment variables
cp .env.example .env
# Edit .env with your OAuth credentials (optional)
# Run database migrations
bun run db:migrate
# Start development server
bun run devThe app will be available at http://localhost:3000.
bun run build
bun startSee .env.example for required configuration:
AUTH_SECRET– Random 32-char string for session encryptionGITHUB_ID/GITHUB_SECRET– GitHub OAuth credentialsGOOGLE_CLIENT_ID/GOOGLE_CLIENT_SECRET– (Optional) Google OAuthTWITCH_CLIENT_ID/TWITCH_CLIENT_SECRET– (Optional) Twitch OAuth
- Browse blog posts
- Draft posts in Edit panel (saved to browser localStorage)
- View media with direct URLs
- Access terminal
- Full UI features
- Publish blog posts to production
- Full site control
/src
/apps # Panel-specific logic (blog, media, edit, terminal)
/components # Shared UI components
/db # Database schema and queries
/lib # Auth utilities and helpers
/routes # SolidStart file-based routing
/api # API endpoints (auth, blog, media)
/themes.css # Theme color definitions
This project is an experiment in tiling-esque UI principles applied to the web. It asks:
- What if web apps respected your context?
- What if navigation was spatial, not hierarchical?
- What if identity wasn't a form field, but a signal?
- What if privacy was a default, not an upgrade?
DECK is the filesystem. Dec is the interface. Both are attempts to answer:
What does computing look like when the system works for you, not on you?
MIT – See LICENSE
- DECK Lore (coming soon)
- SolidJS Documentation
- Auth.js Documentation