mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-12-16 05:25:11 +00:00
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
63 lines
1.4 KiB
Bash
Executable File
63 lines
1.4 KiB
Bash
Executable File
#!/bin/bash
|
|
|
|
# AI Prompts Explorer - Web Setup Script
|
|
# This script sets up the Next.js web application
|
|
|
|
set -e
|
|
|
|
echo "🚀 AI Prompts Explorer - Web Setup"
|
|
echo "=================================="
|
|
echo ""
|
|
|
|
# Check Node version
|
|
echo "📦 Checking Node.js version..."
|
|
NODE_VERSION=$(node -v)
|
|
echo "Found Node.js: $NODE_VERSION"
|
|
|
|
if [[ ! "$NODE_VERSION" =~ ^v(22|23|24|25) ]]; then
|
|
echo "⚠️ Warning: Node.js 22+ is recommended (found $NODE_VERSION)"
|
|
fi
|
|
|
|
echo ""
|
|
|
|
# Check if we're in the web directory
|
|
if [ ! -f "package.json" ]; then
|
|
echo "❌ Error: package.json not found"
|
|
echo "Please run this script from the web/ directory"
|
|
exit 1
|
|
fi
|
|
|
|
# Install dependencies
|
|
echo "📥 Installing dependencies..."
|
|
npm install
|
|
|
|
echo ""
|
|
|
|
# Generate metadata if needed
|
|
if [ ! -f "data/index.json" ]; then
|
|
echo "📊 Generating metadata..."
|
|
cd ..
|
|
python3 scripts/generate_metadata.py
|
|
mkdir -p web/data
|
|
cp scripts/index.json web/data/
|
|
cd web
|
|
echo "✓ Metadata generated"
|
|
else
|
|
echo "✓ Metadata already exists"
|
|
fi
|
|
|
|
echo ""
|
|
echo "✅ Setup complete!"
|
|
echo ""
|
|
echo "🎉 You can now run the development server:"
|
|
echo " npm run dev"
|
|
echo ""
|
|
echo "📖 The app will be available at:"
|
|
echo " http://localhost:3000"
|
|
echo ""
|
|
echo "📚 Other commands:"
|
|
echo " npm run build - Build for production"
|
|
echo " npm start - Start production server"
|
|
echo " npm run lint - Lint code"
|
|
echo ""
|