Braum.gg

🛡️ A stylish League of Legends match analysis tool with Freljord-themed design

📋 Features

🎮 Match Analysis

• Detailed match statistics and timeline
• Role-based performance metrics
• Damage distribution analysis
• Interactive timeline visualization
• Team composition overview

📊 Player Stats

• Comprehensive summoner profiles
• Ranked statistics tracking
• Match history overview
• Performance trends analysis
• Detailed champion statistics

🎨 Unique Design

• Freljord/Braum-themed interface
• Responsive animations
• Interactive elements
• Dynamic particle effects
• Dark/Light theme support

⚙️ Core Components

Click to see component details

Match Components

MatchDetails     - Comprehensive match information
MatchHistory     - List of recent matches
MatchTimeline    - Interactive timeline view
Scoreboard       - Team-based statistics

Stats Components

SummonerProfile  - Player profile display
StatsDisplays    - Various statistical views
RunesDisplay     - Rune configuration display
DamageStats      - Damage analysis charts

UI Components

Navbar           - Navigation component
ThemeToggle      - Theme switching
LoadingStates    - Custom loading animations
ErrorDisplays    - Error handling components

🚀 Getting Started

Prerequisites

• Node.js 18.17 or higher
• npm or yarn
• Riot Games API Key

Installation

1. Clone the repository

git clone https://github.com/yourusername/braum.gg.git
cd braum.gg

2. Install dependencies

npm install
# or
yarn install

3. Configure environment variables

# Create .env.local file with your Riot API key
RIOT_API_KEY=your-api-key-here

4. Run the development server

npm run dev
# or
yarn dev

📂 Project Structure

braum.gg/
├── src/
│   ├── app/          # Next.js pages and API routes
│   ├── components/   # React components
│   ├── lib/          # Utility functions
│   ├── types/        # TypeScript definitions
│   └── styles/       # CSS and styling
├── public/           # Static assets
└── config/          # Configuration files

🛠️ Built With

• Next.js - React framework
• TailwindCSS - Styling
• Framer Motion - Animations
• Riot Games API - Game data
• Recharts - Data visualization

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Riot Games for the API
• shadcn/ui for UI components
• League of Legends community

📞 Support

If you need help with the application, feel free to:

• Open an issue on GitHub
• Contact the developer
• Check the documentation

---

Made with ❤️ by Jawwad Khan