Dashboard

The ShipKit dashboard provides a centralized interface for accessing various development tools and features. This guide covers the dashboard's components, features, and customization options.

Tools Section

The tools section is a key component of the dashboard that provides quick access to various development utilities. It includes a searchable, filterable grid of tools organized by category.

Core Features

// Tool Categories
type ToolCategory =
  | "Formatters"
  | "Testing"
  | "Generators"
  | "Converters"
  | "Security"
  | "Design";

// Tool Interface
interface Tool {
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  href: string;
  isExternal?: boolean;
  category: ToolCategory;
  keywords: string[];
}

Available Tools

The dashboard includes several built-in tools:

1. CSS Easing

   • Visual easing function generator for animations
   • Category: Design
   • Features: Animation curves, timing functions, bezier curves

2. RegEx Tester

   • Test and debug regular expressions
   • Category: Testing
   • Features: Pattern matching, capture groups, flags

3. Cron Expression Generator

   • Generate and validate cron expressions
   • Category: Generators
   • Features: Schedule generation, time expressions

4. Hash Generator

   • Generate various hash types
   • Category: Security
   • Features: MD5, SHA256, encryption tools

5. JWT Debugger

   • Debug and verify JWT tokens
   • Category: Security
   • Features: Token validation, payload inspection

6. CSS Grid Generator

   • Visual grid layout builder
   • Category: Design
   • Features: Layout templates, responsive design

Features

1. Search Functionality

   const filteredTools = tools.filter((tool) => {
     const searchTerms = searchQuery.toLowerCase().split(" ");
     return searchTerms.every(term =>
       tool.title.toLowerCase().includes(term) ||
       tool.description.toLowerCase().includes(term) ||
       tool.keywords.some(keyword => keyword.toLowerCase().includes(term))
     );
   });
   

2. Category Filtering

   const categories = [
     "all",
     ...new Set(tools.map((tool) => tool.category)),
   ] as const;
   

3. Star/Favorite Tools

   const toggleStar = (toolTitle: string) => {
     setStarredTools((prev) => {
       const next = new Set(prev);
       if (next.has(toolTitle)) {
         next.delete(toolTitle);
       } else {
         next.add(toolTitle);
       }
       localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
       return next;
     });
   };
   

4. Tool Cards

   const ToolCardContent = ({
     tool,
     isStarred,
     onToggleStar,
   }: {
     tool: Tool;
     isStarred: boolean;
     onToggleStar: (e: React.MouseEvent) => void;
   }) => (
     // Card implementation with title, description, keywords, and actions
   );
   

Customization

1. Adding New Tools

   const newTool: Tool = {
     title: "Tool Name",
     description: "Tool description",
     icon: IconComponent,
     href: "https://tool-url.com",
     isExternal: true,
     category: "Category",
     keywords: ["keyword1", "keyword2"],
   };
   

2. Styling

   // Card styling with Tailwind CSS
   <Card className="cursor-pointer transition-colors hover:bg-muted/50 group">
     {/* Card content */}
   </Card>
   

3. Layout

   // Responsive grid layout
   <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
     {/* Tool cards */}
   </div>
   

Best Practices

1. Performance

   • Use useAutoAnimate for smooth transitions
   • Implement efficient search filtering
   • Cache starred tools in localStorage

2. Accessibility

   • Include proper ARIA labels
   • Ensure keyboard navigation
   • Provide screen reader support

3. User Experience

   • Smooth animations
   • Responsive design
   • Clear visual feedback

Error Handling

1. External Tool Links

   <Link
     href={tool.href}
     target="_blank"
     rel="noopener noreferrer"
     onClick={(e) => e.stopPropagation()}
   >
     {/* Link content */}
   </Link>
   

2. Local Storage

   useEffect(() => {
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
         setStarredTools(new Set(JSON.parse(stored)));
       }
     } catch (error) {
       console.error('Failed to load starred tools:', error);
     }
   }, []);
   

Integration

Adding to Layout

// src/app/(app)/(dashboard)/layout.tsx
import { ToolsSection } from './_components/tools-section';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="container mx-auto p-6">
      <ToolsSection />
      {children}
    </div>
  );
}

State Management

The dashboard uses React's built-in state management with hooks:

const [searchQuery, setSearchQuery] = useState("");
const [selectedCategory, setSelectedCategory] = useState<ToolCategory | "all">("all");
const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
const [starredTools, setStarredTools] = useState<Set<string>>(new Set());
const [showStarredOnly, setShowStarredOnly] = useState(false);

Testing

1. Component Tests

   describe('ToolsSection', () => {
     it('should filter tools based on search', () => {
       // Test implementation
     });
   
     it('should filter tools by category', () => {
       // Test implementation
     });
   
     it('should handle starring tools', () => {
       // Test implementation
     });
   });
   

2. Integration Tests

   describe('Dashboard Integration', () => {
     it('should load and display tools', () => {
       // Test implementation
     });
   
     it('should persist starred tools', () => {
       // Test implementation
     });
   });
   

Security Considerations

1. External Links

   • Use rel="noopener noreferrer" for external links
   • Validate external tool URLs
   • Implement CSP headers

2. Local Storage

   • Sanitize stored data
   • Handle storage errors
   • Clear sensitive data

Performance Optimization

1. Code Splitting

   • Lazy load tool components
   • Optimize images and icons
   • Implement virtual scrolling for large lists

2. Caching

   • Cache tool data
   • Implement service workers
   • Use localStorage efficiently