Back to Projects
2025
Cyber Sphere
A premium, full-stack cyber-tech blog platform featuring a high-end dark-mode aesthetic and advanced content management. It offers a sophisticated Tiptap-powered editor with custom video integration (resize/align), secure OAuth support for GitHub & Google, and a specialized password-protected deletion system for demo environments. Built with React 19 and Node.js, the platform utilizes TanStack Query for real-time cache synchronization and ImageKit for optimized media delivery, ensuring a seamless and secure experience for tech storytelling.
- React 19
- TailWind CSS
- Tiptap Editor
- TanStack Query v5
- Express.js
- JWT
- MongoDB
- Vite
- Mongoose
- ImageKit
Key Features
- Advanced Tiptap EditorRich text editing with specialized video nodes supporting dynamic resizing and multi-alignment (left/center/right).
- Premium Cyber AestheticCustom dark-mode design with neon-infused gradients, glassmorphism, and the new branded CyberSphere identity.
- Secure Deletion WorkflowIntegrated password-verification system for content removal to maintain data integrity in demo environments.
- Real-Time Cache SyncLeverages TanStack Query for instant UI updates and featured post management via optimized cache invalidation.
- Hybrid AuthenticationSecure user sign-in via traditional email/password or OAuth providers (GitHub & Google) using Passport.js.
- Optimized Media DeliverySeamless image and video integration with ImageKit for automatic optimization and responsive transformations.
- Curated Admin ControlsDedicated tools for promoting high-quality stories to the featured section and managing global content quality.
- SEO & DiscoverabilitySEO-friendly URL structure and metadata optimization, including a custom-branded favicon for professional identity.
Preview
