IntelPedia - AI Tools Directory & Innovation Hub

IntelPedia is a comprehensive AI tools directory and innovation hub built with Next.js 15, featuring a curated collection of artificial intelligence tools, productivity software, and cutting-edge AI technologies. The platform combines a robust tools database with an integrated blog powered by Wisp CMS.

🚀 Live Demo

Main Site: intelpedia.tech
Tools Directory: intelpedia.tech/tools
Submit Tool: intelpedia.tech/submit-tool
Admin Dashboard: intelpedia.tech/admin

🎯 Project Overview

IntelPedia serves as the ultimate destination for discovering, exploring, and sharing AI tools. Built for developers, creators, and AI enthusiasts, it provides a comprehensive platform to find the perfect AI solution for any use case.

✨ Key Features

🔍 Comprehensive AI Tools Directory

Curated Collection: Hand-picked AI tools across 20+ categories
Advanced Search: Full-text search with filtering by tags, pricing, and features
Detailed Tool Pages: In-depth information including features, pricing, and user insights
Tool Submission: Community-driven platform for sharing new AI discoveries
Featured Tools: Highlighted tools for enhanced visibility

💰 Smart Pricing System

Free Tools: Completely free AI tools with no hidden costs
Freemium Models: Tools with free tiers and premium upgrades
Paid Solutions: Professional AI tools with transparent pricing
Price Filtering: Filter tools by pricing model (Free/Freemium/Paid)

🏗️ Robust Admin Dashboard

Tool Management: Complete CRUD operations for AI tools
Pending Submissions: Review and approve community submissions
Bulk Operations: Efficiently manage large datasets
Real-time Analytics: Monitor tool submissions and user engagement

📝 Integrated Blog System

AI Content: Latest AI news, tutorials, and industry insights
Wisp CMS Integration: Professional content management system
SEO Optimized: Full meta tags, structured data, and sitemaps
Related Posts: AI-powered content recommendations

🚀 Performance & SEO

ISR Implementation: Incremental Static Regeneration for optimal performance
Server Components: Next.js 15 App Router for maximum efficiency
Advanced SEO: Schema.org markup, OpenGraph, and Twitter cards
Core Web Vitals: Optimized for Google's performance metrics

🎨 Modern UI/UX

Responsive Design: Mobile-first approach with Tailwind CSS
Dark/Light Mode: System-aware theme switching
Shadcn UI: Modern, accessible component library
Progressive Enhancement: Works without JavaScript

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router & Server Components
TypeScript - Type-safe development experience
Tailwind CSS - Utility-first CSS framework
Shadcn UI - Modern, accessible component library
next/font - Optimized font loading

Backend & Database

MongoDB - NoSQL database for tool storage
Mongoose - MongoDB object modeling
Next.js API Routes - Serverless API endpoints
Zod - Runtime type validation

Content Management

Wisp CMS - Headless CMS for blog content
Custom API - RESTful API for tools management
Image Upload - Integrated image handling system

Development & Deployment

ESLint - Code quality and consistency
Vercel - Deployment and hosting platform
ISR - Incremental Static Regeneration for performance

📁 Project Structure

src/
├── app/                     # Next.js App Router
│   ├── (pages)/            # Public pages
│   │   ├── tools/          # Tools directory & detail pages
│   │   ├── submit-tool/    # Tool submission form
│   │   └── blog/           # Blog pages (Wisp CMS)
│   ├── admin/              # Admin dashboard
│   │   └── tools/          # Tool management interface
│   ├── api/                # API endpoints
│   │   ├── tools/          # Tools CRUD operations
│   │   └── auth/           # Authentication endpoints
│   └── (sitemaps)/         # Dynamic sitemap generation
├── components/             # Reusable UI components
│   ├── ui/                 # Shadcn UI components
│   ├── ToolCard.tsx        # Tool display component
│   ├── ToolFilter.tsx      # Advanced filtering system
│   └── PricingDisplay.tsx  # Pricing logic component
├── lib/                    # Utility functions
│   ├── db.ts              # Database connection
│   ├── validations/       # Zod schemas
│   └── utils.ts           # Helper functions
├── models/                 # MongoDB schemas
│   ├── Tool.ts            # Tool data model
│   └── PendingTool.ts     # Pending submissions model
├── hooks/                  # Custom React hooks
│   ├── useTools.ts        # Tool data management
│   └── useToolFiltering.ts # Filter logic
└── config/
    └── adConfig.ts        # Advertisement configuration

🚀 Quick Start Guide

Prerequisites

Node.js 18+
MongoDB database
Wisp CMS account (for blog functionality)

1. Clone & Install

git clone https://github.com/Gitnaseem745/wisp-nextjs-blog.git
cd wisp-nextjs-blog
npm i --legacy-peer-deps

Note: The --legacy-peer-deps flag is required due to React 19 compatibility with next-themes.

2. Environment Setup

Copy the environment template and configure your variables:

cp .env.example .env.local

Configure the following required environment variables in .env.local:

