Skip to main content

Contributing Guide

Code standards, best practices, and contribution guidelines for ZÈYA Admin Panel.

Code Standards​

1. Follow Next.js Conventions​

  • Use functional components with hooks
  • Follow Next.js file-based routing
  • Use Next.js Image component for images
  • Follow React best practices

2. Component Structure​

✅ Good:

export default function UserCard({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
    </div>
  );
}

❌ Bad:

// Class components (avoid)
class UserCard extends React.Component {
  // ...
}

3. Use Layout Components​

✅ Good:

import DefaultDashboardLayout from 'layouts/DefaultDashboardLayout';

export default function MyPage() {
  return (
    <DefaultDashboardLayout>
      <div>Page Content</div>
    </DefaultDashboardLayout>
  );
}

❌ Bad:

// Manual layout implementation
export default function MyPage() {
  return (
    <div>
      <Navbar />
      <Sidebar />
      <div>Content</div>
    </div>
  );
}

4. Use Authentication HOC​

✅ Good:

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

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

export default withAuth(ProtectedPage);

❌ Bad:

// Manual auth checks
function ProtectedPage() {
  const token = Cookies.get('auth_token');
  if (!token) {
    router.push('/sign-in');
    return null;
  }
  return <div>Content</div>;
}

5. Error Handling​

✅ Good:

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

❌ Bad:

const data = await fetchUsers(); // No error handling

Development Workflow​

1. Create Feature Branch​

git checkout -b feature/your-feature-name

2. Make Changes​

  • Follow coding standards
  • Write clean, readable code
  • Add comments where necessary
  • Keep components small and focused

3. Test Changes​

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

4. Format Code​

npm run lint

5. Commit Changes​

Use conventional commit messages:

feat: add user management feature
fix: resolve authentication bug
docs: update API documentation
refactor: improve user component
test: add user tests
chore: update dependencies

6. Push and Create PR​

git push origin feature/your-feature-name

Code Review Checklist​

Before submitting a PR, ensure:

  • Code follows Next.js conventions
  • Components are functional with hooks
  • Authentication is properly handled
  • Error handling is implemented
  • Code is linted
  • Tested in browser
  • No console.logs left
  • Responsive design tested
  • API integration tested

File Organization​

Pages​

  • Location: pages/
  • Naming: kebab-case for files
  • Example: user-management.js

Components​

  • Location: components/ or sub-components/
  • Naming: PascalCase
  • Example: UserCard.js

Utilities​

  • Location: utils/
  • Naming: camelCase
  • Example: withAuth.js, dataCache.js

Styles​

  • Location: styles/
  • Naming: kebab-case for SCSS files
  • Example: _user.scss

Common Patterns​

Page Pattern​

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

function MyPage() {
  return (
    <DefaultDashboardLayout>
      <div>Page Content</div>
    </DefaultDashboardLayout>
  );
}

export default withAuth(MyPage);

Component Pattern​

import { useState, useEffect } from 'react';

export default function MyComponent({ data }) {
  const [state, setState] = useState(null);
  
  useEffect(() => {
    // Component logic
  }, []);
  
  return (
    <div>
      {/* Component JSX */}
    </div>
  );
}

API Call Pattern​

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('Error:', error);
    throw error;
  }
};

Best Practices​

1. Component Size​

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

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

2. State Management​

// ✅ Good: Use hooks for local state
const [count, setCount] = useState(0);

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

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

3. Performance​

// ✅ Good: Use dynamic imports
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'));

// ✅ Good: Use Next.js Image
import Image from 'next/image';
<Image src="/image.jpg" alt="Image" width={500} height={300} />

// ❌ Bad: Regular img tag
<img src="/image.jpg" alt="Image" />

4. Authentication​

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

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

What to Avoid​

❌ Never Do These:​

  1. NO class components - Use functional components
  2. NO manual auth checks - Use withAuth HOC
  3. NO inline styles - Use SCSS or CSS modules
  4. NO console.logs in production - Remove before commit
  5. NO large components - Split into smaller components
  6. NO missing error handling - Always handle errors
  7. NO hardcoded API URLs - Use environment variables
  8. NO missing loading states - Show loading indicators
  9. NO missing error states - Show error messages
  10. NO missing responsive design - Test on all screen sizes

Testing Guidelines​

Manual Testing​

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

Code Quality​

  • Run linter before committing
  • Fix all linting errors
  • Follow code style guide
  • Write readable code