The engineering behind my personal portfolio and CMS—a full-stack system built with NestJS, Next.js 15, and a custom Block-Based Editor.
Improved core performance metrics by 140% during production refactor.
Codernex is more than just a portfolio; it is a custom-built Content Management System (CMS) designed to showcase technical expertise through high-performance architecture and modern web standards.
As a Software Engineer, I found that existing CMS platforms (like WordPress or standard Markdown-only builders) were either too bloated or lacked the flexibility I needed for specialized technical logs. I needed a system that offered:
Modular Content Control: The ability to mix code snippets, technical diagrams, and rich media without breaking the page layout.
Organized Cloud Assets: A way to handle high-resolution media without cluttering the local repository or manual S3 management.
Full SEO Automation: A hands-off approach to search engine optimization that updates instantly when I publish new content.
I engineered a decoupled system that leverages a NestJS API for the backend logic and Next.js 15 for a high-performance, server-rendered frontend.
Custom Block-Based Editor: I developed a unique editing experience that stores content as a JSONB array in PostgreSQL. This allows for modular "blocks" (Text, Image, Code, Quote) that are mapped to optimized React Server Components on the frontend.
Dynamic S3 Media Pipeline: The backend features an intelligent S3Service that performs MIME-type analysis on every upload.Images are routed to /images.Technical docs go to /docs.Media is served via signed URLs or public paths depending on sensitivity.
Images are routed to /images.
Technical docs go to /docs.
Media is served via signed URLs or public paths depending on sensitivity.
SEO & Metadata Engine: Utilizing the Next.js Metadata API, the platform automatically generates:Dynamic Open Graph images and tags.A real-time sitemap.xml that pulls the latest project and blog slugs directly from the database.A robots.ts configuration to manage crawler access.
Dynamic Open Graph images and tags.
A real-time sitemap.xml that pulls the latest project and blog slugs directly from the database.
A robots.ts configuration to manage crawler access.
Terminal-Themed UI: A custom-styled interface using Tailwind CSS that reflects the "Codernex" brand—clean, dark, and developer-focused.
NestJS: Used for its modular architecture and strict TypeScript implementation.
TypeORM & PostgreSQL: Managed relational data for Projects, Blogs, and Users, using JSONB columns for flexible content.
AWS SDK: Integrated directly into the backend for secure, high-speed asset management.
Next.js 16: Leveraging the App Router, Server Components, and Server Actions for a zero-JS-by-default experience where possible.
Tailwind CSS: A utility-first approach to ensure a fast, responsive, and consistent design language.
Lucide Icons & Sonner: Used for a crisp icon set and high-performance toast notifications.
JSON-to-Component Mapping: One of the biggest challenges was ensuring that the JSON structure from the Block Editor rendered efficiently on the frontend. I solved this by creating a "Block Renderer" pattern that maps block types to specific UI components, ensuring type safety throughout.
AWS S3 MIME Filtering: I had to implement a robust file-validation system in the NestJS middleware to ensure only permitted file types were uploaded to specific cloud directories, preventing bucket clutter.
The Codernex ecosystem will continue to evolve with the following planned features:
Redis Caching: Implementing an abstraction layer for frequently accessed technical logs.
Collaborative Blocks: Adding a real-time collaborative editing feature to the Block Editor.
Automated CI/CD: Expanding GitHub Actions to include automated E2E testing for the entire media pipeline.
System Status: Live Build Version: 1.0.0 Lead Engineer: Borhan Uddin (@codernex)