A comprehensive digital manual for Brazilian Jiu-Jitsu techniques, featuring interactive 3D models, video tutorials, and bilingual support.
BJJ Manual is a modern web application designed to help practitioners of all levels learn and master Brazilian Jiu-Jitsu techniques. The platform provides an organized, searchable library of techniques with video demonstrations, detailed descriptions, and interactive 3D visualizations.
- 🎯 Comprehensive Technique Library - Organized by position (Closed Guard, Side Control, Mount, Back, Crucifix, and more)
- 🎥 Video Tutorials - Embedded YouTube videos for each technique
- 🌍 Bilingual Support - Full English and Spanish translations
- 🎨 Modern UI/UX - Beautiful, responsive design with dark mode support
- 🎭 3D Visualizations - Interactive 3D models powered by Three.js
- ⚔️ Attack & Defense - Techniques categorized by offensive and defensive moves
- 🔍 Easy Navigation - Intuitive interface to browse and discover techniques
- 📱 Mobile Friendly - Fully responsive design for all devices
- Node.js 18+
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/yourusername/bjj-manual.git cd bjj-manual -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
bjj-manual/
├── app/
│ ├── components/ # React components
│ │ ├── bjj-model.tsx # 3D BJJ model component
│ │ ├── mode-toggle.tsx # Dark mode toggle
│ │ └── navbar.tsx # Navigation bar
│ ├── contexts/ # React contexts
│ │ └── language-context.tsx
│ ├── data/
│ │ └── techniques.ts # Technique database
│ ├── techniques/ # Techniques pages
│ ├── translations/ # UI translations
│ └── page.tsx # Home page
├── components/
│ └── ui/ # Reusable UI components
└── lib/
└── utils.ts # Utility functions
The manual is organized into the following position categories:
- Closed Guard - Techniques from closed guard position
- Side Control - Side control attacks and transitions
- Mount - Mount position techniques and escapes
- Back - Back control and back takes
- Crucifix - Crucifix position techniques
- Double Sleeve - Double sleeve guard techniques
Each technique includes:
- Detailed descriptions in English and Spanish
- Video demonstrations
- Attack or defense classification
- Unique identifier for easy reference
- Framework: Next.js 14 - React framework with App Router
- Language: TypeScript - Type-safe JavaScript
- Styling: Tailwind CSS - Utility-first CSS framework
- 3D Graphics: Three.js & React Three Fiber - 3D visualizations
- UI Components: Radix UI - Accessible component primitives
- Animations: Framer Motion - Motion library
- Theming: next-themes - Dark mode support
- Icons: Lucide React - Beautiful icon library
Techniques are stored in app/data/techniques.ts. To add a new technique:
{
id: 'technique-id',
subcategory: 'attack', // or 'defense'
title: {
en: 'English Title',
es: 'Título en Español'
},
description: {
en: 'English description...',
es: 'Descripción en español...'
},
videoUrl: 'https://www.youtube.com/embed/VIDEO_ID'
}The app supports light and dark themes. Users can toggle between themes using the mode toggle in the navigation bar.
The application supports English and Spanish. Language switching is handled through the language context.
npm run build
npm startContributions are welcome! Please feel free to submit a Pull Request. When adding new techniques:
- Follow the existing data structure
- Include both English and Spanish translations
- Ensure video URLs are in embed format
- Test the application locally
This project is open source and available under the MIT License.
- All BJJ practitioners and instructors who inspire this project
- The open-source community for the amazing tools and libraries
Built with ❤️ for the BJJ community