Portfolio About Me Services Get in Touch
Back to Portfolio

Nyíregyháza Reformed Church

Modern church community platform featuring event schedules, announcements, and resources with responsive design and optimal performance.

My Role Full-Stack Developer
Timeframe 5 months (part-time)
Category Community Platform
Design Implementation Modernizing legacy design with contemporary UX principles
View Live Project

The Brief

  • Modernize a 2018 CodeIgniter 3 church website
  • Deepen technical expertise
  • Implement gradual modernization without disrupting users
  • Improve design using AI and UX principles
  • Optimize performance for better user experience
  • Update URL structures and image handling

The Solution

  • Phased migration with API endpoints in CI3 and Next.js frontend
  • Dockerized environment with Traefik reverse proxy
  • Performance optimization through Next.js caching
  • Custom image proxy for dynamic resizing
  • Modernized URL structures and focus-point image handling
  • UX modernization using AI-assisted techniques

The Final Product

Homepage

Desktop Frame
Refnyiregyhaza Homepage Desktop
Mobile Frame

Posts Page

Desktop Frame
Refnyiregyhaza Posts Page Desktop
Mobile Frame
Refnyiregyhaza Posts Page Mobile

Post Page

Desktop Frame
Refnyiregyhaza Post Page Desktop
Mobile Frame

Technical Implementation

Tech Stack

CodeIgniter
Next.js
React
Tailwind CSS
PHP
TypeScript
JavaScript
CSS
HTML
MySQL
Docker
Apache
imgproxy
Traefik
GitHub Actions
Figma

Key Challenges & Solutions

Gradual Migration Strategy

Modernizing a live church website without disrupting users required a phased approach while maintaining existing functionality.
Solution: Implemented API endpoints in CodeIgniter 3 and created Next.js frontends for key pages first. Used Traefik proxy to seamlessly route traffic between old and new systems during transition.

Image Handling Modernization

Existing cropped images didn’t fit new design requirements, and Next.js couldn’t optimize legacy images stored in CI3.
Solution: Integrated imgproxy for dynamic resizing. Updated image handling to store focus points instead of cropped versions, allowing flexible rendering across devices.

Performance Optimization

Ensuring fast load times for community members with varying internet speeds and devices.
Solution: Leveraged Next.js static generation, implemented caching strategies, optimized images through proxy, and modernized URL structures for better SEO and user experience.

Ready to Bring Your Vision to Life?

Let's collaborate to create a high-performance web solution that drives your business growth with clean, scalable code.

View My Portfolio