🌌 Qubits of DPK — Mastering the Machine

A celestial, high-fidelity technical curriculum engine powered by Notion and Next.js.

---

✨ Overview

Qubits of DPK is not just a blog; it's a Celestial Curriculum Engine. It transforms raw technical notes from Notion into a high-fidelity, distraction-free learning experience. Designed for curious engineers who value both aesthetics and deep-dive technical clarity.

---

🚀 Key Features

• 🛡️ Notion-Driven: All content is managed in Notion for a seamless, collaborative editing experience.
• 🌌 Joyful Pop UI: A premium dark-mode "Cosmic Candy" design system with glassmorphic elements and high-contrast typography.
• 🌀 Pluckcard Navigation: A signature grid-based "Quantum Map" for intuitive module discovery.
• 📖 Sequential Learning: Forced 1-to-n curriculum numbering ensure learners stay on track.
• ⚓ Celestial Transitions: Smooth-scroll navigation and space-blur backgrounds for an immersive experience.
• 🛠️ Zero-Distraction Rendering: Intelligent filtering of metadata and redundant headers.

---

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Styling	Tailwind CSS + Custom CSS Modules
CMS	Notion API
Icons	Material Symbols + Custom SVGs
Fonts	DM Sans / Google Fonts

---

⚙️ Setup & Development

1. Prerequisites

• Node.js 18.x or above
• A Notion API Integration Token
• Notion Database with compatible property mapping (Status, Category, Group Index)

2. Environment Variables

Create a .env.local file with the following:

NOTION_TOKEN=secret_your_token_here
NOTION_PAGE_ID=your_master_page_id

3. Installation

npm install

4. Run Locally

npm run dev

---

🖥️📱 Desktop + Mobile Builds

This repo can be shipped as:

• Web (standard Next.js)
• Mobile (Capacitor wrapper around the exported out/)
• Desktop (Tauri wrapper around the exported out/)

Export build (offline-capable bundle)

npm run build:export

This generates:

• out/ (static site)
• out/sw-manifest.json (precache list for public/sw.js)

Mobile

See apps/mobile/README.md.

Desktop

See apps/desktop/README.md.

---

🌍 Deployment

Easily host with Vercel or any Node.js environment.

Hosting on Vercel

1. Connect your GitHub repository.
2. Add your NOTION_TOKEN and NOTION_PAGE_ID to the environment variables.
3. Your celestial blog will be live!

---

🧬 Architecture

graph TD
  A[Notion Master Page] --> B[Notion API Integration]
  B --> C[Next.js App Router]
  C --> D[Category Map Grid]
  D --> E[Group Curriculum View]
  E --> F[Article Content (Markdown/RichText)]
  F --> G[End User Learning Experience]

Loading

---

🧑‍💻 Author

Deepak Kumar (DPK) Curious Engineer & Backend Architect Portfolio • GitHub • LinkedIn

---

Made with joy for curious engineers.