Fix additional repository issues: env config, image handling, scripts, and docs

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>

Author: Copilot

.env.example

@@ -0,0 +1,18 @@
+# Development Environment Variables
+# Copy this file to .env.local and update values as needed
+
+# Next.js Configuration
+NEXT_TELEMETRY_DISABLED=1
+
+# GitHub Configuration (for development)
+# GITHUB_TOKEN=your_github_token_here
+
+# API URLs (for future integrations)
+# API_BASE_URL=http://localhost:3000/api
+
+# Feature Flags (for future use)
+# ENABLE_ANALYTICS=false
+# ENABLE_ERROR_REPORTING=false
+
+# Database Configuration (for future use)
+# DATABASE_URL=postgresql://username:password@localhost:5432/codestorm_hub

README.md

@@ -48,11 +48,34 @@ This project implements a comprehensive design system based on:
 
 ## Development
 
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run build:github-pages` - Build for GitHub Pages deployment
+### Environment Setup
+
+1. Copy the environment example file:
+```bash
+cp .env.example .env.local
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+### Available Scripts
+
+- `npm run dev` - Start development server with Turbopack
+- `npm run build` - Build for production (GitHub Pages optimized)
 - `npm run start` - Start production server
-- `npm run lint` - Run ESLint
+- `npm run lint` - Run ESLint with auto-fix
+- `npm run type-check` - Run TypeScript type checking
+- `npm run dev:clean` - Clean build cache and start dev server
+
+### Code Quality
+
+This project enforces strict code quality standards:
+- TypeScript strict mode
+- ESLint with Next.js recommended rules
+- Accessibility compliance (WCAG 2.1 AA)
+- Performance optimization (Core Web Vitals)
 
 ## Deployment
 

next.config.ts

@@ -16,8 +16,38 @@ const nextConfig: NextConfig = {
         hostname: "github.com",
         pathname: "/CodeStorm-Hub/**",
       },
+      {
+        protocol: "https", 
+        hostname: "images.unsplash.com",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com", 
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "ui-avatars.com",
+        pathname: "/**",
+      },
     ],
   },
+
+  // Performance optimizations
+  poweredByHeader: false,
+
+  // TypeScript configuration
+  typescript: {
+    // Type checking is handled by the CI pipeline
+    ignoreBuildErrors: false,
+  },
+
+  // ESLint configuration
+  eslint: {
+    // Linting is handled by the CI pipeline
+    ignoreDuringBuilds: false,
+  },
 };
 
 export default nextConfig;

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
+    "dev": "NEXT_TELEMETRY_DISABLED=1 next dev --turbopack",
+    "build": "NEXT_TELEMETRY_DISABLED=1 next build --turbopack",
     "start": "next start",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
+    "type-check": "tsc --noEmit",
+    "dev:clean": "rm -rf .next && npm run dev"
   },
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",

src/components/ui/avatar.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import Image from "next/image"
+import { cn } from "@/lib/utils"
+import { getImageWithFallback } from "@/lib/image-utils"
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string
+  alt: string
+  size?: number
+  fallback?: string
+}
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, src, alt, size = 40, fallback, ...props }, ref) => {
+    const [imageSrc, setImageSrc] = React.useState(src)
+    const { src: optimizedSrc, fallbackSrc } = getImageWithFallback(src, alt)
+
+    const handleError = React.useCallback(() => {
+      if (fallback) {
+        setImageSrc(fallback)
+      } else if (fallbackSrc && imageSrc !== fallbackSrc) {
+        setImageSrc(fallbackSrc)
+      }
+    }, [fallback, fallbackSrc, imageSrc])
+
+    React.useEffect(() => {
+      setImageSrc(optimizedSrc)
+    }, [optimizedSrc])
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-muted overflow-hidden",
+          className
+        )}
+        style={{ width: size, height: size }}
+        {...props}
+      >
+        <Image
+          src={imageSrc}
+          alt={alt}
+          width={size}
+          height={size}
+          className="h-full w-full object-cover"
+          onError={handleError}
+          unoptimized={true}
+        />
+      </div>
+    )
+  }
+)
+
+Avatar.displayName = "Avatar"
+
+export { Avatar }

src/lib/image-utils.ts

@@ -0,0 +1,73 @@
+/**
+ * Image utilities for handling external images and fallbacks
+ */
+
+export interface ImageFallbackProps {
+  src: string
+  alt: string
+  fallbackSrc?: string
+}
+
+/**
+ * Generate a fallback avatar using GitHub's avatar API or a placeholder
+ */
+export function generateFallbackAvatar(name: string): string {
+  // Create a simple avatar using the first letter of the name
+  const initials = name
+    .split(' ')
+    .map(word => word[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+
+  // Return a GitHub-style avatar URL or placeholder
+  return `https://ui-avatars.com/api/?name=${encodeURIComponent(initials)}&background=171717&color=fff&size=200`
+}
+
+/**
+ * Validate image URL and provide fallbacks
+ */
+export function getImageWithFallback(src: string, alt: string): ImageFallbackProps {
+  // If it's already a fallback avatar, return as is
+  if (src.includes('ui-avatars.com') || src.includes('github.com')) {
+    return { src, alt }
+  }
+
+  // For Unsplash images, provide a fallback
+  const fallbackSrc = generateFallbackAvatar(alt.replace(' profile picture', '').replace(' avatar', ''))
+  
+  return {
+    src,
+    alt,
+    fallbackSrc
+  }
+}
+
+/**
+ * Handle image load errors by updating src to fallback
+ */
+export function handleImageError(event: React.SyntheticEvent<HTMLImageElement>, fallbackSrc?: string) {
+  const img = event.target as HTMLImageElement
+  if (fallbackSrc && img.src !== fallbackSrc) {
+    img.src = fallbackSrc
+  }
+}
+
+/**
+ * Optimize external image URLs for better loading
+ */
+export function optimizeImageUrl(src: string, width: number, height: number): string {
+  // For Unsplash images, add optimization parameters
+  if (src.includes('unsplash.com')) {
+    const url = new URL(src)
+    url.searchParams.set('w', width.toString())
+    url.searchParams.set('h', height.toString()) 
+    url.searchParams.set('fit', 'crop')
+    url.searchParams.set('crop', 'face')
+    url.searchParams.set('auto', 'format')
+    url.searchParams.set('q', '80')
+    return url.toString()
+  }
+  
+  return src
+}