Getting Started with IBW Admin Dashboard

Quick Start

1. Install Dependencies

   npm install

2. Set Environment Variables Create a .env file:

   VITE_BASE_URL=http://localhost:8080

3. Start Development Server

   npm run dev

4. Open Browser Navigate to http://localhost:5173

5. Login Use your admin credentials to access the dashboard

Documentation Structure

Core Documentation

• Overview: Project overview, tech stack, and features
• Getting Started: This file - quick start guide
• Development Setup: Detailed setup instructions

Component Documentation

• UI Components: Reusable UI component library
• Quest Components: Quest-specific components
• Forms: Form components and patterns
• API Client: API client documentation

Feature Documentation

• Pages and Routing: Page components and routing
• Custom Hooks: React hooks documentation
• Authentication: Auth and security

API Documentation

• API Patterns: API usage patterns and best practices

Key Concepts

Project Structure

src/
├── components/     # React components
├── pages/         # Page components (routes)
├── hooks/         # Custom React hooks
├── lib/           # Utilities and API client
├── contexts/      # React contexts
└── assets/        # Static assets

Main Entry Points

• src/main.tsx: Application entry point
• src/App.tsx: Main app component with routing
• src/lib/api.ts: API client

Common Patterns

1. Data Fetching: Use custom hooks (e.g., useUsers, useEvents)
2. Forms: Use form components (e.g., EventForm, ConferenceForm)
3. API Calls: Use apiClient from @/lib/api
4. Navigation: Use React Router Link and useNavigate
5. Notifications: Use toast from sonner

Next Steps

1. Read the Overview for project details
2. Review Development Setup for configuration
3. Explore UI Components for available components
4. Check API Client for API usage
5. Review Custom Hooks for data fetching patterns

Common Tasks

Adding a New Page

1. Create page component in src/pages/
2. Add route in src/App.tsx
3. Add navigation item in src/components/app-sidebar.tsx

Adding a New API Endpoint

1. Add method to ApiClient class in src/lib/api.ts
2. Create TypeScript interface for request/response
3. Use in components or custom hooks

Creating a Custom Hook

1. Create hook file in src/hooks/
2. Use apiClient for API calls
3. Manage loading, error, and data states
4. Export hook for use in components

Getting Help

• Check the relevant documentation section
• Review existing code for patterns
• Check TypeScript types for API interfaces
• Review component examples in src/pages/

Development Tips

1. Use TypeScript: All code should be typed
2. Follow Patterns: Use existing patterns for consistency
3. Error Handling: Always handle errors and show user feedback
4. Loading States: Show loading indicators during async operations
5. Accessibility: Use semantic HTML and ARIA attributes