Skip to main content

Architecture

Dashboard architecture and project structure documentation for ZÈYA Admin Panel.

Tech Stack​

Core Framework​

  • Next.js: 13.2.4
  • React: 18.2.0
  • React DOM: 18.2.0

UI Framework​

  • Bootstrap: 5.2.3
  • React Bootstrap: 2.7.2
  • Bootstrap Icons: 1.10.2
  • React Feather: 2.0.10
  • React Icons: 5.5.0

Charts & Visualization​

  • ApexCharts: 3.37.3
  • React ApexCharts: 1.4.0
  • Chart.js: 4.5.0
  • React Chart.js 2: 5.3.0
  • Recharts: 3.2.1

HTTP & API​

  • Axios: 1.8.2

Utilities​

  • js-cookie: 3.0.5 (Cookie management)
  • dayjs: 1.11.13 (Date handling)
  • uuid: 9.0.1 (UUID generation)
  • react-copy-to-clipboard: 5.1.0
  • react-dropzone: 14.2.3
  • react-easy-crop: 5.4.2

Styling​

  • SASS: 1.71.1
  • SASS Loader: 13.2.2

Other Libraries​

  • Simplebar: 6.2.4 (Custom scrollbar)
  • React Responsive: 9.0.2
  • Next SEO: 5.15.0
  • Vercel Analytics: 1.0.0

Project Structure​

Zeya-Admin/
├── pages/                      # Next.js pages (file-based routing)
│   ├── _app.js                # App wrapper
│   ├── _document.js           # Document wrapper
│   ├── index.js               # Dashboard home
│   ├── authentication/        # Auth pages
│   │   ├── sign-in.js
│   │   ├── sign-up.js
│   │   ├── sign-out.js
│   │   ├── forget-password.js
│   │   └── reset-password.js
│   ├── user/                  # User management
│   │   ├── index.js
│   │   └── [userId].js
│   ├── product/               # Product management
│   │   ├── index.js
│   │   ├── list.js
│   │   ├── [productId].js
│   │   └── verification.js
│   ├── report/                 # Reports
│   │   ├── transaction/
│   │   ├── report-user/
│   │   └── report-product/
│   ├── demographic/            # Demographics & insights
│   │   ├── index.jsx
│   │   ├── swap-analytics.js
│   │   └── ...
│   ├── groups/                 # Group management
│   ├── notifications/          # Notification management
│   ├── subscription/           # Subscription management
│   ├── roles/                  # Role management
│   └── ...
│
├── components/                 # Reusable components
│   ├── AuthChecker.jsx        # Authentication checker
│   ├── LazyLoad.jsx           # Lazy loading wrapper
│   └── bootstrap/             # Bootstrap components
│
├── sub-components/            # Page-specific components
│   ├── dashboard/             # Dashboard components
│   ├── report/                # Report components
│   ├── user/                  # User components
│   └── ...
│
├── layouts/                    # Layout components
│   ├── DefaultDashboardLayout.js
│   ├── AuthLayout.js
│   ├── NotFound.js
│   └── navbars/               # Navigation bars
│
├── utils/                      # Utility functions
│   ├── withAuth.js            # Auth HOC
│   ├── dataCache.js           # Data caching
│   ├── runtimeConfig.js       # Runtime config
│   └── cropImage.js           # Image cropping
│
├── hooks/                      # Custom React hooks
│   ├── useCachedData.js       # Data caching hook
│   └── useMounted.js          # Mount detection hook
│
├── styles/                     # SCSS stylesheets
│   ├── theme.scss             # Main theme
│   ├── _user.scss             # User styles
│   └── theme/                 # Theme files
│
├── routes/                     # Route configuration
│   └── DashboardRoutes.js
│
├── public/                     # Static assets
│   ├── images/                # Images
│   └── fonts/                 # Fonts
│
├── data/                       # Static/mock data
│   ├── code/                  # Code examples
│   └── pricing/               # Pricing data
│
└── widgets/                    # Widget components
    ├── cards/
    ├── stats/
    └── ...

Architecture Patterns​

File-Based Routing​

Next.js uses file-based routing:

  • pages/index.js → /
  • pages/user/index.js → /user
  • pages/user/[userId].js → /user/:userId

Component Structure​

Component/
├── Component.js          # Main component
├── Component.module.scss # Component styles (if needed)
└── Component.test.js     # Tests (if any)

Layout Pattern​

// Layout wrapper
<DefaultDashboardLayout>
  <PageContent />
</DefaultDashboardLayout>

Authentication Pattern​

// Protected pages use withAuth HOC
import withAuth from '../utils/withAuth';

function ProtectedPage() {
  return <div>Protected Content</div>;
}

export default withAuth(ProtectedPage);

State Management​

Local State (React Hooks)​

  • Component-specific state
  • Form state
  • UI state (modals, toggles)

Data Caching​

  • Custom useCachedData hook
  • dataCache utility for caching API responses
  • Reduces unnecessary API calls
  • Authentication tokens stored in cookies
  • User preferences
  • Session data

API Architecture​

API Configuration​

// Runtime configuration
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

API Call Pattern​

import axios from 'axios';
import Cookies from 'js-cookie';

const apiCall = async (endpoint, options = {}) => {
  const token = Cookies.get('auth_token');
  
  return axios({
    url: `${API_URL}/${endpoint}`,
    headers: {
      Authorization: `Bearer ${token}`,
      ...options.headers,
    },
    ...options,
  });
};

Error Handling​

try {
  const response = await apiCall('endpoint');
  return response.data;
} catch (error) {
  if (error.response?.status === 401) {
    // Handle unauthorized
    router.push('/authentication/sign-in');
  }
  throw error;
}

Authentication Architecture​

Authentication Flow​

  1. User logs in via /authentication/sign-in
  2. Token stored in cookie
  3. AuthChecker component validates token
  4. Protected routes use withAuth HOC
  5. Token refreshed automatically

Protected Routes​

// Using withAuth HOC
import withAuth from '../utils/withAuth';

function AdminPage() {
  return <div>Admin Content</div>;
}

export default withAuth(AdminPage);

Styling Architecture​

SCSS Structure​

  • Theme files: styles/theme/
  • User styles: styles/_user.scss
  • Component styles: Inline or module styles

Bootstrap Integration​

  • Bootstrap 5 as base framework
  • React Bootstrap components
  • Custom SCSS overrides

Performance Optimization​

Code Splitting​

  • Automatic code splitting by Next.js
  • Dynamic imports for heavy components
  • Lazy loading with LazyLoad component

Data Caching​

  • useCachedData hook for API response caching
  • dataCache utility for manual caching
  • Reduces redundant API calls

Image Optimization​

  • Next.js Image component (if configured)
  • Lazy loading images
  • Optimized formats

Build Architecture​

Next.js Build​

# Development
npm run dev

# Production build
npm run build

# Start production server
npm start

# Export static site (if needed)
npm run export

Docker Deployment​

The project includes Docker configuration:

  • docker/Dockerfile.production
  • docker/Dockerfile.stage
  • docker/entrypoint.sh