S
Back to Projects

my tools · 2026

Portfolio CMS - Admin Dashboard

An enterprise-grade, Electron-powered headless CMS architected for high-performance portfolio management, featuring a custom Express API and dynamic content orchestration.

Live ProjectFeatured
Role
Lead Engineer
Type
my tools
Year
2026
Source Code
Portfolio CMS - Admin Dashboard

About

The Project

The Portfolio CMS Admin Panel is an advanced, centralized command center engineered to decouple presentation from content logic. Designed to bypass the rigid structures of off-the-shelf solutions, this application provides an isolated, highly secure environment for orchestrating dynamic datasets including nested case studies, technical blogs, and interactive skill matrices. Built as a desktop-first powerhouse leveraging Electron and Vite, it delivers the raw performance and OS-level integration of a native application while maintaining the agility of a modern web stack. The frontend is meticulously crafted with React 18, TypeScript, and a highly customized iteration of Shadcn UI, resulting in a strictly typed, 'dark brutalist' interface that prioritizes developer ergonomics. Complex state synchronization, drag-and-drop hierarchy management via dnd-kit, and rich Markdown/HTML parsing with Tiptap elevate the authoring experience far beyond standard CRUD operations. Beneath the surface, a robust Express.js backend acts as a highly secure API gateway. It enforces strict data contracts using Joi validation schemas, manages stateless authentication via encrypted JWTs, and handles persistent storage through advanced MongoDB aggregations. This decoupled architecture guarantees that the public portfolio remains exceptionally lightweight and secure, while the admin panel retains total authority over global state management and content delivery.

Team

Contributors

SB
Sameer Bagul (Full Stack Developer)

What it does

Core features

  • 01

    Enterprise-Grade Unified Dashboard

    A highly secure

  • 02

    centralized command center providing real-time telemetry on portfolio metrics

  • 03

    incoming client communications

  • 04

    and multi-entity content orchestration.

  • 05

    Stateless JWT Authentication & Security

    A hardened login portal protected by stateless JSON Web Tokens (JWTs)

  • 06

    strict API rate limiting (express-rate-limit)

  • 07

    Helmet headers

  • 08

    and bcrypt-encrypted credential validation.

  • 09

    Advanced Project Lifecycle Management

    Comprehensive CRUD architecture for portfolio case studies featuring dynamic image uploads

  • 10

    rich markdown descriptions

  • 11

    multi-tag taxonomy

  • 12

    and nested JSON relationship parsing.

  • 13

    Rich Text Blog Authoring Engine

    A deeply integrated Tiptap markdown editor providing a seamless

  • 14

    distraction-free environment for drafting

  • 15

    formatting

  • 16

    and publishing technical engineering articles with robust HTML sanitization.

  • 17

    Dynamic Skills Taxonomy System

    A structured categorization engine to rate and organize technical proficiencies

  • 18

    automatically generating interactive

  • 19

    physics-driven skill matrices on the public-facing application.

  • 20

    Chronological Experience Orchestration

    Dedicated modules to rigorously track and render chronological professional history

  • 21

    including company metadata

  • 22

    detailed role descriptions

  • 23

    and key engineering responsibilities.

  • 24

    Client Testimonial Curation

    A robust storage interface to manage and authenticate client endorsements

  • 25

    quotes

  • 26

    and reviewer credentials to build professional credibility.

  • 27

    Secure Message Inbox

    A centralized messaging hub that safely receives

  • 28

    decrypts

  • 29

    and archives professional inquiries submitted through the public portfolio contact form.

  • 30

    GitHub & Pinterest Telemetry Integration

    Specialized external API modules designed to pull

  • 31

    cache

  • 32

    and synchronize GitHub repository statistics

  • 33

    contribution graphs

  • 34

    and curated design inspiration boards.

  • 35

    Visual Drag-and-Drop Ordering Engine

    Complex state management utilizing dnd-kit to visually sort and mutate the database sequence indices of portfolio items with zero-latency optimistic UI updates.

  • 36

    Cross-Platform Native Desktop Execution

    Seamlessly packaged utilizing Electron and electron-builder

  • 37

    delivering a production-ready

  • 38

    native installation experience across both Linux and Windows environments.

  • 39

    Dark Brutalist Aesthetic

    A meticulously handcrafted

  • 40

    high-contrast dark theme utilizing Shadcn UI and Tailwind CSS

  • 41

    optimized specifically for long-form developer interaction without eye strain.

  • 42

    Strict API Contract Enforcement

    An unyielding Express.js backend architecture fortified with Joi validation schemas to ensure absolute data integrity and prevent injection vulnerabilities before hitting the database.

Impact

Key Metrics

Drastically reduced global portfolio content deployment times from minutes of manual codebase hardcoding to mere seconds via the optimized graphical interface.

Achieved flawless 100/100 Google Lighthouse scores for Accessibility and Best Practices within the complex admin dashboard by strictly adhering to Radix UI accessibility primitives.

Successfully optimized

compiled

and distributed fully functional cross-platform executable builds with a remarkably low footprint of under 100MB.

Engineered robust

automated database backup scripts utilizing backend Node.js utilities that consistently safeguard over 10 distinct

mission-critical data collections.

Obstacles

Challenges

  • Desktop-Web Hybrid Architecture Integration: Successfully bridging a modern

  • high-speed Vite development server with an Electron main process required meticulous configuration to guarantee seamless Hot Module Replacement (HMR) while securely navigating cross-origin resource sharing (CORS) constraints and Node.js native module linking.

  • Complex Rich Text Data Persistence & Sanitization: Architecting a system to ensure that heavily nested HTML strings generated by the Tiptap editor were safely parsed

  • stored within MongoDB aggregations

  • and accurately re-hydrated on the public frontend without exposing the infrastructure to Cross-Site Scripting (XSS) vulnerabilities.

  • Optimistic State Synchronization for Drag-and-Drop: Implementing the dnd-kit engine required complex

  • asynchronous state management to ensure that visual DOM reordering instantly and accurately mutated the underlying database sequence indices

  • flawlessly handling edge cases involving rapid

  • successive user sorting actions.

  • Hardened API Security Protocol: Exposing a custom backend to the public internet necessitated the implementation of strict rate limiting

  • Helmet-enforced security headers

  • and stateless JWT validation to actively mitigate brute-force login vectors and common web vulnerabilities against administrative endpoints.

Takeaways

Learnings

  • Achieved profound mastery of Electron Inter-Process Communication (IPC)

  • bridging secure Context Bridges between Node.js main processes and React renderer processes to package web applications as high-performance native executables.

  • Mastered the implementation of headless UI architecture (Shadcn/Radix UI)

  • leveraging unstyled

  • accessible primitives to construct a completely bespoke

  • enterprise-grade design system.

  • Significantly elevated backend validation strategies by architecting rigid Joi schemas

  • enforcing strict

  • immutable data contracts that completely shield the Mongoose Object Data Modeling (ODM) layer from corrupted payloads.

  • Gained invaluable architectural experience in managing highly complex global state synchronization across a multi-entity administration portal utilizing Zustand and custom React hooks.

  • Internalized best-in-class methodologies for engineering secure

  • decoupled full-stack ecosystems where the administrative CMS operates in total isolation from the public-facing Next.js client.

"Building my own CMS was the best decision for my portfolio. It gives me total control over my data and a customized, distraction-free environment to document my work."

Sameer Bagul

Creator