Engineering & Technology Solutions

Built with Next.js 15, Payload CMS, and cutting-edge React patterns

Go to Admin PanelLearn More

Features

Everything you need to build modern web applications

Internationalization
Full i18n support with next-intl. Switch between English and Arabic with RTL support.
Headless CMS
Powerful Payload CMS integration with custom collections and admin panel.
Modern UI
Beautiful components from shadcn/ui with custom theming and dark mode.
TypeScript
Fully typed with strict TypeScript for better developer experience.
Smart Forms
React Hook Form with Zod validation for robust form handling.
State Management
Zustand for client state, React Query for server state.

Live Examples

Explore interactive demonstrations of all the features included in this template

Form Validation

React Hook Form with Zod validation and full i18n support

Form Validation Features
  • •Real-time validation with React Hook Form
  • •Type-safe schema validation using Zod
  • •Accessible form fields with proper ARIA labels
  • •Toast notifications for success and error states
  • •Loading states with disabled buttons during submission
  • •Full i18n support for validation messages
Contact Form
Fill out the form below to send us a message
Newsletter
Subscribe to our newsletter for updates and news

We'll never share your email with anyone else.

Data Fetching

React Query for efficient data fetching and caching

React Query Demo
Fetching data from JSONPlaceholder API
Loading
Fetching
No Error
Posts
First 5 posts from the API
React Query Features
  • •Automatic caching and background updates
  • •Loading and error states management
  • •Mutations for creating/updating data
  • •Query invalidation and refetching

State Management

Zustand for simple and scalable state management with persistence

Zustand State Management Features
  • •Simple Counter - Basic state with increment/decrement
  • •Shopping Cart - Complex state with persisted data
  • •Authentication - User state with login/logout
  • •Computed Values - Automatic total and item count
  • •Persistence - Cart and auth data saved to localStorage
Counter
Simple counter state management
0
Shopping Cart
Shopping cart with persisted state
0 items

Available Products

Product A
$29.99
Product B
$49.99
Product C
$19.99

Cart Items

Your cart is empty

Utilities & Hooks

Custom hooks and utility functions for common tasks

Date Formatting
Date formatting with date-fns and locale support

January 7th, 2026

Jan 7, 2026, 11:42:38 AM

about 2 years ago

2026-01-07 11:42:38

String Manipulation
Common string utility functions

Hello world example

Hello world example

hello-world-example

hello world ...

cn() Utility Function
Tailwind CSS class name utility (clsx + tailwind-merge)

The cn() function combines clsx and tailwind-merge to intelligently merge Tailwind CSS classes.

cn("px-2 py-1", "px-4") → "py-1 px-4"
cn("text-red-500", isActive && "text-blue-500")
useOnlineStatus Hook
Real-time network connectivity detection with reliability check

The useOnlineStatus() hook monitors network connectivity and performs actual connectivity tests (not just navigator.onLine).

Online

Connected

Never

Note: Try toggling your network connection to see real-time updates. The hook automatically listens to online and offline events.

Animations

Beautiful animations with react-awesome-reveal

Fade Up
Slide Left
Zoom In
Bounce
Rotate
Flip
Roll

Ready to get started?

Explore all the features and start building your next project with this comprehensive template.

Go to Admin PanelView on GitHub
    Eng Techno Payload Next.js Template