Background
Project iClick2Know, our team worked with a UK-based magazine How It Works to design and develop a brand new app that offers interactive features.
How It Works’ expert explanations, dynamic cutaways and breathtaking images help its eager audience to understand and explore the wonders of the modern world. Making complex topics accessible for readers of all ages, How It Works stands for clarity, authority, intelligence and knowledge. [...]
How It Works
- is a UK-based magazine focusing on informative and educational content owned by Future Publishing.
- was published since 2005 and has released over 170 issues and over 1000 articles.
- is available in both physical and digital formats, with the digital version accessible on iOS and Android devices.
- covers diverse topics such as techonology, science, biology, history .etc.
iClick2Know
The enhanced and feature-rich app of How It Works magazine, transforming printed articles into a dynamic mobile application experience with the following features:
-
Keyword Search: Users can find related articles using keywords from the title, content, or category.
-
Text-to-Speech Functionality: Enables users to audibly listen to articles.
-
Multimedia Integration: Articles will be enriched with images, soundtracks, and videos for a comprehensive experience.
-
Educational Mini-Games: Engage users with games that reinforce and consolidate their learning from the articles.
-
Enhanced Reading Experience: Borrowing from the Medium platform, users will have the ability to save articles and highlight their favorite quotes for easy reference.
How did iClick2Know differ from the existing How It Works digital version?
The current app primarily presents articles as static PDFs or images, which doesn't optimize the user experience. Our ultimate aim is to design an intuitive and interactive app that enhances the user's journey, allowing them to seamlessly search, read, and interact with the content.
iClick2Know
How It Works digital version
Workflow Overview
- Transforming original articles into structured data, tailored with a unique layout and design via our proprietary CMS.
- Archiving metadata, visuals, and text content in a database, ensuring they maintain their designated layout.
- Implementing a suite of services, including authentication and elastic-search, complemented by GraphQL resolvers for efficient database queries and mutations.
- Crafting a cross-platform user interface to showcase content seamlessly on the Web, iOS, and Android.
- Streamlining the deployment process of services and the GraphQL server to a Kubernetes cluster through a CI/CD pipeline, transitioning from containerization to image creation, and finally deploying to a specified Kubernetes cluster on a chosen cloud platform.
My Role
-
App Development:
- Crafted a hybrid mobile app using React and TypeScript, leveraging the Ionic framework and Capacitor runtime. Managed platform-specific components and integrated native functionalities.
- Enhanced the search experience by integrating with ElasticSearch and refining the UI transitions of the search bar.
- Ensured a robust UI by writing unit and integration tests using Jest and Playwright.
- Developed and maintained modular React components in Storybook, emphasizing visual clarity, consistent testing, and design uniformity.
-
CMS Development & Enhancement:
- Designed an intuitive UI using Next.js and Storybook for users to seamlessly transform articles into structured data. Incorporated a preview feature to maintain design consistency.
- Engaged in regular feedback sessions with CMS users, such as designers and data-entry personnel, refining the UI and functionalities to optimize workflow efficiency.
-
API Development:
- Orchestrated the database schema design and developed GraphQL resolvers in tandem with Prisma ORM.
- Established a video upload API, processing media into the required format and extracting essential metadata and thumbnails using tools like ffmpeg and multer.
-
Deployment & Optimization:
- Enhanced containerization efficiency by optimizing the
Dockerfile, selecting streamlined base images, implementing multi-stage builds, and strategically ordering build processes for optimal caching. - Automated the deployment pipeline using DroneCI runners. This encompassed image building, registry publishing, and deploying to a Kubernetes cluster via Helm.
- Enhanced containerization efficiency by optimizing the
This multifaceted role allowed me to contribute significantly to the project's success, ensuring a seamless user experience and efficient workflows.
Reflection
Why Ionic Capacitor over React Native or Flutter?
In the realm of hybrid mobile application development, the choice of foundational framework is paramount. After evaluating various options, our team gravitated towards Ionic Capacitor for the following reasons:
- Familiarity of React and JavaScript Ecosystem
- Prior Experience with Ionic Capacitor
- Vast Array of JavaScript Libraries
- Seamless Web-Mobile Transition
- Optimized for Non-Intensive Tasks
