Redesign COP3530 course website as modern Tailwind CSS dashboard

[Copilot]

Completely transformed the minimal COP3530 course website into a comprehensive, modern dashboard powered by Tailwind CSS. The redesign creates an intuitive interface for accessing course materials, programming problems, schedules, and announcements while remaining a simple static GitHub Pages site with no build pipeline required.

What Changed

From: Basic HTML file with "Test2" content
To: Full-featured course dashboard with 7 complete pages and modern UI

New Features

Modern Design System

• Responsive Dashboard: Card-based layout that works seamlessly across all devices
• Dark Mode Support: Toggle between light and dark themes with system preference detection
• Persistent Sidebar: Clean navigation with mobile-friendly collapsible menu
• Tailwind CSS: Utility-first styling via CDN for rapid development without build complexity

Content Management

• Course Modules: Browse weekly topics with direct links to COP3530/Instructional-Content repository
• Programming Problems: Searchable, filterable problem bank with difficulty ratings and tags
• Announcements: Chronological course updates with relative timestamps and search
• Schedule: Week-by-week breakdown of topics, assignments, and due dates
• Resources: Development tools, textbooks, academic policies, and learning materials
• Syllabus: Comprehensive course information, grading policies, and university requirements

Interactive Features

• Real-time Search: Filter content across all sections without server requests
• Tag-based Filtering: Multi-select tag filtering for programming problems with visual feedback
• Cross-repo Integration: Seamless links to external course repositories
• Client-side Rendering: Fast, responsive interface using vanilla JavaScript

Technical Implementation

Architecture

• Static HTML/CSS/JavaScript: No build process required, perfect for GitHub Pages
• JSON-based Content: Easy content management through data/ directory files
• Modular JavaScript: Clean separation of concerns with component-based architecture
• Semantic HTML: Full accessibility support with ARIA labels and skip links

New File Structure

├── index.html                 # Dashboard home page
├── modules.html              # Course modules browser  
├── problems.html             # Programming problems catalog
├── announcements.html        # Course announcements
├── schedule.html             # Weekly schedule table
├── resources.html            # Learning resources and tools
├── syllabus.html             # Course syllabus and policies
├── assets/
│   ├── css/custom.css        # Custom styles and theme overrides
│   └── js/                   # Modular JavaScript components
├── data/
│   ├── modules.json          # Course module data
│   ├── problems.json         # Programming problems database  
│   └── announcements.json    # Course announcements
└── README.md                 # Comprehensive documentation

Sample Data Integration

• 4 Course Modules: Week 1-4 covering algorithms, data structures, trees, and hashing
• 8 Programming Problems: Ranging from easy array problems to hard graph algorithms
• 5 Course Announcements: Welcome messages, assignment releases, and important dates

Key Benefits

✅ Immediate Deployment: Works instantly on GitHub Pages with no build configuration
✅ Mobile-First Design: Fully responsive across desktop, tablet, and mobile devices
✅ Accessibility Compliant: WCAG guidelines with proper semantic HTML structure
✅ Cross-Repository Integration: Direct links to course content and problem repositories
✅ Easy Content Management: Simple JSON file updates to modify course information
✅ Future-Proof Architecture: Clean foundation for potential build pipeline migration

Content Management Workflow

Instructors can now easily update course content by editing JSON files:

// Add new programming problem
{
  "id": "pp-009",
  "title": "Heap Sort Implementation", 
  "topic": "Sorting",
  "difficulty": "Medium",
  "tags": ["heap", "sorting", "in-place"],
  "repoPath": "https://github.com/COP3530/Programming-Problems/tree/main/sorting/heap-sort",
  "description": "Implement heap sort algorithm with in-place sorting."
}

The redesigned website successfully modernizes the course experience while maintaining the simplicity and immediate deployment benefits of a static site. Students now have a professional, intuitive interface to access all course materials, while instructors can easily manage content through simple file updates.

This pull request was created as a result of the following prompt from Copilot chat.

Goal

Redesign the COP3530 course website as a modern, responsive Tailwind CSS powered dashboard that aggregates instructional content (from COP3530/Instructional-Content) and programming problems (from COP3530/Programming-Problems) while remaining a simple static GitHub Pages site (no build pipeline required initially).

Constraints & Approach

• Keep the site 100% static so it works on GitHub Pages without extra build steps. (Optional future enhancement: migrate to a generator like Eleventy.)
• Use Tailwind via CDN (<script src="https://cdn.tailwindcss.com"></script>) for rapid iteration. Provide a clear TODO in README for migrating to a compiled Tailwind setup if desired.
• No server-side code. All dynamic behavior via lightweight vanilla JS.
• Cross-repo content (Instructional-Content & Programming-Problems) will be linked rather than inlined. (Future enhancement could fetch raw content via GitHub API.)

New Information Architecture

1. Dashboard (index.html)
   • Hero: Course title, semester, quick actions.
   • Cards: Announcements (local JSON), Next Upcoming Module, Recently Added Problems, Quick Links.
2. Modules (modules.html)
   • Search + filter by topic/week.
   • Data sourced from data/modules.json (manually curated mapping to Instructional-Content repo paths).
