Improve UI/UX: refactor filter pills, redesign resource cards, add GitHub stars, and remove broken link

- Refactor filter pills to use horizontal scrolling with outline style for inactive pills
- Redesign resource cards: move like button to top-right, remove date, improve tag styling
- Add color-coded tags (blue for css/html/layout, yellow for js/ts/react, green for testing, purple for accessibility)
- Add GitHub stars display with golden star icon for social proof
- Remove broken Dive Into HTML5 resource link

Author: codesandtags

README.md

@@ -60,7 +60,6 @@
 
 ### HTML5
 
-- [Dive Into HTML5](http://diveintohtml5.info/index.html) - Classic comprehensive guide to HTML5 features. Still valuable for understanding semantic HTML and modern web standards.
 - [HTML5 Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/) - Quick reference guide for HTML5 tags and attributes. Great for daily development.
 - [Responsive Images Guide](http://cloudinary.com/blog/automatically_art_directed_responsive_images) - Excellent article explaining responsive images with practical examples. Essential for modern web development.
 

src/app/components/App.tsx

@@ -1,5 +1,5 @@
-import { useState, useMemo } from "react";
-import { Github, PlusCircle } from "lucide-react";
+import { useState, useMemo, useEffect } from "react";
+import { Github, PlusCircle, Star } from "lucide-react";
 import { SearchBar } from "./SearchBar";
 import { ResourceCard } from "./ResourceCard";
 import { CategoryFilter } from "./CategoryFilter";
@@ -14,6 +14,26 @@ function App() {
     null
   );
   const [likes, setLikes] = useState<Record<string, number>>({});
+  const [githubStars, setGithubStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    // Fetch GitHub stars count
+    const fetchGithubStars = async () => {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/codesandtags/frontend-documentation"
+        );
+        if (response.ok) {
+          const data = await response.json();
+          setGithubStars(data.stargazers_count);
+        }
+      } catch (error) {
+        console.error("Failed to fetch GitHub stars:", error);
+      }
+    };
+
+    fetchGithubStars();
+  }, []);
 
   const resources = useMemo(() => getResources(), []);
 
