🛡️ AI Safe Navigator

🔒 A Safe and Reliable AI Tools Navigation & Resource Management Platform

English | 简体中文

📖 Table of Contents

✨ Features
🚀 Getting Started
🌩️ Deployment
🏗️ Project Structure
🛠️ Development
🌍 Internationalization
📦 Dependencies
📄 License
🤝 Contributing
📧 Contact

✨ Features

🎯 Core Features

AI Tools Navigation
- Smart Classification System
- Advanced Search Functionality
- Tool Rating & Reviews
- Favorites Management
Security Assurance
- Tool Safety Assessment
- User Privacy Protection
- Data Encryption
- Real-time Threat Detection

🎨 Technical Features

Modern Tech Stack
- Next.js 14 App Router
- TypeScript Type Safety
- Tailwind CSS Styling
- Supabase Backend
Performance Optimization
- Automatic Image Optimization
- Incremental Static Regeneration
- Automatic Code Splitting
- Smart Caching Strategy

🌐 Global Support

Multi-language Support
- English & Chinese Interfaces
- Dynamic Language Switching
- i18n Route Support
- Automatic Language Detection
SEO Optimization
- Dynamic Meta Tags
- Structured Data
- Sitemap Generation
- Search Engine Optimization

🎯 Project Showcase

Modern User Interface Design

Powerful Tool Management Features

🚀 Getting Started

Prerequisites

Node.js >= 20.0.0
pnpm >= 8.0.0

Installation Steps

Clone the repository:

git clone https://github.com/taielab/AISafeNavigator.git
cd AISafeNavigator

Install dependencies:

pnpm install

Copy environment variables:

cp .env.example .env.local

Start the development server:

pnpm dev

Visit http://localhost:3000 to view your application.

🌩️ Deployment

Environment Variable Configuration

Configure your environment variables in .env.example:

# Site Configuration
NEXT_PUBLIC_SITE_URL=           # Your site URL (e.g., http://localhost:3000)
NEXT_PUBLIC_APP_NAME=           # Your application name
NEXT_PUBLIC_CONTACT_EMAIL=      # Contact email address
NEXT_BASE_API=                  # Base API URL

# Social Media Configuration
NEXT_PUBLIC_SHARE_HASHTAGS=     # Social media sharing hashtags (comma-separated)
NEXT_PUBLIC_TWITTER_HANDLE=     # Twitter handle
NEXT_PUBLIC_GITHUB_REPO=        # GitHub repository name

# Analytics & Ads Configuration
NEXT_PUBLIC_GOOGLE_TRACKING_ID= # Google Analytics tracking ID
NEXT_PUBLIC_GOOGLE_ADSENSE_URL= # Google AdSense script URL

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=       # Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=  # Supabase anonymous key

# SEO Configuration
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=  # Google site verification code
NEXT_PUBLIC_BING_SITE_VERIFICATION=    # Bing site verification code
NEXT_PUBLIC_BAIDU_SITE_VERIFICATION=   # Baidu site verification code
NEXT_PUBLIC_DEFAULT_OG_IMAGE=          # Default Open Graph image path
NEXT_PUBLIC_DEFAULT_DESCRIPTION=        # Default meta description

# Feature Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=   # Enable/disable analytics (true/false)
NEXT_PUBLIC_ENABLE_NEWSLETTER=  # Enable/disable newsletter (true/false)
NEXT_PUBLIC_ENABLE_COMMENTS=    # Enable/disable comments (true/false)

# Cache Configuration
NEXT_PUBLIC_CACHE_MAX_AGE=      # Maximum cache age in seconds
NEXT_PUBLIC_STALE_WHILE_REVALIDATE=  # Stale while revalidate duration

# API Keys & Security
CRAWLER_API=                    # Web crawler API endpoint
CRAWLER_API_KEY=                # Crawler API authentication key
CRON_AUTH_KEY=                  # Cron jobs authentication key
SUBMIT_AUTH_KEY=                # Submission API authentication key

# Development Configuration
NODE_ENV=                       # Environment (development/production)
NEXT_PUBLIC_API_MOCKING=        # API mocking configuration

Vercel Deployment

Fork this repository
Create a new project on Vercel
Import your forked repository
Configure the following environment variables in Vercel:

# Site Configuration

NEXT_PUBLIC_SITE_URL=           # Your site URL (e.g., <http://localhost:3000>)
NEXT_PUBLIC_APP_NAME=           # Your application name
NEXT_PUBLIC_CONTACT_EMAIL=      # Contact email address
NEXT_BASE_API=                  # Base API URL

# Social Media Configuration

NEXT_PUBLIC_SHARE_HASHTAGS=     # Social media sharing hashtags (comma-separated)
NEXT_PUBLIC_TWITTER_HANDLE=     # Twitter handle
NEXT_PUBLIC_GITHUB_REPO=        # GitHub repository name

