Developer Command Center

A premium, all-in-one productivity dashboard for developers, built purely with HTML, CSS, and vanilla JavaScript.

Overview

The Developer Command Center is a local-first, static workstation designed to reduce tab clutter and centralize everyday developer tasks. It features a project tracker, snippet vault, API endpoint organizer, regex tester, JSON formatter, live markdown preview, and more.

Because it relies purely on your browser's localStorage and requires no backend, it is blazingly fast, works entirely offline, and is perfectly suited for hosting via GitHub Pages.

---

🚀 Features

• GitHub Project Tracker: Manage repos, demos, and track progress (Planning, In Progress, Completed).
• Code Snippet Manager: Save, tag, and quickly copy reusable code across multiple languages.
• API Collection: Document endpoints, store request templates, and keep track of auth notes.
• JSON Formatter & Validator: Beautify, minify, and validate raw JSON with instant error feedback.
• Regex Tester: Test patterns in real-time with visual match highlighting.
• Markdown Previewer: Write markdown and see the rendered HTML instantly.
• Quick Notes: Jot down dev logs, TODOs, and daily ideas using a masonry-style board.
• Bookmarks Manager: Keep docs and essential tools just a click away.
• Cheat Sheet: Reference standard development ports, Git commands, and save custom environment variables.
• Global Search: Press Ctrl+K to search across your projects, snippets, APIs, notes, and bookmarks.
• Export / Import: Easily back up all your data into a JSON file, and restore it anywhere.

---

🛠️ Tech Stack

• HTML5 (Semantic structure)
• CSS3 (Custom properties, Flexbox/Grid, Dark Mode)
• Vanilla JavaScript (ES6+, DOM manipulation, LocalStorage)
• Zero Dependencies (No React, no bundlers, no external libraries)

---

📂 Folder Structure

.
├── index.html      # Main HTML layout, modals, and views
├── styles.css      # Custom styling, dark/light theme, and layout
├── script.js       # Core logic, module controllers, and state management
└── README.md       # Project documentation

---

💻 Local Setup

Since there is no build step or backend, running the app locally is incredibly simple.

1. Clone the repository:

   git clone https://github.com/yourusername/developer-command-center.git

2. Navigate to the directory:

   cd developer-command-center

3. Open index.html: Double-click index.html in your file explorer, or use an extension like Live Server in VSCode for auto-reloading.

---

🌍 GitHub Pages Deployment

Hosting this project is free and easy with GitHub Pages.

1. Push this repository to GitHub.
2. Navigate to your repository Settings.
3. In the left sidebar, click on Pages.
4. Under Source, select the main branch and the / (root) folder.
5. Click Save.
6. Wait 1-2 minutes. Your command center will be live at https://muhammadtaimoorajmal.github.io/dev-command-center/.

---

📖 Section-by-Section Guide

Dashboard Home

Get an at-a-glance overview of your active projects, total snippets, API counts, and recently updated items.

Projects

Keep track of the repositories you are currently working on. You can set statuses (Planning, In Progress, Completed), assign priorities, and store live demo links.

Snippets

A vault for your reusable code. Categorize by language, add tags, and quickly copy the code to your clipboard via a custom monospace UI.

APIs & Requests

Document the endpoints you frequently interact with. Store base URLs, sample headers, and request bodies for quick reference during development.

JSON Formatter

Paste raw JSON strings to immediately beautify or minify them. Invalid JSON will trigger a clear, readable error banner.

Regex Tester

Provide a pattern, set your flags (e.g., gmi), and enter a test string. Matches will highlight directly in the text pane underneath.

Markdown Previewer

A lightweight, offline markdown renderer supporting headings, blockquotes, lists, and code blocks. Write on the left, view on the right, and copy the HTML output instantly.

Quick Notes

A colorful, masonry-grid layout for storing meeting notes, bug tickets, and random thoughts.

Bookmarks & Cheat Sheet

Store essential documentation URLs and keep a quick reference board for local ports and Git shortcuts.

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + K	Open Global Search
Escape	Close active modal or search

---

💾 Data Persistence

The Developer Command Center uses localStorage.

• Your data never leaves your browser.
• It survives page reloads and browser restarts.
• Note: If you clear your browser's site data, your command center data will be lost. Always use the Export feature for backups.

Export / Import Guide

1. Click the Settings (Gear) icon in the bottom-left sidebar.
2. Click Export Data to download a dev-command-center-backup.json file.
3. To restore on another device or browser, click Import Data and select the JSON file.

---

📸 Screenshots

---

🎨 Customization

To tweak the design, open styles.css and modify the CSS variables at the top of the file:

:root {
    --bg-main: #0f111a;
    --accent-primary: #6366f1;
    /* ... */
}

---

🔮 Future Enhancements

• Drag and drop reordering for projects and bookmarks.
• Export individual snippets as gists.
• Add compact view modes for dense data display.
• Syncing capability via GitHub Gist or Google Drive integration.

---

⚠️ Troubleshooting

• My data disappeared! Make sure you haven't recently cleared your browser's history or local storage for the domain.
• JSON Formatter isn't working: Ensure you are passing valid JSON. Trailing commas or single quotes will cause validation errors.
• Global search isn't finding my note: Search indexes the titles, content, tags, and languages. Make sure your spelling matches the entry.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Developed with ❤️ by

Muhammad Taimoor Ajmal

• 💼 LinkedIn: Muhammad Taimoor Ajmal