Custom Landing Pages, Advertorial Pages ,and Digital Marketing Assets

Project Overview

Hetq Media Factory provides free media education, with a particular focus on investigative journalism. The core objectives of the Media Factory website encompass engaging new students, showcasing the works of students and graduates, attracting sponsors and donations, and setting the stage for future monetization by demonstrating the services and portfolio of Media Factory.

Project Objectives

The objective was to undertake a comprehensive rewrite and redesign of the Hetq Media Factory website, with the following key goals:

• Achieve enhanced UX/UI, with special emphasis on optimizing article components such as image and text components, slider image components, media file support, and embedded file support.
• Implement a well-designed URL structure for improved navigation and user experience.
• Integrate a robust content management system to facilitate seamless updates to dynamic content on the website.
• Introduce a payment system to support donations through the website and enhance the platform's financial sustainability.

Industry

Educational institutions, media organizations, and entities involved in investigative journalism.

Problem Statement

The incorporation of interactive components into their products presented a primary challenge, requiring a robust CMS for frequent updates to dynamic content. Simultaneously, the website aimed for improved SEO visibility. This dual challenge prompted the comprehensive rewrite and redesign project to address the complexities of managing dynamic content updates while optimizing the website for search engine visibility.

Planning

Design Stage

• Planning for the redesign process.
• Defining the project scope and setting up key objectives.
• Identifying UI components for user-centric design.

 Project Setup

• Establishing the project framework, including tools, technologies, and platforms.
• Configuring necessary backend services to support the website's functionalities.
• Defining roles, responsibilities, and workflows within the team.

UI Components

• Creating user interface elements for a visually appealing and functional design by establishing continuous collaboration between UI designers and developers.
• Focusing on article components such as sliders, embedded media, sticky text/images, graphs, etc.
• Testing to ensure an optimal user experience.

Pages+Backend Services

• Developing website pages in alignment with UX/UI goals.
• Integrating backend services to support the dynamic content management system (CMS).

Execution

Team

Software Engineer

• A team of five dedicated software engineers, each contributing expertise in different aspects of the project.
• Responsibilities included frontend and backend development, ensuring integration of Next.js, Tailwind-CSS, and Strapi.

Software Engineer in Test

• The software engineer in the test was responsible for thorough testing, ensuring the functionality, performance, and security of the developed features.

Project Manager 

• A project manager handled the entire development lifecycle, coordinating tasks, managing timelines, and facilitating effective communication within the team.

Technology Used

Dev Stack

NextJS

• Integration with React Ecosystem and Community: Leveraged the extensive React ecosystem for efficient development and community support.
• Server-Side Rendering (SSR) and Static Site Generation (SSG): Utilized Next.js capabilities for SSR and SSG to enhance performance and user experience.
• API Routes: Next.js simplified the creation of API routes, streamlining backend interactions.

Tailwind-CSS Framework

• Ease of Use: Implemented Tailwind for its simplicity, making styling and layout creation more straightforward than writing raw CSS.
• Browser Compatibility Handling: Automated handling of browser-specific implementations for consistent rendering.
• Tree Shaking: Implemented automatic removal of unused CSS to optimize the project.
• Project Maintainability: Tailwind's utility-first approach facilitated easy project entry and maintenance.

Strapi

• Headless CMS with Free Tier: Leveraged Strapi's self-hosted headless CMS offering a free tier, aligning with project requirements (creating and editing content without dependencies)
• Customization with Plugins and Extensions: Strapi's functionality includes custom plugins and marketplace extensions to meet specific needs, including preview options and internationalization.
• REST API and GraphQL Support: Utilized both the REST API and GraphQL for handling complex relationships within the website.

Deployment

• Jenkins: An open-source automation server supporting building, deploying, and automating projects.
• PM2: A process manager for Node.js apps used to run the project inside a Digital Ocean droplet.
• Nginx: Functioning as a reverse proxy and web server, enhancing security and efficiently handling client requests.

Challenges and Solutions

Localization

• Requirement: With a diverse audience, the website needed robust multi-language support.
• Solution: Within the project framework, the team utilized Next.js built-in internationalization for the website and Strapi's "internalization plugin for Strapi" to address this challenge. Customization was applied to ensure unique slugs for articles across different locales.
• Challenge: The team faced a challenge with the Strapi CMS internalization plugin, as it stored slug values for articles across different locales in a single database table. This hindered the ability to declare the slug field as unique within the Strapi model. To address this, the team implemented a custom solution using Strapi's lifecycle hook. This workaround checked the uniqueness of slug values for each locale before saving entries, ensuring a reliable multilingual support system.

Donation Integration

• Requirement: Increase the number of donors and collect money through our website. Introducing a donation option required seamless integration with a client partner's bank API for transaction information storage.
• Solution: API integration from the client partner's bank facilitated secure and efficient donation processing, with Strapi managing transaction information.
• Challenge: During the integration phase, the team faced the challenge of securely storing donor data. Two options were considered: creating a separate database or utilizing Strapi's underlying DB to store data. Opting for a separate database would entail additional time and resource allocation, which was deemed impractical at that juncture. Consequently, the decision was made to leverage Strapi's existing database and treat it as an “Object-Relational Mapper” (ORM). The donation model in Strapi was configured for auto-publishing, facilitating the seamless update of transaction status upon user redirection from the payment page. User data visibility was restricted to super-admins, ensuring a secure environment.

Preview of Dynamic Content

• Requirement: The need for frequent content updates and the ability to manage and preview dynamic content before publishing through the CMS were critical requirements.
• Solution: Strapi, a self-hosted headless CMS, was chosen to empower content writers and clients to effortlessly create and edit content without requiring development efforts. This decision facilitated efficient content management and updates.
• Challenge: The team encountered a challenge with the preview plugin, which lacked multi-language support, preventing the preview of individual English projects. To address this issue, the team extended the functionality of the plugin and modified the preview URL to accommodate different locales, ensuring effective content preview across languages.