# Analytics & Ads Configuration

NEXT_PUBLIC_GOOGLE_TRACKING_ID= # Google Analytics tracking ID
NEXT_PUBLIC_GOOGLE_ADSENSE_URL= # Google AdSense script URL

# Supabase Configuration

NEXT_PUBLIC_SUPABASE_URL=       # Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=  # Supabase anonymous key

# SEO Configuration

NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=  # Google site verification code
NEXT_PUBLIC_BING_SITE_VERIFICATION=    # Bing site verification code
NEXT_PUBLIC_BAIDU_SITE_VERIFICATION=   # Baidu site verification code
NEXT_PUBLIC_DEFAULT_OG_IMAGE=          # Default Open Graph image path
NEXT_PUBLIC_DEFAULT_DESCRIPTION=        # Default meta description

# Feature Flags

NEXT_PUBLIC_ENABLE_ANALYTICS=   # Enable/disable analytics (true/false)
NEXT_PUBLIC_ENABLE_NEWSLETTER=  # Enable/disable newsletter (true/false)
NEXT_PUBLIC_ENABLE_COMMENTS=    # Enable/disable comments (true/false)

# Cache Configuration

NEXT_PUBLIC_CACHE_MAX_AGE=      # Maximum cache age in seconds
NEXT_PUBLIC_STALE_WHILE_REVALIDATE=  # Stale while revalidate duration

# API Keys & Security

CRAWLER_API=                    # Web crawler API endpoint
CRAWLER_API_KEY=                # Crawler API authentication key
CRON_AUTH_KEY=                  # Cron jobs authentication key
SUBMIT_AUTH_KEY=                # Submission API authentication key

# Development Configuration

NODE_ENV=                       # Environment (development/production)
NEXT_PUBLIC_API_MOCKING=        # API mocking configuration

Click "Deploy" button to deploy:

Supabase Setup

Create a new project on Supabase
Get your project credentials from the Settings > API
Use the provided SQL script to initialize your database in the db/ directory
If needed, set up authentication providers
Configure row-level security (RLS)
Add the following environment variables in local .env.local and Vercel project:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

🏗️ Project Structure

├── app/                  # Next.js app directory
├── components/          # React components
├── lib/                 # Utility functions and configurations
├── messages/           # Internationalization messages
├── middlewares/        # Custom middleware
├── public/             # Static assets
└── styles/             # Global styles and Tailwind configuration

🛠️ Development

Scripts

pnpm dev: Start the development server
pnpm build: Build for production
pnpm start: Start the production server
pnpm lint: Run ESLint
pnpm lint:fix: Fix ESLint errors
pnpm prettier: Format code

Code Quality

ESLint for code linting
Prettier for code formatting
Husky for Git hooks
TypeScript for type checking

🌍 Internationalization

The application supports multiple languages using next-intl. Language files are located in the messages/ directory.

🎨 UI Components

Tailwind CSS-customizable UI components
Responsive design mode
Dark mode support
Optimized image components with blur effect

📦 Dependencies

Core

Next.js 14.1.4
React 18.2.0
TypeScript 5.4.3
Tailwind CSS 3.4.3

UI

Radix UI components
Framer Motion
Lucide React icons

Data Management

React Hook Form
Zod for validation
Supabase

📄 License

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

🤝 Contributing

Contributions are welcome! Please submit Pull Requests.

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Open a Pull Request

📧 Contact

For questions or feedback, please open an issue in the GitHub repository.

📊 Performance Metrics

Metric	Score
Performance	98/100
Accessibility	100/100
Best Practices	100/100
SEO	100/100

🔧 System Requirements

Dependency	Minimum Version	Recommended Version
Node.js	20.0.0	20.11.0
pnpm	8.0.0	8.15.1
Memory	4GB	8GB
Storage	1GB	2GB

📱 Browser Support

Browser	Supported Version
Chrome	>= 90
Firefox	>= 85
Safari	>= 14
Edge	>= 90

🔐 Security Features

Data Encryption
- Transport Layer Security (TLS)
- End-to-End Encryption
- Secure Key Management
Access Control
- Role-Based Permissions
- Multi-Factor Authentication
- Session Management
Compliance
- GDPR Compliant
- CCPA Compliant
- Data Localization

🚦 Development Status

Project Enhancement Note: This project is an enhanced version based on tap4-ai-webui, with additional security features and improvements. The AI tools data is automatically collected and updated using tap4-ai-crawler.

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.vscode		.vscode
ai-crawler		ai-crawler
app		app
components		components
db/supabase		db/supabase
lib		lib
messages		messages
middlewares		middlewares
public		public
.env.example		.env.example
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
README.zh-CN.md		README.zh-CN.md
components.json		components.json
i18n.ts		i18n.ts
middleware.ts		middleware.ts
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

License

taielab/AISafeNavigator

Folders and files

Latest commit

History

Repository files navigation