mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-12-16 21:45:14 +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
238 lines
6.2 KiB
Markdown
238 lines
6.2 KiB
Markdown
# AI Prompts Explorer - Web Interface
|
|
|
|
A modern, responsive web application for exploring AI tool system prompts and configurations. Built with Next.js 15, React 19, and TypeScript.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## ✨ Features
|
|
|
|
- 🔍 **Advanced Search & Filtering** - Search by name, company, category, or model
|
|
- 📊 **Statistics Dashboard** - Comprehensive analytics and visualizations
|
|
- 🔄 **Tool Comparison** - Compare up to 4 tools side-by-side
|
|
- 💾 **Favorites** - Save your favorite tools for quick access
|
|
- 🎨 **Dark Mode** - Beautiful dark/light theme support
|
|
- 📱 **Fully Responsive** - Perfect on desktop, tablet, and mobile
|
|
- ⚡ **Lightning Fast** - Built with Next.js 15 and Server Components
|
|
- 🎭 **Smooth Animations** - Polished UX with Framer Motion
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 22+ (recommended: 22.21.1)
|
|
- npm 10+
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Navigate to the web directory
|
|
cd web
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Run the development server
|
|
npm run dev
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
web/
|
|
├── app/ # Next.js App Router pages
|
|
│ ├── page.tsx # Homepage
|
|
│ ├── browse/ # Browse tools page
|
|
│ ├── stats/ # Statistics dashboard
|
|
│ ├── compare/ # Tool comparison
|
|
│ ├── tool/[slug]/ # Individual tool pages
|
|
│ ├── about/ # About page
|
|
│ ├── layout.tsx # Root layout
|
|
│ └── globals.css # Global styles
|
|
├── components/ # Reusable components
|
|
│ ├── ui/ # Base UI components
|
|
│ ├── navbar.tsx # Navigation bar
|
|
│ ├── footer.tsx # Footer
|
|
│ ├── tool-card.tsx # Tool card component
|
|
│ └── theme-provider.tsx # Theme provider
|
|
├── lib/ # Utilities and data
|
|
│ ├── data.ts # Data loading functions
|
|
│ ├── store.ts # Zustand state management
|
|
│ ├── types.ts # TypeScript types
|
|
│ └── utils.ts # Utility functions
|
|
├── data/ # Static data
|
|
│ └── index.json # Generated metadata
|
|
└── public/ # Static assets
|
|
```
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **Framework**: [Next.js 15](https://nextjs.org/) with App Router
|
|
- **UI Library**: [React 19](https://react.dev/)
|
|
- **Language**: [TypeScript](https://www.typescriptlang.org/)
|
|
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
|
|
- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/)
|
|
- **Icons**: [Lucide React](https://lucide.dev/)
|
|
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
|
|
- **Theme**: [next-themes](https://github.com/pacocoursey/next-themes)
|
|
|
|
## 📦 Available Scripts
|
|
|
|
```bash
|
|
# Development server
|
|
npm run dev
|
|
|
|
# Production build
|
|
npm run build
|
|
|
|
# Start production server
|
|
npm start
|
|
|
|
# Lint code
|
|
npm run lint
|
|
|
|
# Type check
|
|
npm run type-check
|
|
```
|
|
|
|
## 🎨 Features In Detail
|
|
|
|
### Browse Tools
|
|
- Grid or list view
|
|
- Real-time search
|
|
- Multi-select filters (category, type, company)
|
|
- Sort by name, lines, files, or company
|
|
- Responsive card layout
|
|
|
|
### Tool Detail Pages
|
|
- Complete tool information
|
|
- File listings with sizes
|
|
- Model information
|
|
- Direct links to GitHub and official websites
|
|
- Add to comparison or favorites
|
|
|
|
### Statistics Dashboard
|
|
- Total tools, files, and lines
|
|
- Category distribution with visual bars
|
|
- Top tools by complexity
|
|
- Type distribution (proprietary vs open-source)
|
|
- Company breakdown
|
|
|
|
### Comparison
|
|
- Side-by-side comparison of up to 4 tools
|
|
- Compare all key metrics
|
|
- File listings
|
|
- Quick actions
|
|
|
|
### Dark Mode
|
|
- System preference detection
|
|
- Manual toggle
|
|
- Persistent preference
|
|
- Smooth transitions
|
|
|
|
## 🔧 Configuration
|
|
|
|
### Environment Variables
|
|
|
|
Create a `.env.local` file (optional):
|
|
|
|
```env
|
|
# No environment variables required for basic setup
|
|
```
|
|
|
|
### Updating Data
|
|
|
|
The app uses `data/index.json` generated from the repository metadata:
|
|
|
|
```bash
|
|
# From the repository root
|
|
python3 scripts/generate_metadata.py
|
|
|
|
# Copy to web/data
|
|
cp scripts/index.json web/data/
|
|
```
|
|
|
|
## 🚀 Deployment
|
|
|
|
### Vercel (Recommended)
|
|
|
|
[](https://vercel.com/new/clone?repository-url=https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/tree/main/web)
|
|
|
|
```bash
|
|
# Install Vercel CLI
|
|
npm i -g vercel
|
|
|
|
# Deploy
|
|
vercel
|
|
```
|
|
|
|
### Other Platforms
|
|
|
|
Build the static site:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
The output will be in `.next/`. Deploy using:
|
|
- **Netlify**: Supports Next.js
|
|
- **Cloudflare Pages**: Supports Next.js
|
|
- **AWS Amplify**: Supports Next.js
|
|
- **Docker**: Use the included Dockerfile (if created)
|
|
|
|
## 📱 Browser Support
|
|
|
|
- Chrome (latest)
|
|
- Firefox (latest)
|
|
- Safari (latest)
|
|
- Edge (latest)
|
|
- Mobile browsers (iOS Safari, Chrome Mobile)
|
|
|
|
## 🤝 Contributing
|
|
|
|
Contributions are welcome! Please see the main [CONTRIBUTING.md](../CONTRIBUTING.md) for guidelines.
|
|
|
|
### Development Workflow
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Test thoroughly
|
|
5. Submit a pull request
|
|
|
|
## 📄 License
|
|
|
|
This project is part of the [AI Prompts and Models Repository](https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools) and follows the same license.
|
|
|
|
## 🙏 Acknowledgments
|
|
|
|
- Built with [Next.js](https://nextjs.org/)
|
|
- UI components inspired by [shadcn/ui](https://ui.shadcn.com/)
|
|
- Icons from [Lucide](https://lucide.dev/)
|
|
- Community contributions
|
|
|
|
## 📞 Support
|
|
|
|
- 🐛 [Report Issues](https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/issues)
|
|
- 💬 [Discord Community](https://discord.gg/NwzrWErdMU)
|
|
- 📧 Email: lucknitelol@proton.me
|
|
|
|
## 🎯 Roadmap
|
|
|
|
- [ ] Advanced filtering (by model, file count, etc.)
|
|
- [ ] Export comparison as PDF/image
|
|
- [ ] Favorites synchronization
|
|
- [ ] Community ratings and reviews
|
|
- [ ] API for programmatic access
|
|
- [ ] Prompt visualization and analysis
|
|
- [ ] Search result highlighting
|
|
- [ ] Keyboard shortcuts
|
|
|
|
---
|
|
|
|
**Made with ❤️ by the AI Prompts Explorer community**
|