3. Programming Problems (problems.html)
   • Searchable, filterable by topic, difficulty, tag.
   • Data from data/problems.json referencing directories/files in COP3530/Programming-Problems.
4. Schedule (schedule.html)
   • Week-by-week table with module, readings, lab, due items.
5. Resources (resources.html)
   • General references, IDE setup, style guide, academic honesty.
6. Syllabus (syllabus.html)
   • Static page (can later be sourced from markdown if build step added).
7. Announcements (announcements.html)
   • Renders from data/announcements.json (reverse chronological), with client-side filtering.

Shared UI Elements

• Persistent responsive sidebar (collapsible on mobile) + top bar.
• Dark mode toggle (localStorage persisted, uses dark class on html).
• Breadcrumb component.
• Reusable card, badge, and table utility classes (light wrapper utilities in a small custom CSS file if needed).

Files To Add / Modify

1. index.html (new) – Dashboard layout.
2. modules.html, problems.html, schedule.html, syllabus.html, resources.html, announcements.html.
3. /assets/
   • css/custom.css (minimal overrides, e.g., scrollbar, transitions, print tweaks)
   • js/theme.js (dark mode + prefers-color-scheme sync)
   • js/search.js (generic fuzzy-ish filter for lists)
   • js/modules.js (fetch + render modules)
   • js/problems.js (fetch + render problems + tag filtering)
   • js/announcements.js (fetch + render announcements)
   • js/components.js (helper functions: createCard, renderTag, relativeDate, etc.)
4. /data/
   • modules.json (initial seed with a handful of sample module entries)
   • problems.json (sample problems with fields: id, title, topic, difficulty, tags[], repoPath, description)
   • announcements.json (sample announcements with id, title, body (HTML or markdown string), posted_at (ISO))
5. README.md – Update with new structure, contribution workflow, future enhancements.

Sample Data (Seed)

modules.json sample entry:
[
{
"id": "week01-intro",
"title": "Introduction & Algorithm Analysis",
"week": 1,
"topics": ["Algorithms", "Complexity"],
"summary": "Course overview, Big-O basics.",
"contentUrl": "https://github.com/COP3530/Instructional-Content/tree/main/Week01",
"resources": [
{"label": "Slides", "url": "https://github.com/COP3530/Instructional-Content/blob/main/Week01/slides.pdf"}
]
}
]
problems.json sample entry:
[
{
"id": "pp-001",
"title": "Two Sum Variant",
"topic": "Arrays",
"difficulty": "Easy",
"tags": ["array", "hash-map"],
"repoPath": "https://github.com/COP3530/Programming-Problems/tree/main/arrays/two-sum-variant",
"description": "Find two indices whose values sum to target with O(n) time using hashing."
}
]
announcements.json sample entry:
[
{
"id": "2025-01-10-welcome",
"title": "Welcome to COP3530!",
"body": "Semester kicks off next week. Make sure you have a working C++ toolchain.",
"posted_at": "2025-01-10T12:00:00Z"
}
]

JS Behavior Requirements

• Generic fetchJSON(path) with error handling (graceful fallback message on failure).
• Filtering: text input filters by case-insensitive substring match across title + tags/topics.
• Tag pill click toggles a filter (multi-select) + active state styling.
• Problems difficulty badges color-coded (Easy=green, Medium=amber, Hard=rose).
• Modules sorted by week ascending; problems sorted alphabetically unless search active.
• Announcements sorted descending by date with relative time (e.g., "3 days ago").

Accessibility & UX

• Ensure semantic HTML (nav, main, header, footer, section, table captions).
• Focus styles visible; skip-to-content link.
• Sufficient color contrast in both light/dark modes.

Dark Mode

• On first load: checks localStorage; if absent, uses prefers-color-scheme.
• Toggle updates localStorage and root html class.

README Updates

Include sections:

• Overview / Tech Stack
• Project Structure Tree
• How to Add Modules & Problems (edit JSON)
• Future Roadmap (build Tailwind, GitHub API content sync, markdown pipeline, search indexing)

Future Enhancement TODOs (place in README and code comments)

• Replace CDN Tailwind with compiled build (purge unused classes).
• Add offline caching via Service Worker.
• Fetch live file listings from repos using GitHub REST API (rate-limit aware).
• Support markdown rendering for announcements and syllabus.

Acceptance Criteria

• All new pages load without console errors.
• Lighthouse basic pass (no major accessibility violations).
• Mobile breakpoint (<=640px) collapses sidebar into slide-over menu.
• Search & filtering work client-side with provided sample data.
• No external frameworks besides Tailwind CDN (and optional small icon CDN like Heroicons via SVG inline).

Implementation Notes

• Keep HTML organized: top-level wrapper with flex (sidebar + content). Sidebar fixed on large screens, off-canvas on mobile (toggle button in top bar).
• Reusable small JS utilities in components.js to reduce duplication across pages.
• Minimal inline styles; rely on Tailwind utility classes.

Please implement the above by adding the described files with initial functional content and seed data, updating README.md, and ensuring navigation links exist on every page. Create the pull request with a descriptive title and summary outlining the new architecture and next steps.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.