@@ -69,6 +89,12 @@ function App() {
               >
                 <Github className="h-5 w-5" />
                 <span className="hidden sm:inline">GitHub</span>
+                {githubStars !== null && (
+                  <span className="flex items-center gap-1 text-sm">
+                    <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+                    <span>{githubStars.toLocaleString()}</span>
+                  </span>
+                )}
               </a>
               <a
                 href="https://github.com/codesandtags/frontend-resources/blob/main/CONTRIBUTING.md"

src/app/components/CategoryFilter.tsx

@@ -34,14 +34,14 @@ export function CategoryFilter({
   onSelect,
 }: CategoryFilterProps) {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex overflow-x-auto gap-2 scrollbar-hide pb-2">
       <button
         onClick={() => onSelect(null)}
-        className={`px-4 py-2 rounded-full text-sm font-medium transition-all
+        className={`px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap flex-shrink-0
           ${
             !selectedCategory
               ? "bg-blue-600 text-white"
-              : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+              : "bg-transparent border border-gray-600 text-gray-400 hover:bg-gray-800"
           }`}
       >
         All
@@ -50,11 +50,11 @@ export function CategoryFilter({
         <button
           key={category}
           onClick={() => onSelect(category)}
-          className={`px-4 py-2 rounded-full text-sm font-medium transition-all
+          className={`px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap flex-shrink-0
             ${
               selectedCategory === category
                 ? "bg-blue-600 text-white"
-                : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+                : "bg-transparent border border-gray-600 text-gray-400 hover:bg-gray-800"
             }`}
         >
           {category}

src/app/components/ResourceCard.tsx

@@ -10,8 +10,17 @@ interface ResourceCardProps {
 
 export function ResourceCard({ resource, onLike }: ResourceCardProps) {
   return (
-    <div className="bg-gray-800 rounded-xl border border-gray-700 p-6 transition-all hover:border-gray-600 hover:shadow-lg hover:shadow-black/20">
-      <div className="flex justify-between items-start mb-4">
+    <div className="relative bg-gray-800 rounded-xl border border-gray-700 p-6 transition-all hover:border-gray-600 hover:shadow-lg hover:shadow-black/20">
+      {/* Like button in top-right corner */}
+      <button
+        onClick={() => onLike(resource.id)}
+        className="absolute top-4 right-4 flex items-center gap-1 bg-gray-800 rounded px-3 py-1.5 text-gray-400 hover:text-pink-400 hover:bg-gray-700 transition-colors z-10"
+      >
+        <Heart className="h-4 w-4" />
+        <span className="text-sm">{resource.likes || 0}</span>
+      </button>
+
+      <div className="flex justify-between items-start mb-4 pr-20">
         <div className="flex items-start gap-3">
           <div className="text-blue-400">
             <TechIcon category={resource.category} />
@@ -29,32 +38,19 @@ export function ResourceCard({ resource, onLike }: ResourceCardProps) {
           href={resource.url}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-gray-400 hover:text-blue-400 transition-colors"
+          className="text-gray-400 hover:text-blue-400 transition-colors mt-1"
         >
           <ExternalLink className="h-5 w-5" />
         </a>
       </div>
 
       <p className="text-gray-300 mb-4">{resource.description}</p>
 
-      <div className="flex flex-wrap gap-2 mb-4">
+      <div className="flex flex-wrap gap-2">
         {resource.tags.map((tag) => (
           <Tag key={tag} label={tag} />
         ))}
       </div>
-
-      <div className="flex justify-between items-center text-sm">
-        <button
-          onClick={() => onLike(resource.id)}
-          className="flex items-center gap-1 text-gray-400 hover:text-pink-400 transition-colors"
-        >
-          <Heart className="h-4 w-4" />
-          <span>{resource.likes || 0}</span>
-        </button>
-        <span className="text-gray-500">
-          Added on {new Date(resource.addedOn).toLocaleDateString()}
-        </span>
-      </div>
     </div>
   );
 }

src/app/components/Tag.tsx

@@ -10,7 +10,7 @@ export function Tag({ label }: TagProps) {
 
   return (
     <span
-      className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium ${bg} ${text}`}
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${bg} ${text}`}
     >
       <TagIcon className="h-2 w-2" />
       {label}

src/app/globals.css

@@ -19,3 +19,13 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Hide scrollbar for horizontal scrolling filter pills */
+.scrollbar-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}

src/app/utils/tagColors.ts

@@ -6,26 +6,31 @@ interface TagColorMap {
 }
 
 export const getTagColors = (tag: string): { bg: string; text: string } => {
+  const tagLower = tag.toLowerCase();
+
   const colorMap: TagColorMap = {
-    react: { bg: 'bg-blue-600/20', text: 'text-blue-300' },
-    vue: { bg: 'bg-emerald-600/20', text: 'text-emerald-300' },
-    angular: { bg: 'bg-red-600/20', text: 'text-red-300' },
-    typescript: { bg: 'bg-blue-600/20', text: 'text-blue-300' },
-    javascript: { bg: 'bg-yellow-600/20', text: 'text-yellow-300' },
-    css: { bg: 'bg-pink-600/20', text: 'text-pink-300' },
-    html: { bg: 'bg-orange-600/20', text: 'text-orange-300' },
-    framework: { bg: 'bg-purple-600/20', text: 'text-purple-300' },
-    library: { bg: 'bg-indigo-600/20', text: 'text-indigo-300' },
-    tool: { bg: 'bg-cyan-600/20', text: 'text-cyan-300' },
-    testing: { bg: 'bg-green-600/20', text: 'text-green-300' },
-    state: { bg: 'bg-violet-600/20', text: 'text-violet-300' },
-    async: { bg: 'bg-fuchsia-600/20', text: 'text-fuchsia-300' },
-    bundler: { bg: 'bg-amber-600/20', text: 'text-amber-300' },
-    development: { bg: 'bg-teal-600/20', text: 'text-teal-300' },
+    // Blue for css, html, layout
+    css: { bg: 'bg-blue-900', text: 'text-blue-300' },
+    html: { bg: 'bg-blue-900', text: 'text-blue-300' },
+    html5: { bg: 'bg-blue-900', text: 'text-blue-300' },
+    layout: { bg: 'bg-blue-900', text: 'text-blue-300' },
+
+    // Yellow for javascript, typescript, react
+    javascript: { bg: 'bg-yellow-900', text: 'text-yellow-300' },
+    typescript: { bg: 'bg-yellow-900', text: 'text-yellow-300' },
+    react: { bg: 'bg-yellow-900', text: 'text-yellow-300' },
+
+    // Green for testing
+    testing: { bg: 'bg-green-900', text: 'text-green-300' },
+    test: { bg: 'bg-green-900', text: 'text-green-300' },
+
+    // Purple for accessibility
+    accessibility: { bg: 'bg-purple-900', text: 'text-purple-300' },
+    a11y: { bg: 'bg-purple-900', text: 'text-purple-300' },
   };
 
-  // Default color for tags without specific mapping
-  const defaultColor = { bg: 'bg-gray-600/20', text: 'text-gray-300' };
+  // Default: low-contrast gray style
+  const defaultColor = { bg: 'bg-gray-800', text: 'text-gray-400' };
 
-  return colorMap[tag.toLowerCase()] || defaultColor;
+  return colorMap[tagLower] || defaultColor;
 };

src/data/resources.json

@@ -1,13 +1,4 @@
 [
-  {
-    "id": "dive-into-html5",
-    "title": "Dive Into HTML5",
-    "url": "http://diveintohtml5.info/index.html",
-    "description": "Classic comprehensive guide to HTML5 features. Still valuable for understanding semantic HTML and modern web standards.",
-    "category": "Learning",
-    "tags": ["html5", "semantic", "guide"],
-    "addedOn": "2024-01-01"
-  },
   {
     "id": "responsive-images-guide",
     "title": "Responsive Images Guide",