Mission Control

The Reconstruction HQ: A Dynamic MEAN Stack CMS.

Project Synopsis

Portfolio 2.0 is the capstone infrastructure project of 2026. It replaces the static HTML site with a dynamic, database-driven Content Management System (CMS).

Using the MEAN Stack, this platform will host the technical deep-dives of all previous 9 projects, featuring an Admin Dashboard for uploading new case studies, dynamic routing, and SEO optimization.

Why This Matters

A static site is just a brochure. A custom CMS is an application. Building this proves full-stack competency: Authentication, Database Design, API Security, and Frontend State Management.

Tech Stack

MongoDB (Data) Express/Node (API) Angular (UI) JWT (Auth)

Project Checkpoints

  • Phase 1: Database & Backend Architecture (Schema)
  • Phase 2: The Dynamic Frontend (Routing)
  • Phase 3: Integration & Content Migration (Sync)
  • Phase 4: Launch & Master's Application Preview (Deploy)

Field Notes & Learnings

Key engineering concepts for Modern Web Apps.

1. Dynamic Routing

Concept: Hardcoding 10 HTML pages is unscalable.

Solution: Use Angular Router. Create one generic ProjectDetailsComponent. The router takes the URL /projects/:id, fetches the specific JSON data from MongoDB, and populates the template instantly.

2. Lazy Loading

Concept: Loading the entire app at once makes the initial load slow.

Solution: Split the code into modules (AdminModule, PublicModule). Angular only downloads the "Admin" code chunks when the user actually navigates to /admin, keeping the main site snappy.

3. JWT Authentication

Concept: You need a private way to upload projects without building a public login system.

Solution: Implement JSON Web Tokens. When you log in as Admin, the API issues a signed token. This token must be sent in the Header of every POST request to prove identity.

4. Markdown Parsing

How to render technical docs?

  • Storage: Store the raw Markdown text (`# Title`) in MongoDB.
  • Display: Use a library like `marked` or `ngx-markdown` on the frontend to compile it into styled HTML on the fly.

Implementation

Step-by-step Execution Plan.

Phase 1: Architecture (Week 1)

  • Schema: Define `Project` model (Title, Tech, GitLink).
  • API: Protected POST routes for Admin uploads.
  • Assets: Cloudinary or S3 for image hosting.

Phase 2: Frontend (Week 2)

  • Routing: Dynamic URLs `/projects/:slug`.
  • Filters: Sort by [HIGH] or [BIZ] priority.
  • Markdown: Integrate parser for `.md` rendering.

Phase 3: Migration (Week 3)

  • Data Entry: Upload Projects 01-09 to DB.
  • GitHub API: Fetch live commit stats for each project.
  • SEO: Meta tags for rich social sharing.

Phase 4: Launch (Week 4)

  • About Page: Update bio to "AI Researcher".
  • DevLog: "Building a CMS from Scratch" video.

Dev Logs

Engineering notes & daily updates.

Entry 000 Planning

Date: Feb 3, 2026

Project 10 queued for November. The grand finale: A full-stack portfolio to house the year's work.