# Database (Required)
MONGODB_URI=your_mongodb_connection_string

# Wisp CMS (Required for blog functionality)
NEXT_PUBLIC_BLOG_ID=your_wisp_blog_id

# Admin Authentication (Required)
ADMIN_PASSWORD=your_bcrypt_hashed_password
JWT_SECRET=your_jwt_secret_key

# Site Configuration
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_BLOG_DISPLAY_NAME=IntelPedia
NEXT_PUBLIC_BLOG_DESCRIPTION=Your AI Tools & Innovation Hub

# Optional: Analytics
NEXT_PUBLIC_GA_ID=your_google_analytics_id

# Optional: GitHub Integration (for image uploads)
GITHUB_TOKEN=your_github_personal_access_token

# Optional: Additional secrets
REVALIDATION_SECRET=your_revalidation_secret
OG_IMAGE_SECRET=your_og_image_secret

⚠️ Security Note: Never commit .env.local to version control. All secrets should be configured in your deployment environment.

3. Database Setup

The application will automatically create the required MongoDB collections on first run. For production, ensure your MongoDB instance is properly configured.

4. Development Server

npm run dev

Visit http://localhost:3000 to see your IntelPedia instance.

5. Production Build

npm run build
npm start

📋 API Documentation

Tools API Endpoints

Method	Endpoint	Description
`GET`	`/api/tools`	Fetch all tools
`GET`	`/api/tools/[id]`	Get specific tool
`POST`	`/api/tools`	Create new tool
`PUT`	`/api/tools/[id]`	Update tool
`DELETE`	`/api/tools/[id]`	Delete tool
`GET`	`/api/tools/search`	Search tools with filters
`POST`	`/api/tools/submit`	Submit tool for review
`POST`	`/api/tools/approve`	Approve pending tool

Example Tool Data Structure

interface Tool {
  _id: string;
  title: string;
  description: string;
  tags: string[];
  siteUrl: string;
  imgUrl?: string;
  features?: Array<{
    name: string;
    details: string;
  }>;
  featured?: boolean;
  isFree?: boolean;
  pricing?: number;
  createdAt: Date;
  updatedAt: Date;
}

🎯 Usage Guide

For Users

Discovering AI Tools

Browse Tools: Visit /tools to explore the directory
Filter & Search: Use advanced filters for pricing, tags, and features
Tool Details: Click any tool for detailed information and features
Submit Tools: Share new AI tools via /submit-tool

Reading AI Content

Blog: Access latest AI insights and tutorials
Categories: Browse content by AI categories
Related Posts: Discover similar content automatically

For Administrators

Dashboard Access

Navigate to /admin
Enter admin credentials
Access the full management dashboard

Tool Management

Add Tools: Create new tool entries with full details
Edit Tools: Update existing tool information
Review Submissions: Approve or reject community submissions
Featured Tools: Promote tools for enhanced visibility

Content Management

Blog Posts: Manage content through Wisp CMS
SEO Settings: Configure meta tags and structured data
Analytics: Monitor tool submissions and user engagement

🔧 Advanced Features

Incremental Static Regeneration (ISR)

Performance: Lightning-fast tool pages with 1-hour revalidation
SEO Benefits: Pre-rendered pages for optimal search engine indexing
Fresh Content: Automatic updates without manual intervention

Pricing Intelligence

Smart Display: Automatic pricing categorization (Free/Freemium/Paid)
Filter System: Advanced filtering by pricing models
Comparison: Easy pricing comparison across tools

Enhanced Search

Full-Text Search: Search across titles, descriptions, and features
Tag Filtering: Multi-tag selection for precise results
Real-time Results: Instant search with debounced queries

📊 Performance Optimizations

Server Components: Reduced client-side JavaScript
Image Optimization: Next.js automatic image optimization
Font Optimization: Preloaded custom fonts
Bundle Splitting: Automatic code splitting for optimal loading
Caching Strategy: Multi-layer caching for maximum performance

🔐 Security Features

Input Validation: Zod schema validation on all inputs
Admin Authentication: Secure admin dashboard access
Rate Limiting: API rate limiting for abuse prevention
Sanitization: HTML content sanitization for security

🚢 Deployment

Vercel (Recommended)

Fork Repository: Fork this repository to your GitHub account
Vercel Setup: Connect your repository to Vercel
Environment Variables: Configure all required environment variables
Deploy: Automatic deployment on every push

Manual Deployment

# Build the application
npm run build

# Start production server
npm start

Environment Variables for Production

Ensure all environment variables are properly set:

Database connection string
Wisp CMS configuration
Authentication secrets
Domain configuration

📖 Documentation

Available Documentation

API Documentation - Complete API reference
Admin Dashboard Guide - Dashboard usage
ISR Implementation - Performance optimization
Pricing Features - Pricing system
Featured Tools - Tool promotion system

🤝 Contributing

We welcome contributions to IntelPedia! Here's how you can help:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Maintain code consistency with ESLint
Add tests for new features
Update documentation for changes

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

� Project Details