Skip to content

fomongole/Dev-Vault-Web

Repository files navigation

DevVault

DevVault is a high-performance, enterprise-ready code snippet orchestrator. It bridges the gap between secure, private storage and global knowledge sharing—delivered through a precision-engineered, glassmorphic interface.

Next.js React 19 Tailwind CSS 4 TypeScript TanStack Query Vercel


✨ Core Value Propositions

  • 🔐 Granular Access Control: Seamless JWT-backed authentication. Toggle between Private Vaults for sensitive logic and Public Discovery for community contributions.
  • 🚀 PrismLight Syntax Engine: Zero-latency highlighting for 17+ languages (Rust, Go, TS, etc.), optimized for minimal main-thread blocking.
  • 📄 High-Density Data Handling: Backend-orchestrated infinite scroll and paginated streams designed for thousands of entries without performance degradation.
  • ⌨️ The "SmartTextarea" Editor: A developer-centric editing experience featuring native Tab-interceptors and automated Unsaved Change Protection.
  • 📊 Productivity Analytics: Real-time dashboarding to visualize language distribution and quick-access pinned snippets.
  • 🌓 Future-Proof Stack: Leveraging React 19 and Next.js 16 for near-zero Cumulative Layout Shift (CLS) and native-level performance.

🛠️ Tech Stack & Tooling

Category Technology Purpose
Framework Next.js App Router & Server Components
State TanStack Query Server-state synchronization
Styling Tailwind JIT Glassmorphism & UI Consistency
Validation Zod Schema-driven data integrity
Components Shadcn UI Accessible Radix-based primitives

🏗️ Domain-Driven Architecture

DevVault follows a Feature-Based Modular Architecture. All core logic is encapsulated within the features/ directory to ensure high maintainability and prevent logic leakage across domains.

src/
├── app/              # Next.js App Router (Routes & Layouts)
├── components/       # Shared UI Atoms (Buttons, Inputs)
├── features/         # Domain-Specific Logic
│   ├── auth/         # JWT Login, Logout, Middleware
│   ├── snippets/     # Vault Grid, Editor, Syntax Logic
│   └── profile/      # Analytics, User Settings
├── hooks/            # Global custom hooks
└── lib/              # Shared utility functions & Axios config
  • Architecture Tip: By co-locating hooks, services, and schemas within their respective feature folders, I ensure that the system remains scalable as more complex snippet management tools are added.

About

DevVault is a high-performance, enterprise-ready code snippet orchestrator. It bridges the gap between secure, private storage and global knowledge sharing—delivered through a precision-engineered, glassmorphic interface

Topics

Resources

Stars

Watchers

Forks

Contributors