logo
0
0
WeChat Login

MindDock AI Website

MindDock AI - A platform showcasing 1000+ lovely applications that blend creativity with technology.

🌟 Features

  • 🎨 Modern Design: Beautiful, responsive UI with smooth animations
  • 🌍 Internationalization: Full support for English and Chinese
  • 🎠 App Carousel: Interactive application showcase with smooth transitions
  • 📊 Analytics: Integrated Google Analytics and Cloudflare Analytics
  • 📱 Responsive: Optimized for all devices and screen sizes
  • Performance: Built with React, TypeScript, and Vite for optimal performance
  • 🎭 3D Effects: Stunning WebGL-powered background animations
  • 📈 Monetization: Google Ads integration ready

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

  1. Clone the repository
  2. Install dependencies:
    npm install
  3. Copy environment variables:
    cp .env.example .env
  4. Configure your environment variables in .env

Development

npm run dev

Build

npm run build

Preview

npm run preview

📁 Project Structure

src/ ├── components/ # React components ├── hooks/ # Custom React hooks ├── utils/ # Utility functions ├── types/ # TypeScript type definitions ├── data/ # Static data (apps, etc.) ├── i18n/ # Internationalization └── styles/ # Global styles

🎨 Design System

The website uses a modern color palette with:

  • Primary: Pink gradient (#ec4899 to #9333ea)
  • Secondary: Blue gradient (#3b82f6 to #0891b2)
  • Accent: Yellow gradient (#facc15 to #f97316)

🌐 Internationalization

Supports:

  • English (default)
  • Chinese (简体中文)

Language detection is automatic based on:

  1. Browser language
  2. Local storage
  3. Manual toggle

📊 Analytics

Google Analytics

  • Page views tracking
  • Event tracking for user interactions
  • Custom dimensions for app engagement

Cloudflare Analytics

  • Real-time visitor analytics
  • Performance metrics
  • Geographic data

📱 Responsive Design

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px

🎭 Animations

  • Framer Motion for component animations
  • Three.js for 3D background effects
  • Custom canvas animations
  • Smooth scroll interactions

🏗️ Technologies Used

  • Frontend: React 18, TypeScript
  • Build Tool: Vite
  • Styling: Tailwind CSS
  • Animations: Framer Motion, Three.js
  • Internationalization: react-i18next
  • Icons: Lucide React
  • Analytics: Google Analytics, Cloudflare

📝 License

MIT License - see LICENSE file for details.

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

📞 Contact

About

No description, topics, or website provided.
Language
TypeScript76.3%
HTML17.4%
JavaScript5.5%
Shell0.7%
Others0.1%