CrUAtivity
CrUAtivity is a project by the All-Ukrainian Advertising Coalition showcasing Ukrainian advertising creativity during wartime. The platform required a technically complex implementation with headless architecture, where the frontend operates independently from the backend, ensuring instant interaction and smooth navigation.
Task
Build a web platform with a React/Next.js frontend running in a Docker container and a WordPress backend (client requirement). Extend the WordPress REST API for project-specific needs, implement dynamic filtering, infinite news scrolling, and a mobile-first approach.
What was done
- Built the frontend on React/Next.js with server-side rendering for fast initial page loads.
- Configured Docker containerization on the server with automatic cache clearing and monitoring.
- Extended the WordPress REST API with custom endpoints matching the project's data structure.
- Implemented dynamic content filtering without page reloads using React state management.
- Built infinite scroll for the news feed with lazy block loading and DOM optimization.
- Designed the interface following a mobile-first principle with progressive enhancement for larger screens.
- Optimized resource loading: code splitting, image lazy-loading, critical data prefetching.
- Configured Next.js ISR caching to balance content freshness with speed.
- Ensured stable Docker environment operation with automatic restart on failures.
- Connected analytics for tracking engagement and content viewing depth.
Tell us about your project