nexus-react-core

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

npm install nexus-react-core

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @reduxjs/toolkit react react-redux axios

Optional Dependencies

For full functionality, you may also want:

# 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

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

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

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

3. Use Services and Hooks

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 - Detailed usage examples
• API Reference - Complete API documentation

Migration from Existing Project

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

• Install the package: npm install nexus-react-core

• Replace imports:

  // Before
  import { apiCall } from "@/hooks/apiCall";
  import { useAppSelector } from "@/contexts/rootStore";
  
  // After
  import { apiCall, useAppSelector } from "nexus-react-core";
  

• Initialize configuration as shown above

• Remove local copies of services, hooks, and store files

Development

# Install dependencies
npm install

# Build the package
npm run build

# Run linting
npm run lint

# Run tests
npm test

Publishing

# Build and publish
npm run prepublishOnly
npm publish

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

MIT License - see LICENSE file for details.

Support

• 📧 Email: [e-mail]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Usage Guide