CodeHunts

Most agency websites are slow, hard to maintain, and require expensive hosting. CodeHunts is different. It's a single, self-contained stack — React for a blazing-fast frontend, PHP for a backend that runs on any shared hosting. No Node servers, no Docker, no vendor lock-in.

"Ship fast. Stay lean. Own your stack."

Built with React 19, TypeScript 5.8, and Vite 7. Full type safety, code splitting, lazy loading, and optimized assets out of the box. Mobile-first responsive design powered by Tailwind CSS 4.

ARIA-compliant components built on Radix UI primitives. Follows WCAG guidelines so your site works for everyone, not just most people.

A clean PHP backend with JWT authentication, PDO database connections, and PHPMailer for email. Contact forms, project CRUD, team management — all ready for Hostinger shared hosting.

API key authentication on protected endpoints, SQL injection protection via prepared statements, CORS configuration, and XSS prevention. Security isn't optional.

Protected admin routes for managing projects, team members, and company info. Login with JWT tokens, role-based access, and a clean UI for content management.

• Framer Motion animations — smooth page transitions and micro-interactions
• Form validation — robust client-side validation with helpful error messages
• SEO optimized — meta tags, structured data, and semantic HTML
• Code quality — ESLint, Prettier, and automated formatting checks
• Image uploads — secure file upload handling for projects and team photos
• Email system — SMTP via Hostinger, SendGrid, Gmail, or native mail()

• Node.js 18+
• npm 9+ or yarn 1.22+
• PHP 7.4+ (for backend)
• MySQL/MariaDB (for backend)

git clone https://github.com/uxlabspk/codehunts.git
cd codehunts
npm install
cp .env.example .env

Start the dev server:

npm run dev

The app runs at http://localhost:5173.

1. Upload api/ to your Hostinger public_html/api/ directory
2. Create a MySQL database and import api/database/schema.sql
3. Create an email account in hPanel (e.g. contact@yourdomain.com)
4. Configure: cp api/.env.example api/.env and fill in your credentials
5. Install PHPMailer: cd api && composer install
6. Test: visit https://yourdomain.com/api/projects/list.php

See QUICK-START.md for the fastest setup or BACKEND-SETUP.md for the complete guide.

React (Vite)             SPA with client-side routing, lazy-loaded pages
    ↓
API Calls                Fetch/axios to PHP endpoints
    ↓
PHP API                  RESTful handlers with JWT auth, PDO, PHPMailer
    ↓
MySQL                    Projects, team, contact submissions, admin users
    ↓
Email                    SMTP or native mail() for contact form delivery

Request flow: Frontend hits /api/*.php → auth middleware validates JWT or API key → handler processes with prepared statements → JSON response → frontend updates state.

Admin flow: Login at /admin/login → JWT token stored → protected routes verify token via auth.php middleware → CRUD operations on projects/team/company.

codehunts/
├── src/                         Frontend source
│   ├── components/
│   │   ├── common/             Header, footer, hero, team cards
│   │   ├── landing/            Landing page sections
│   │   ├── portfolio/          Project cards
│   │   ├── services/           Service overview, features, process
│   │   ├── form/               Demo request form
│   │   └── ui/                 Base UI (button, card, input, select)
│   ├── pages/                  Route components (landing, about, services, ...)
│   ├── data/                   Static data (projects, team)
│   ├── hooks/                  Custom hooks (useCountUp)
│   ├── lib/                    Utilities (cn, validation, SEO, scroll)
│   ├── config/                 Environment config
│   ├── constants/              Navigation, buttons, app constants
│   ├── contexts/               Admin auth context
│   ├── services/               API client (admin-api)
│   └── types/                  TypeScript definitions
├── api/                        Backend PHP API
│   ├── auth/                   login.php, me.php
│   ├── projects/               CRUD endpoints (list, create, update, delete)
│   ├── team/                   CRUD endpoints (list, create, update, delete)
│   ├── company/                get.php, update.php, public.php
│   ├── helpers/                auth.php, http.php, jwt.php
│   ├── config/                 database.php, env.php
│   ├── uploads/                Image upload handler
│   └── mail.php                Email sending
├── public/                     Static assets
├── vite.config.ts              Vite configuration
├── tsconfig.json               TypeScript config
├── eslint.config.js            Linting rules
└── package.json                Dependencies and scripts

Protected endpoints require X-API-Key or Authorization: Bearer <JWT> header.

npm run dev            # Start Vite dev server
npm run build          # Production build
npm run preview        # Preview production build
npm run validate       # Run all checks (type + lint + format)
npm run type-check     # TypeScript type checking
npm run lint           # ESLint
npm run lint:fix       # Auto-fix lint issues
npm run format         # Format with Prettier
npm run format:check   # Check formatting

All checks at once:

npm run validate

npm run build
# Upload dist/ contents to Hostinger public_html/

# Upload api/ folder to Hostinger public_html/api/
# Follow BACKEND-SETUP.md for database and email setup

See DEPLOYMENT.md for detailed instructions.

1. Create a feature branch: git checkout -b feature/your-feature
2. Make your changes
3. Run validation: npm run validate
4. Commit: git commit -m "feat: your feature"
5. Push: git push origin feature/your-feature
6. Open a Pull Request

Follow Conventional Commits:

• feat: — new feature
• fix: — bug fix
• docs: — documentation
• style: — formatting
• refactor: — code restructuring
• test: — adding tests
• chore: — build/tooling

Copyright © 2024 CodeHunts. All rights reserved.

Need help?

• Setup: QUICK-START.md · BACKEND-SETUP.md
• Email issues: api/EMAIL-TROUBLESHOOTING.md
• Architecture: ARCHITECTURE.md
• Deployment: DEPLOYMENT.md

Built sharp. Shipped fast.

⭐ Star this repo