Overview

Smatched is a monetization product for games where users earn points by watching ads (e.g., video ads). Game owners can then generate revenue through these ads. The product aims to provide a seamless integration for developers to monetize their games while offering users rewards for engagement.

This company didn’t reach a public launch, but it was the first time I felt I truly owned my contributions as a developer. The project allowed me to have hands on React framework in many levels, by applying react-router, react-text-truncateand react-helmet.

Later I decided to have this piece of work as a starter for my own projects, which I named initialy as BlogMe Articles and remake the same code adding Typescript for polishment and for the assurance of connection between each functionality piece.

Approach & Technical Decisions

Since the developers team was composed by interns, the manager initially opted for a static-site approach with the unanime choice of language framework to be React(a modern Javascript library). The decision of the language was lovely, but it sound confusing for some coaleagues and me knowing that React main creation reason was with the purpose of reusability of Components. The explanation was the priority of having a page to present for potential clients and investors. After that, he assigned each intern to one specific page with the goal to move the project faster.

Since the Blog page was assigned for me, I saw very earlier the huge potential of a full-functionaly feature. After talked to the manager, and we decided priorities together, I was fueld motivated to make my page work with React components in the same time he was expecting a static page. This decision would not only ensure the full functionallity to be ready for show, but would ensure a scalable and reusable design system for the pages, making it easier for the publication of the next articles to come.

Page Functionality & Architecture

All Articles Page

The blog homepage was designed to display all articles in a card layout. I created a BlogCard component that accepted props for the image, title, snippet, and metadata. Each card was reusable and allowed the page to dynamically render content from the article data array using .map().

To improve usability, especially as the number of articles grew, I implemented Pagination Component. This involved slicing the array of articles based on the current page and the number of items per page, then updating the state when the user navigated between pages. This was a practical introduction to stateful UI logic and performance-aware rendering.

Individual Article Page

Routing users to individual articles posed a new challenge. Instead of hardcoding routes for each blog post, I chose to use a query parameter-based routing system. For example, navigating to "/article?name=exploringofferwall" would dynamically load the blog post that matched the name parameter.

Inside the Article component, I used React Router’s useLocation() hook to read the query string and parsed it with URLSearchParams. This allowed me to extract the article name and match it to the correct article object in the content data structure.

Rendering the content required a flexible system, since each article could contain a unique mix of content types. I solved this by, inside of the Article component, add a Switch block’s type that will rendered the appropriate layout—whether it was a text paragraph, a list, an image, or a quote. This helped me learn how to build scalable UI systems that adapt to data rather than rely on rigid layout code.