🎮 Arc Raiders Kits

A comprehensive, multilingual web application for Arc Raiders game data. Browse items, quests, hideout modules, skill nodes and more with interactive tools and real-time countdown timers.

✨ Features

• 🌍 18 Languages: Full support for EN, ES, DE, FR, PT, PL, NO, DA, IT, UK, KR, RU, ZH-CN, JA, TR, ZH-TW, SR, HR
• 📦 Items Database: Comprehensive item catalog with filtering, sorting, and search
• 📜 Quests & Missions: Complete quest database with objectives, rewards, and requirements
• 🏠 Hideout Modules: Browse and plan your hideout upgrades
• 🎯 Skill Nodes: Explore the skill tree system
• ⏱️ Expedition Countdown: Real-time countdown to next game expedition
• 🔍 Advanced Search: Instant search with debouncing and URL state persistence
• 🎨 Interactive UI: Smooth animations, tooltips, and responsive design
• 🔗 SEO Optimized: Human-readable URLs with slug-based routing
• 📱 Mobile First: Fully responsive across all devices
• 🚀 Performance: Static generation with on-demand ISR for optimal loading

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/isaidj/arcraiderskits.git
cd arcraiderskits

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Run data update script
npm run update-data

# Start development server
npm run dev

Open http://localhost:3000 to view the app in your browser.

Environment Variables

Create a .env.local file in the root directory. See .env.example for all available options:

# Required: Expedition countdown end date
NEXT_PUBLIC_EXPEDITION_END_DATE=2025-12-21T23:59:59

# Optional: Google AdSense (if using ads)
NEXT_PUBLIC_ADSENSE_CLIENT_ID=ca-pub-XXXXXXXXXXXXXXXX
NEXT_PUBLIC_ADSENSE_ENABLED=false

# Optional: Custom API base URL
NEXT_PUBLIC_API_BASE_URL=https://cdn.arctracker.io

Note: Vercel Analytics and Speed Insights are automatically enabled when deployed to Vercel—no additional configuration needed.

Build for Production

# Build the application
npm run build

# Start production server
npm start

📁 Project Structure

arcraiderskits/
├── src/
│   ├── app/
│   │   ├── [lang]/              # Internationalized routes
│   │   │   ├── items/           # Items pages
│   │   │   │   ├── [id]/        # Dynamic item detail pages (slug-based)
│   │   │   │   └── page.tsx     # Items list page
│   │   │   ├── quests/          # Quests pages
│   │   │   │   ├── [id]/        # Dynamic quest detail pages (slug-based)
│   │   │   │   └── page.tsx     # Quests list page
│   │   │   ├── hideout/         # Hideout modules
│   │   │   ├── skills/          # Skill nodes
│   │   │   └── page.tsx         # Home page
│   │   ├── globals.css          # Global styles
│   │   └── layout.tsx           # Root layout
│   ├── components/
│   │   ├── items/               # Item-related components
│   │   │   ├── ItemCard.tsx
│   │   │   ├── ItemDetailView.tsx
│   │   │   ├── ItemsFilter.tsx
│   │   │   └── utils.ts         # Slug generation & helpers
│   │   ├── quests/              # Quest-related components
│   │   │   ├── QuestCard.tsx
│   │   │   ├── QuestDetailView.tsx
│   │   │   ├── QuestsFilter.tsx
│   │   │   └── utils.ts         # Slug generation & helpers
│   │   ├── Navbar.tsx
│   │   ├── Footer.tsx
│   │   └── ...
│   ├── config/
│   │   └── i18n.ts              # i18n configuration
│   └── contexts/
│       └── AdsContext.tsx       # Ad management context
├── public/
│   └── data/
│       ├── items.json           # Items database
│       ├── quests.json          # Quests database
│       ├── hideoutModules.json  # Hideout data
│       └── skillNodes.json      # Skills data
├── scripts/
│   └── update-data.js           # Data fetching script
└── next.config.ts               # Next.js configuration

🛠️ Technologies

• Framework: Next.js 16 (App Router)
• UI Library: React 19
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Analytics: Vercel Analytics & Speed Insights
• Sitemap: next-sitemap
• Linting: ESLint with Next.js config

🌐 Internationalization

The app supports 18 languages with automatic route generation:

// Available locales
const locales = [
  "en", "es", "de", "fr", "pt", "pl", "no", "da", 
  "it", "uk", "kr", "ru", "zh-CN", "ja", "tr", 
  "zh-TW", "sr", "hr"
];

URLs follow the pattern: /{lang}/items/{slug} or /{lang}/quests/{slug}

🔗 SEO & Routing

Slug Generation

All items and quests use SEO-friendly slugs:

// Example: "Health Potion" + id "abc123" → "health-potion-abc123"
generateSlug(item.name, item.id);

Features:

• Unicode normalization (removes diacritics)
• Lowercase conversion
• Special character removal
• Space-to-hyphen conversion
• Unique ID suffix for collision prevention

Static Generation Strategy

• Primary languages (EN, ES, DE, FR, PT): Pre-rendered at build time
• Secondary languages: Generated on-demand (ISR)
• Dynamic params: Enabled for flexible route handling

📊 Data Management

Data is fetched from external API and stored in JSON files:

# Update all game data
npm run update-data

The script (scripts/update-data.js) fetches:

• Items from Arc Raiders API
• Quests and missions
• Hideout modules
• Skill nodes

🎨 Features in Detail

Items Database

• Search: Real-time search with 300ms debounce
• Filters: Category, rarity, location
• Sorting: Name, value, weight, rarity
• View Modes: Normal and compact grid layouts
• Item Details: Full stats, recycling info, related items

Quests System

• Trader Filtering: Filter by quest giver (Shani, Celeste, Tian Wen, Apollo)
• Quest Chains: Visual indication of previous/next quests
• Video Guides: Integration for video tutorials
• Requirements: Clear display of needed items
• Rewards: XP and item rewards tracking

UI/UX Features

• Interactive tooltips on hover
• Smooth page transitions
• Loading states and skeletons
• Error boundaries
• Responsive navigation
• Dark mode optimized design
• Cyberpunk-inspired aesthetics

🚀 Performance Optimizations

• Static page generation for 5 primary languages
• Image optimization with Next.js Image component
• Code splitting and lazy loading
• Debounced search inputs
• URL state persistence
• ISR (Incremental Static Regeneration) for secondary languages
• Increased Node.js memory for large builds (--max-old-space-size=4096)

📝 Scripts

npm run dev          # Start development server
npm run build        # Build for production (with data update)
npm run start        # Start production server
npm run lint         # Run ESLint
npm run update-data  # Fetch latest game data

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Arc Raiders game data provided by Arc Raiders API
• Built with Next.js
• Styled with Tailwind CSS
• Deployed on Vercel

📞 Contact

• GitHub: @isaidj
• Repository: arcraiderskits

---

Note: This is a fan-made database and is not officially affiliated with Arc Raiders or Embark Studios.