Safin313-stack/Assingment-B13-A5-Github-Issue-Tracker

_{✦ No login  ·  No install  ·  Opens instantly in your browser ✦}

🖥️ App Flow

╔══════════════════════════════════════════════════════════╗
║                  🔐 Login Page                           ║
║                                                          ║
║   Username :  [ admin         ]                          ║
║   Password :  [ •••••••••     ]                          ║
║                                                          ║
║        [ Sign in ]     [ Use demo → ]                    ║
╠══════════════════════════════════════════════════════════╣
║            authenticated  ↓                             ║
╠══════════════════════════════════════════════════════════╣
║  🐙 GitHub Issues Tracker         [ 🔍 Search ]          ║
╠══════════════════════════════════════════════════════════╣
║   [ All ]  [ Open ]  [ Closed ]                          ║
║                                                          ║
║  ╔══════════════════════╗  ╔══════════════════════╗      ║
║  ║  🟢 #42  Bug fix     ║  ║  🔴 #41  Crash fix   ║      ║
║  ║  opened  2 days ago  ║  ║  closed  5 days ago  ║      ║
║  ╚══════════════════════╝  ╚══════════════════════╝      ║
║                                                          ║
║         [ click any card → full detail modal ]           ║
╚══════════════════════════════════════════════════════════╝

🔑 Demo Credentials

Username :  admin
Password :  admin123

Click "Use demo →" on the login page to autofill instantly

🧠 JavaScript Concepts in Action

This project covers core ES6+ concepts applied in a real API-driven app.

📦 var vs let vs const

var oldWay  = 'function-scoped, can be redeclared';  // avoid
let counter = 0;                                      // block-scoped, updatable
const API   = 'https://api.github.com/repos/...';    // block-scoped, fixed

🌊 Spread Operator

const allIssues    = [...openIssues, ...closedIssues];
const updatedIssue = { ...issue, state: 'closed' };

🔁 map · filter · forEach

const titles  = issues.map(i => i.title);              // transform
const open    = issues.filter(i => i.state === 'open'); // condition
issues.forEach(i => renderCard(i));                    // loop, no return

➡️ Arrow Functions

const getLabel = (issue) => issue.labels.map(l => l.name).join(', ');

btnLogin.addEventListener('click', () => validateAndLogin());

🧵 Template Literals

cardsGrid.innerHTML += \`
  <div class="issue-card" data-id="\${issue.number}">
    <h3>\${issue.title}</h3>
    <span class="badge \${issue.state}">\${issue.state}</span>
  </div>
\`;

📚 References: MDN Web Docs · Google · ChatGPT

📁 Project Structure

Assingment-B13-A5-Github-Issue-Tracker/
│
├── 📄 index.html          ← Login page · app shell · modal overlay
├── ⚙️  app.js             ← Auth · API fetch · render · search · tabs
├── 🎨 style.css           ← Login card · navbar · grid · modal
│
├── 🖼️  github-logo.png    ← Navbar and login branding
├── 🖼️  Aperture.png       ← Issues panel header icon
├── 🟢 Open-Status.png     ← Open issue status indicator
└── 🔴 Closed-Status.png   ← Closed issue status indicator

🚀 Run It Yourself

Option 1 — Live (instant, no setup)

🔗 https://safin313-stack.github.io/Assingment-B13-A5-Github-Issue-Tracker/

Option 2 — Clone and open locally

git clone https://github.com/Safin313-stack/Assingment-B13-A5-Github-Issue-Tracker.git
cd Assingment-B13-A5-Github-Issue-Tracker
open index.html

Option 3 — VS Code Live Server

1. Install Live Server extension
2. Right-click index.html → Open with Live Server
3. Login with demo credentials and explore ✅

🛠️ Tech Stack

┌──────────────────────────────────────────────────┐
│           Frontend · Zero Dependencies           │
├─────────────────┬────────────────────────────────┤
│  HTML5          │  Semantic structure            │
│  CSS3           │  Custom props · flexbox        │
│  JavaScript     │  Vanilla ES6+ · Fetch API      │
│  GitHub REST API│  Live issue data               │
│  Google Fonts   │  Inter typeface                │
└─────────────────┴────────────────────────────────┘

📖 ES6+ Quick Reference

var           → function-scoped · can be redeclared · avoid in modern code
let           → block-scoped · updatable · not redeclarable
const         → block-scoped · fixed · use for values that never change

spread ...    → expands array or object into another
map()         → returns new transformed array
filter()      → returns new filtered array matching a condition
forEach()     → loops through items · returns nothing

arrow =>      → concise function · inherits this from surrounding context
template ``   → backtick strings with ${} for inline expressions

_{MIT License · © 2025 Saharia Hassan Safin · ⭐ Star this repo if it helped you!}