Skip to main content

Development Guide

Development workflow, best practices, and common tasks for ZÈYA Admin Panel.

Development Workflow​

1. Start Development Server​

npm run dev

The dashboard will be available at http://localhost:3000

2. Make Changes​

  • Edit files in pages/, components/, sub-components/
  • Changes hot-reload automatically
  • Check browser console for errors

3. Test Changes​

  • Test in browser
  • Check console for errors
  • Verify API integration
  • Test responsive design

Code Quality​

ESLint​

# Run linting
npm run lint

# Fix auto-fixable issues
npm run lint -- --fix

Code Formatting​

Follow project style guide:

  • 2 spaces for indentation
  • Single quotes for strings
  • Semicolons
  • Trailing commas

Common Development Tasks​

Creating a New Page​

  1. Create file in pages/
// pages/new-page.js
import DefaultDashboardLayout from 'layouts/DefaultDashboardLayout';

export default function NewPage() {
  return (
    <DefaultDashboardLayout>
      <div>New Page Content</div>
    </DefaultDashboardLayout>
  );
}
  1. Access at /new-page

Creating a New Component​

  1. Create component file
// components/NewComponent.js
export default function NewComponent({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}
  1. Use in pages
import NewComponent from '../components/NewComponent';

<NewComponent title="Hello" />

Making API Calls​

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

const fetchData = async () => {
  try {
    const token = Cookies.get('auth_token');
    const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/endpoint`, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    return response.data;
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
};

Using Data Caching​

import useCachedData from '../hooks/useCachedData';

function MyComponent() {
  const { data, loading, error } = useCachedData(
    'cache-key',
    async () => {
      const response = await fetchData();
      return response;
    },
    { ttl: 60000 } // Cache for 60 seconds
  );
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return <div>{JSON.stringify(data)}</div>;
}

Creating Protected Pages​

import withAuth from '../utils/withAuth';
import DefaultDashboardLayout from 'layouts/DefaultDashboardLayout';

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

export default withAuth(ProtectedPage);

Using Charts​

ApexCharts:

import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

function MyChart() {
  const options = {
    chart: { type: 'bar' },
    series: [{ data: [1, 2, 3] }],
  };
  
  return <Chart options={options} series={options.series} type="bar" />;
}

Recharts:

import { BarChart, Bar, XAxis, YAxis } from 'recharts';

function MyChart() {
  const data = [{ name: 'A', value: 1 }];
  
  return (
    <BarChart data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Bar dataKey="value" />
    </BarChart>
  );
}

Debugging​

Browser DevTools​

  • React DevTools: Inspect React components
  • Console: View logs and errors
  • Network: Monitor API calls
  • Application: View cookies and storage

Console Logging​

console.log('Debug message');
console.warn('Warning message');
console.error('Error message');

API Debugging​

// Log API requests
axios.interceptors.request.use(request => {
  console.log('Request:', request);
  return request;
});

// Log API responses
axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

Testing​

Manual Testing Checklist​

  • Test on Chrome
  • Test on Firefox
  • Test on Safari
  • Test responsive design
  • Test authentication flows
  • Test API integration
  • Test form submissions
  • Test navigation

Browser Testing​

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Performance Optimization​

Code Splitting​

// Dynamic import for heavy components
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <div>Loading...</div>,
});

Image Optimization​

import Image from 'next/image';

<Image
  src="/images/example.jpg"
  alt="Example"
  width={500}
  height={300}
  loading="lazy"
/>

Data Caching​

// Use caching hook to reduce API calls
const { data } = useCachedData('key', fetchFunction, { ttl: 60000 });

Common Issues & Solutions​

Build Errors​

# Clear Next.js cache
rm -rf .next

# Reinstall dependencies
rm -rf node_modules
npm install

API Errors​

  • Verify API URL in .env.local
  • Check CORS settings
  • Verify authentication token
  • Check network tab in browser

Styling Issues​

  • Check SCSS compilation
  • Verify Bootstrap classes
  • Check component styles
  • Inspect in browser DevTools

Git Workflow​

Branch Naming​

feature/feature-name
fix/bug-description
refactor/component-name

Commit Messages​

feat: add new feature
fix: fix bug description
refactor: refactor component
docs: update documentation
style: code formatting
test: add tests

Before Committing​

  • Code is linted
  • No console.logs left
  • Build succeeds
  • Tested in browser

Best Practices​

1. Component Structure​

// ✅ Good: Small, focused components
function UserCard({ user }) {
  return <div>...</div>;
}

// ❌ Bad: Large, complex components
function UserCard({ user }) {
  // 200+ lines of code
}

2. API Calls​

// ✅ Good: Error handling
try {
  const data = await fetchData();
} catch (error) {
  console.error('Error:', error);
  // Show user-friendly error
}

// ❌ Bad: No error handling
const data = await fetchData();

3. Authentication​

// ✅ Good: Use withAuth HOC
export default withAuth(ProtectedPage);

// ❌ Bad: Manual auth checks everywhere
if (!token) {
  router.push('/sign-in');
}

4. Data Caching​

// ✅ Good: Use caching hook
const { data } = useCachedData('key', fetchFunction);

// ❌ Bad: Fetch on every render
useEffect(() => {
  fetchData();
}, []);