Pimula Communications
Launched
Software Engineer
Overview
A full stack agency platform built with Next.js, Payload CMS and PostgreSQL, combining a bilingual portfolio with content management, enquiries, applications and supplier onboarding.
Project toolkit
Tools that shaped the build
A compact map of the frameworks, services, and interface layers behind the final experience.
10 signals
Case study
I built Pimula Communications as a full stack platform: a responsive agency website backed by a custom Payload CMS, PostgreSQL and workflows for the teams running it. The implementation brings together an image-led portfolio, English and Arabic content, reusable editorial blocks, enquiries, recruitment, creator submissions and supplier registration.
Outcomes
Payload CMS
Editable agency platform
Projects, articles, page content and SEO are managed through a dedicated administration interface.
EN / AR
Bilingual implementation
Localized content and right-to-left layout support for English and Arabic.
Connected
Business workflows
Enquiries, applications, creator submissions and supplier records connect the public site to CMS operations.
Problem
Pimula needed a website that could present its PR, influencer and event work while supporting the day-to-day needs of its team. Projects, campaign imagery, page copy and opportunities had to be editable without turning every content update into a development task.
The implementation also had to connect the public experience to business operations. Enquiries, job applications, creator submissions and supplier registrations needed structured records, clear ownership and appropriate access inside the CMS.
Solution
I implemented the public website in Next.js and React, using TypeScript, Tailwind CSS and GSAP for responsive layouts and motion. Payload runs alongside the frontend, with PostgreSQL storing content and submissions. The site covers featured work, portfolio detail pages, articles, the agency story, people, careers and contact.
I configured localized CMS fields and next-intl for English and Arabic, including right-to-left layouts. Page globals expose copy, navigation, imagery and SEO settings, while collection models handle projects, articles, team members and jobs. Reusable content blocks let editors assemble case studies with text, images, galleries, statistics, quotes and video.
The backend connects public forms to CMS collections and email hooks. Team roles govern what content, editorial, business and HR users can access, with administrator-only controls for account management and sensitive settings.
Process
1
Model the content around the agency
I separated repeatable records such as projects, articles and jobs from page-level settings and interface copy. Payload relationships connect content to shared media, and case-study blocks give editors a consistent way to build varied campaign stories. Live preview is configured for desktop and mobile editing.
2
Build the responsive, bilingual experience
I connected Next.js pages to Payload content and implemented the featured-project carousel, portfolio browsing and detailed campaign pages. Responsive image controls let editors adjust crops and focal points for different screens. Locale-aware routes, translated copy and direction-aware layouts support both English and Arabic.
3
Connect forms to team workflows
I implemented structured enquiry and application records, creator submissions and supplier onboarding. Supplier registration includes server-side schema validation, a honeypot, image processing, duplicate-submission checks and protected document access. CMS email hooks support submission acknowledgements and team notifications.
4
Prepare the application for production
I configured a multi-stage Docker build for the standalone Next.js and Payload app, a persistent PostgreSQL service and health checks. The GitHub Actions workflow builds container images and deploys to DigitalOcean. CMS change hooks revalidate affected public pages, and custom admin views provide traffic, content, lead and operational insights.
Responsibilities
Next.js and React frontend implementation
Payload CMS configuration and PostgreSQL integration
English and Arabic localization with RTL support
Content blocks, media controls and editorial tooling
Public form workflows, email hooks and role-based access
Docker packaging and deployment workflow configuration
Highlights
Reusable case-study blocks for text, galleries, image pairs, quotes, statistics and video
CMS controls for responsive image crops, focal points and homepage placement
Desktop and mobile live-preview configuration
Role-aware admin navigation and API permissions
Custom admin views for traffic, leads, content and operational insights
Content-change hooks that revalidate affected public routes
Lessons
This project reinforced the value of modelling the CMS around the people who use it. Page copy, portfolio content, recruitment and business submissions need different editing controls and permissions, even when they share one application.
Building English and Arabic together also made localization an architectural concern: content fields, routes, layout direction and image presentation all had to work as part of the same system. Connecting those decisions to reusable components and content blocks makes the platform easier to extend.