UITS_Dev_Lab

Motto: "Stop wrestling with environment errors. Start building what matters."

UITS_Dev_Lab is a high-contrast, production-ready Single Page Application (SPA) designed to standardize developer workstation environments, eliminate configuration friction, and provide curated code vault resources, setup guides, and community leaderboards.

---

Key Features

• Interactive 4-Step Roadmap: Visual onboarding diagram detailing CLI setup, Git version control, project scaffolding, and peer review standards with interactive modal details.
• Filterable Setup Guides: Step-by-step toolchain walkthroughs with multiline step formatting, category filters, and live search.
• Vault Resources Dashboard: Curated repository templates, automation scripts, and documentation guidelines.
• Grindset Activity Leaderboard: Community member activity rankings, contribution streaks, target engineering roles, and tech stack badges.
• Community Verification Flow: 2-step onboarding guide for Student ID verification and channel invite access.
• Dark & Light Mode System: Instant theme switcher powered by CSS custom properties with localStorage preference persistence.
• Zero Dependencies: Built entirely with vanilla HTML5, semantic CSS3, and modern ES6+ JavaScript. No external libraries or frameworks required.

---

File Architecture

dev/
├── index.html          # SPA semantic structure, navigation, viewports, and modal overlay
├── style.css           # Custom CSS design system, dark/light theme variables, responsive layout
├── data.json           # Dynamic dataset (Roadmap, Guides, Vault Resources, Leaderboard)
├── render.js          # Modular DOM rendering engine
├── app.js             # SPA router, state manager, data fetcher, and event handlers
├── README.md           # Project overview and local setup guide
└── Documentation.md    # Technical documentation & comprehensive version history

---

Quick Start / Running Locally

Because the application fetches data.json asynchronously using the standard Fetch API, it should be served via a local web server (to avoid browser file:// CORS restrictions).

Option 1: VS Code Live Server

1. Open the project folder in VS Code.
2. Click Go Live on the bottom status bar (or right-click index.html and select Open with Live Server).

Option 2: Python HTTP Server

# Python 3.x
python -m http.server 8000

Then navigate to http://localhost:8000 in your web browser.

Option 3: Node.js static server

npx serve .

---

Aesthetic & Design Rules

• Zero Gradients: Uses flat, solid color palettes and clean borders for maximum contrast and legibility.
• Zero Emojis & Zero Em-Dashes: Clean text copy utilizing clean typography and standard punctuation.
• High Contrast Palettes:
  • Dark Mode (Default): Pure black (#000000 / #0a0a0a) background with crisp white text.
  • Light Mode: Off-white (#f8f9fa) background with dark slate text and sharp blue/green accents.

---

License & Community Hub

Part of the UITS Community Ecosystem. Connect with the parent hub at ou1ts.netlify.app.