🔥 Lit Resource Board

A developer challenge submission for recreating a resource board UI using Lit Web Components.

📖 Overview

This project demonstrates:

🧩 Componentization with Lit

⚡ Dynamic filtering and bookmark toggling

🎨 Reusable UI with category chips and article cards

🧪 Tests for core components using @web/test-runner

🧠 Clean, maintainable JavaScript using modern ES modules

📸 Demo

🖼️ A short Loom/video demo or screenshots would go here if deployed (optional but great for UX presentation).

🛠️ Tech Stack Layer Technology Frontend Lit (Web Components) Language Vanilla JavaScript (ES Modules) Styling Custom CSS — gradient backgrounds, glass UI Testing @web/test-runner, @open-wc/testing, chai Build Tools None (runs directly in browser) 🚀 Getting Started

You don’t need to install or compile anything to view the app — it runs directly in the browser.

💻 Option 1: Run Locally with a Simple Server

Use Python or any static file server:

Python 3.x

python3 -m http.server

Then visit:

http://localhost:8000

💻 Option 2: Open index.html Directly

You can also open index.html in any modern browser (Chrome, Edge, Firefox). However, using a local server is recommended for CORS consistency when testing imports.

🧪 Running Tests

1. Install Dependencies npm install

2. Run the Tests npm test

3. (Optional) Run in Browser Debug Mode npx web-test-runner --manual

This opens a browser view of all test files and allows you to inspect the console for detailed results.

⚠️ Known Issues 🧩 Web Test Runner Import Quirk

The current setup for @web/test-runner may throw an error like:

SyntaxError: The requested module './index.js' does not provide an export named 'default'

This is a known issue with Web Test Runner’s internal bootstrapping when no bundler or build system is used.

The test files (article-card.test.js, category-chip.test.js) themselves are valid — they verify rendering and reactive property behavior correctly.

🖱️ Non-Interactive Cards

Cards are intentionally designed to:

Display article data

Toggle bookmark state

They do not open modals or redirect anywhere — this matches the developer challenge requirements.

💾 No Persistent Storage

Bookmark and filter states reset on reload since this is a purely front-end demonstration with no database or API layer.

🎯 Future Improvements

Persistent bookmarks using localStorage or IndexedDB so selections remain after reloads

Article detail modal with descriptions, links, or preview images

Subtle animations (fade-in cards, chip transitions) for smoother UX

Theme toggle (light/dark mode)

Accessibility enhancements like ARIA roles and keyboard navigation

Optional API integration for loading live resource data instead of static JSON

✅ Summary

The Lit Resource Board is a lightweight, modular project demonstrating component-based design, reactive properties, and smooth UI behavior using Lit Web Components.

It’s built for clarity, reusability, and modern front-end best practices — with clean structure, dynamic interactivity, and a sleek visual design.

👩🏾‍💻 Created by: Nikki Dunlap 💡 Built with passion, polish, and pure web tech.