Skip to main content

Setup & Installation

Complete guide to setting up the ZÈYA Admin Panel for development.

Prerequisites​

  • Node.js: 18.x or higher
  • npm: 9.x or higher (or yarn)
  • Git: For version control

Installation Steps​

1. Clone Repository​

cd Zeya-Admin

2. Install Dependencies​

# Install npm dependencies
npm install

3. Environment Configuration​

Create a .env.local file in the root directory:

# API Configuration
NEXT_PUBLIC_API_URL=https://api.zeya.app/api/admin/v1
NEXT_PUBLIC_API_BASE_URL=https://api.zeya.app

# Authentication
NEXT_PUBLIC_AUTH_TOKEN_KEY=auth_token

# Environment
NEXT_PUBLIC_APP_ENV=development

4. Start Development Server​

npm run dev

The admin panel will be available at http://localhost:3000

5. Access the Dashboard​

  • Navigate to http://localhost:3000
  • Login with admin credentials
  • Access the dashboard

Development Setup​

Project Structure​

Zeya-Admin/
├── pages/              # Next.js pages (file-based routing)
│   ├── index.js       # Dashboard home
│   ├── user/          # User management pages
│   ├── product/       # Product management pages
│   ├── report/        # Report pages
│   └── ...
├── components/         # Reusable components
├── sub-components/    # Page-specific components
├── layouts/           # Layout components
├── utils/             # Utility functions
├── hooks/             # Custom React hooks
├── styles/            # SCSS stylesheets
└── public/            # Static assets

Environment Variables​

Development (.env.local):

NEXT_PUBLIC_API_URL=http://localhost:8000/api/admin/v1
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
NEXT_PUBLIC_APP_ENV=development

Production (.env.production):

NEXT_PUBLIC_API_URL=https://api.zeya.app/api/admin/v1
NEXT_PUBLIC_API_BASE_URL=https://api.zeya.app
NEXT_PUBLIC_APP_ENV=production

Troubleshooting​

Common Issues​

Issue: Module not found errors

  • Solution:
    • Delete node_modules and reinstall: rm -rf node_modules && npm install
    • Clear Next.js cache: rm -rf .next

Issue: Port 3000 already in use

  • Solution:
    • Use different port: npm run dev -- -p 3001
    • Or kill process on port 3000

Issue: API calls failing

  • Solution:
    • Verify API URL in .env.local
    • Check API server is running
    • Verify CORS settings on API server

Issue: Authentication not working

  • Solution:
    • Check token storage (Cookies)
    • Verify API authentication endpoint
    • Check browser console for errors

Clearing Caches​

# Clear Next.js cache
rm -rf .next

# Clear node modules
rm -rf node_modules
npm install

# Clear npm cache
npm cache clean --force

Development Tools​

  • ESLint
  • Prettier
  • SCSS IntelliSense
  • Next.js snippets
  • React snippets

Browser Extensions​

  • React Developer Tools
  • Redux DevTools (if using Redux)

Verification​

Health Check​

  1. Start development server: npm run dev
  2. Navigate to http://localhost:3000
  3. Verify login page appears
  4. Check browser console for errors
  5. Test API connectivity

Test Authentication​

# Test login flow
# Navigate to /authentication/sign-in
# Enter admin credentials
# Verify redirect to dashboard

Next Steps​