nexus-react-core/README.md

A comprehensive React toolkit with services, hooks, and Redux store management

# nexus-react-core

A comprehensive React toolkit with services, hooks, and Redux store management for modern applications.

## Features

- 🔧 **Services**: API calls, image processing, DALL-E integration, trading, face detection
- 🎣 **Hooks**: Mobile detection, notifications, face detection
- 🏪 **Redux Store**: User state, notifications, and more
- 📱 **Next.js Ready**: Built specifically for Next.js applications
- 🔒 **Type Safe**: Full TypeScript support
- ⚡ **Tree Shakeable**: Import only what you need

## Installation

```bash
npm install nexus-react-core
```

## Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install @reduxjs/toolkit react react-redux axios
```

### Optional Dependencies

For full functionality, you may also want:

```bash
# For DALL-E image generation
npm install openai

# For face detection
npm install @tensorflow/tfjs @tensorflow-models/blazeface

# For blockchain trading
npm install @solana/web3.js @solana/spl-token

# For WebSocket connections
npm install socket.io-client
```

## Quick Start

### 1. Initialize Configuration

```typescript
import { initializeDGN } from "nexus-react-core";

initializeDGN({
  apiBaseUrl: process.env.NEXT_PUBLIC_API_URL!,
  wsUrl: process.env.NEXT_PUBLIC_WS_URL,
  csrfEnabled: false,
});
```

### 2. Set up Redux Provider

```typescript
import { Provider } from "react-redux";
import { store } from "nexus-react-core";

function App() {
  return (
    <Provider store={store}>
      <YourApp />
    </Provider>
  );
}
```

### 3. Use Services and Hooks

```typescript
import { apiCall, useIsMobile, useAppSelector } from "nexus-react-core";

function MyComponent() {
  const isMobile = useIsMobile();
  const user = useAppSelector((state) => state.user);

  const fetchData = async () => {
    const data = await apiCall("/api/data", "GET");
    console.log(data);
  };

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>Device: {isMobile ? "Mobile" : "Desktop"}</p>
    </div>
  );
}
```

## Services

- **apiCall**: HTTP client with automatic token refresh
- **Image Service**: Save images from URLs, convert base64 to blob
- **DALL-E Service**: Generate images using OpenAI's DALL-E
- **Trading Service**: Crypto price fetching and trading operations
- **Face Detection**: Real-time face detection using TensorFlow

## Hooks

- **useIsMobile**: Responsive design hook
- **useNotifications**: Notification management
- **useFaceDetection**: Face detection hook

## Redux Store

- **User Slice**: User profile, missions, achievements
- **Notifications Slice**: App-wide notifications

## Documentation

- [Usage Examples](./USAGE.md) - Detailed usage examples
- [API Reference](./API.md) - Complete API documentation

## Migration from Existing Project

If you're migrating from an existing DGN Platform project:

1. Install the package: `npm install nexus-react-core`
2. Replace imports:

   ```typescript
   // Before
   import { apiCall } from "@/hooks/apiCall";
   import { useAppSelector } from "@/contexts/rootStore";

   // After
   import { apiCall, useAppSelector } from "nexus-react-core";
   ```

3. Initialize configuration as shown above
4. Remove local copies of services, hooks, and store files

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Run linting
npm run lint

# Run tests
npm test
```

## Publishing

```bash
# Build and publish
npm run prepublishOnly
npm publish
```

## Contributing

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

## License

MIT License - see [LICENSE](LICENSE) file for details.

## Support

- 📧 Email: support@dgn-platform.com
- 🐛 Issues: [GitHub Issues](https://github.com/your-username/dgn-shared/issues)
- 📖 Documentation: [Usage Guide](./USAGE.md)