Duolingo-style gamified training for industrial maintenance technicians
A bilingual (Spanish/English) learning platform for Venezuelan industrial maintenance technicians. Learn electrical fundamentals, PLC programming, mechanical systems, and safety practices through gamified lessons.
- 🎯 Role-based learning paths: Mechanic, Electrician, PLC Technician, PLC Specialist
- 🌐 Bilingual support: Spanish (primary) + English toggle
- 🎮 Gamification: XP, hearts, streaks, leaderboards, badges
- 📚 Technical content: Industry-relevant curriculum from L1 to advanced
- 📱 Mobile responsive: Learn anywhere on any device
| Layer | Technology |
|---|---|
| Framework | Next.js 14+ / React 18 / TypeScript |
| UI | Shadcn UI + TailwindCSS |
| State | Zustand |
| Database | PostgreSQL (Neon) |
| ORM | Drizzle ORM |
| Auth | Clerk |
| Payments | Stripe (optional) |
| Hosting | Vercel |
- Node.js 18+
- npm or yarn
- PostgreSQL database (Neon recommended)
- Clerk account for authentication
- Clone the repository:
git clone https://github.com/Mikecranesync/IndustrialSkillsHub.git
cd IndustrialSkillsHub- Install dependencies:
npm install --legacy-peer-deps- Set up environment variables:
cp .env.example .env.localEdit .env.local with your credentials:
# Clerk Auth
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx
# Clerk redirect URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="/"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="/"
# Database
DATABASE_URL=postgresql://user:pass@host/db?sslmode=require
# Stripe (optional)
STRIPE_API_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
CLERK_ADMIN_IDS="user_xxx"- Push database schema:
npm run db:push- Seed industrial content:
npm run db:seed-industrial- Start development server:
npm run devVisit http://localhost:3000
IndustrialSkillsHub/
├── app/ # Next.js app router pages
│ ├── (auth)/ # Auth pages (sign-in, sign-up)
│ ├── (main)/ # Main app (learn, courses, leaderboard)
│ ├── (marketing)/ # Landing page
│ ├── admin/ # Admin dashboard
│ ├── lesson/ # Lesson/challenge pages
│ └── onboarding/ # Role selection
├── actions/ # Server actions
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ └── *.tsx # App-specific components
├── data/ # Static data files
│ └── glossary.json # Technical terms dictionary
├── db/ # Database
│ ├── drizzle.ts # DB connection
│ ├── queries.ts # Data queries
│ └── schema.ts # Drizzle schema
├── lib/ # Utilities
├── scripts/ # Database scripts
│ ├── prod.ts # Original seed script
│ └── seed-industrial.ts # Industrial content seed
└── store/ # Zustand stores
├── use-language.ts # Language toggle state
└── use-*.ts # Modal states
- L1: Voltage, Current, Resistance, Power, AC/DC, Safety, Tools
- L2: Circuits, Transformers, Motors, Troubleshooting (coming soon)
- L1: Bearings, Pumps, Motors, Lubrication, Alignment (coming soon)
- L1: PLC Basics, Ladder Logic, I/O, Troubleshooting (coming soon)
- L2: Advanced Programming, HMI, SCADA (coming soon)
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run db:push |
Push schema to database |
npm run db:seed-industrial |
Seed industrial content |
npm run db:studio |
Open Drizzle Studio |
npm run db:prod |
Seed original language content |
The app supports Spanish (ES) and English (EN):
- Default language: Spanish (for Venezuelan technicians)
- Toggle: Instant language switch without page reload
- Persistence: Preference saved to localStorage
- Database: All content stored in both languages
// Using the language toggle
import { LanguageToggle } from "@/components/language-toggle";
// Using translations
import { useTranslation } from "@/store/use-language";
const { t, tField, language } = useTranslation();
// For static translations
t({ en: "Hello", es: "Hola" });
// For database fields
tField(lesson, "title"); // reads titleEn or titleEs based on language- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
MIT License - see LICENSE for details.
- Based on duolingo-clone by Sanidhya Kumar Verma
- Code with Antonio: https://codewithantonio.com/
- Built for Venezuelan industrial technicians
- Inspired by Duolingo's gamification approach to learning
¡Aprende mantenimiento industrial de forma divertida! 🇻🇪
Learn industrial maintenance the fun way! 🔧
