mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-12-16 05:25:11 +00:00
9d5ee88ea3
This commit adds a complete, production-ready web application for browsing and exploring AI tool system prompts. The interface provides an intuitive, responsive, and feature-rich experience for discovering AI tools. ## Web Application Features **Core Functionality:** - 🔍 Advanced search with real-time filtering - 📊 Interactive statistics dashboard with visualizations - 🔄 Side-by-side comparison of up to 4 tools - ⭐ Favorites system with local persistence - 📱 Fully responsive mobile-first design - 🎨 Dark/light mode with system preference detection - ⚡ Optimized performance with Next.js Server Components **Pages:** - Home: Hero section, features showcase, featured tools - Browse: Advanced filtering, grid/list views, category filters - Stats: Comprehensive analytics and visualizations - Compare: Side-by-side tool comparison - Tool Detail: In-depth tool information - About: Project information and tech stack **Components:** - Responsive navbar with mobile menu - Tool cards with interactive actions - Reusable UI components (Button, Card, Badge, Input) - Footer with quick links and stats - Theme provider for dark mode - Loading and error states ## Technical Stack **Framework & Libraries:** - Next.js 15 with App Router - React 19.0 with Server Components - TypeScript 5.6 for type safety - Tailwind CSS for styling - Zustand for state management - next-themes for theme switching - Lucide React for icons **Features:** - Server-side rendering (SSR) - Static site generation (SSG) for tool pages - Optimized bundle with automatic code splitting - SEO-friendly with metadata API - Accessibility best practices ## Project Structure web/ ├── app/ # Next.js pages ├── components/ # React components ├── lib/ # Utilities and data ├── data/ # Static data (index.json) ├── setup.sh # Setup script └── README.md # Documentation ## Developer Experience - TypeScript for type safety - ESLint for code quality - Hot module replacement - Fast refresh - Comprehensive documentation - Setup script for quick start ## Updated Documentation - Enhanced main README with web interface section - Created comprehensive web/README.md - Updated roadmap to mark completed features - Added Quick Start guide for web app ## Stats - 33 new files created - ~3,500 lines of TypeScript/TSX - Full responsive design (mobile, tablet, desktop) - Production-ready with build optimizations Users can now explore 32+ AI tools through an intuitive web interface instead of just command-line tools. Version: 2.0.0
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import { Inter } from 'next/font/google'
|
|
import './globals.css'
|
|
import { Navbar } from '@/components/navbar'
|
|
import { Footer } from '@/components/footer'
|
|
import { ThemeProvider } from '@/components/theme-provider'
|
|
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'AI Prompts Explorer - System Prompts & AI Tool Configurations',
|
|
description: 'Explore 32+ AI coding tools, their system prompts, and configurations. The most comprehensive collection of AI tool prompts.',
|
|
keywords: ['AI', 'prompts', 'system prompts', 'AI tools', 'LLM', 'GPT', 'Claude', 'code assistant'],
|
|
authors: [{ name: 'AI Prompts Explorer' }],
|
|
openGraph: {
|
|
title: 'AI Prompts Explorer',
|
|
description: 'Explore 32+ AI coding tools and their system prompts',
|
|
type: 'website',
|
|
},
|
|
}
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<body className={inter.className}>
|
|
<ThemeProvider
|
|
attribute="class"
|
|
defaultTheme="system"
|
|
enableSystem
|
|
disableTransitionOnChange
|
|
>
|
|
<div className="flex min-h-screen flex-col">
|
|
<Navbar />
|
|
<main className="flex-1">{children}</main>
|
|
<Footer />
|
|
</div>
|
|
</ThemeProvider>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|