Togl

Modern UI for Enterprise-Grade Feature Management

Features • Quick Start • Architecture • Components • Contributing

---

Overview

Togl is a feature management system. Built with Next.js and React, it provides a sleek, responsive, and user-friendly dashboard for managing feature flags, user roles, and organizational settings.

Features

🎨 Modern Design

• Responsive layout using Tailwind CSS
• Dark mode support
• Customizable themes

🚀 Performance Optimized

• Server-side rendering with Next.js
• Optimized asset loading and code splitting
• Efficient state management with React Query

🔐 Secure Authentication

• Integration with Togl backend OAuth
• Protected routes and role-based access control
• Secure token management

📊 Advanced Dashboards

• Real-time feature flag status
• Analytics and usage statistics
• User and organization management interfaces

🔌 Seamless Integration

• WebSocket support for live updates
• RESTful API consumption
• Webhook configuration UI

Quick Start

Prerequisites

• Node.js >= 18
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/togl-ui.git

# Install dependencies
cd togl-ui
npm install

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

# Start the development server
npm run dev

Architecture

├── pages/               # Next.js pages
├── components/          # React components
│   ├── common/          # Reusable UI components
│   ├── layout/          # Layout components
│   └── features/        # Feature-specific components
├── styles/              # Global styles and Tailwind config
├── lib/                 # Utility functions and helpers
├── hooks/               # Custom React hooks
├── context/             # React context providers
├── public/              # Static assets
└── tests/               # Test suites

Key Components

Feature Flag Management

import { useEffect, useState } from 'react'

function MyFeature() {
  const [isEnabled, setIsEnabled] = useState(false)

  useEffect(() => {
    const checkFeatureFlag = async () => {
      const response = await fetch('https://togl.sutharjay3635.workers.dev/api/token/<TOKEN_ID>', {
        headers: {
          'Authorization': 'Bearer <API_KEY>', 
        }
      })
      const data = await response.json()
      setIsEnabled(data.enabled)
    }

    checkFeatureFlag()
  }, [])

  return isEnabled ? <NewFeature /> : <OldFeature />
}

Response

The API returns the following structure:

{
  "name": string,
  "isEnabled": boolean,
  "rules": json
}

Configuration

Environment Variables

NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_WS_URL=ws://localhost:3000
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id

Development

# Run tests
npm test

# Run linter
npm run lint

# Build for production
npm run build

Deployment

Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform.

Check out the Next.js deployment documentation for more details.

Contributing

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

License

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

Support

• 📚 Documentation
• 💬 Discord Community
• 🐛 Issue Tracker
• 📧 Email Support

Acknowledgments

• Next.js - The React Framework for Production
• Tailwind CSS - A utility-first CSS framework
• React Query - Hooks for fetching, caching and updating asynchronous data in React

---

Made with ❤️ by the Togl team

```

This README provides a comprehensive overview of your Togl UI project, including its features, setup instructions, architecture, and key components. It maintains a similar structure to your backend README, ensuring consistency across your project documentation. The README also includes sections on deployment, contributing guidelines, and support channels, making it a valuable resource for developers working on or integrating with your Togl UI.