Hackeruna Frontend

Modern Angular 21 frontend for Hackeruna.com - A multi-language technology blog powered by WordPress as a headless CMS.

Follow us:

🇪🇸 Versión en Español

✨ What's New in v2.1.0

• 🚀 Angular 21 - Latest stable version
• 📝 TypeScript 5.9.3 - Latest features
• 🌐 Multi-language support (Spanish & English) with Transloco
• 🤖 AI-powered translations using GPT-4o-mini for blog content
• 🔄 Language-aware URLs (/es/post/..., /en/post/...)
• 💬 Giscus comments powered by GitHub Discussions

🎯 Features

Feature	Description
🌐 i18n	Full Spanish/English support with Transloco
🎨 Dark/Light Mode	System preference detection
⚡ Performance	Lazy loading, code splitting, defer blocks
📱 Responsive	Mobile-first design
💬 Comments	Giscus (GitHub Discussions)
🔍 SEO	Meta tags, Schema.org, hreflang

🚀 Quick Start

# Clone repository
git clone https://github.com/juanitourquiza/ng-hackeruna.git
cd ng-hackeruna

# Install dependencies
npm install

# Start development server
npm start

Navigate to http://localhost:4200/es (Spanish) or http://localhost:4200/en (English).

🏗️ Build

npm run build

Output: dist/hackeruna-frontend (~414 KB initial)

📁 Project Structure

src/app/
├── core/
│   └── services/
│       ├── wordpress-api.service.ts  # WordPress REST API
│       ├── language.service.ts       # i18n state management
│       └── theme.service.ts          # Dark/Light mode
├── shared/components/
│   ├── post-card/
│   ├── trending-sidebar/
│   ├── giscus-comments/
│   └── ...
├── features/
│   ├── home/
│   ├── post/
│   ├── portfolio/
│   └── ...
└── assets/i18n/
    ├── es.json  # Spanish translations
    └── en.json  # English translations

🌐 WordPress Plugin

For AI-powered content translation, install the included WordPress plugin:

wordpress-plugins/hackeruna-translate/

Setup:

1. Copy to wp-content/plugins/
2. Activate in WordPress Admin
3. Go to Settings → Hackeruna Translate
4. Add your OpenAI API Key

Cost: ~$0.80 for 500 posts, $0.0016 per new article

🛠️ Tech Stack

• Framework: Angular 21 (standalone components, signals)
• TypeScript: 5.9.3
• i18n: Transloco
• Styling: Tailwind CSS 3.4
• Comments: Giscus
• Backend: WordPress REST API + Custom Plugin
• AI: OpenAI GPT-4o-mini

🤝 Contributing

1. Fork the project
2. Create feature branch (git checkout -b feature/amazing)
3. Commit changes (git commit -m 'feat: add amazing feature')
4. Push to branch (git push origin feature/amazing)
5. Open Pull Request

See CONTRIBUTING.md for guidelines.

📄 License

MIT License - see LICENSE file.

👤 Author

Juan Urquiza - @juanitourquiza

---

Made with ❤️ and Angular