PushWiki is a React Native mobile application for Android designed to deliver Wikipedia's daily featured article directly to users via scheduled local push notifications. It features a bold, Medium-inspired editorial reading interface created by Google Stitch.
- Core Framework & Runtime: React Native (v0.85), Expo (SDK 56), Expo Router (file-based navigation), TypeScript
- Local Storage & Persistence:
react-native-mmkvfor synchronous local storage - Notifications & Scheduling:
expo-notificationsfor recurring daily local alarm triggers - External API: Wikimedia Featured Article API
- Scheduled Daily Local Push Notifications: Users choose a custom daily delivery time. The app schedules recurring daily local notifications without relying on external push services or servers.
- Editorial Medium-Inspired Article Reader: Clean layout pairing serif titles (Playfair Display) with sans-serif extracts (Inter), high-resolution hero imagery with BlurHash loading state, and hyperlinking to the full Wikipedia entry.
- Synchronous Local Caching: Powered by MMKV, articles and fetch metadata are saved locally on initial load. Subsequent app launches instantly retrieve cached content.
- Dynamic Theme System: Switch between Light, Dark, and System Default themes using an animated custom segmented control component.
I wanted an opportunity to learn how React Native and the Expo framework work. So I came up with this idea to learn the basics of navigation, caching, and context. I used Claude to assist me in generating simple snippets of code along with explanations of each snippet whenever I got stuck. At the same time I also utilized official Expo documentation and articles from medium.com, dev.to, and YouTube to learn how to create the segmented-control, react context for themes, react mmkv for storage, handling inputs from the time picker dialog, and configuring local push notifications.
-
The nature of push notifications and handling how they work across different app states: foreground, background, and quit states. I relied on Expo documentation for code snippets and modified it accordingly to meet my needs.
-
Learning to pass down the theme props to all components but wrapping the root layout with the ThemeContextProvider. Initially I relied on YouTube tutorials and LLMs but faced lots of doubts and confusions regarding its implementation. I ended up using a public gist and then modified it to suit my needs. I also learnt about hooks through this process.
-
Using the template provided by Expo and reusing as much code as possible to speed up the development of the application.
-
Learning that Google requires all applications to have adaptive icons so that the app icon can be modified by different devices, such as having rounded corners or changing the color of the icon to match any custom user themes.
-
Using Google Stitch to generate the two screens for this application. Then I exported those screens to a figma file and made some minor corrections before settling on that design.
-
Learnt how to use stack screen navigation and understanding the difference between router.push() and router.back() in terms of pushing and popping off the stack.
-
Learnt how to handle the methods provided by the Date() object. Since the time picker returned a Date() object, I created a utility function to extract the hours and minutes and also implemented logic to set AM or PM depending on the time set.
-
Multi-Language Wikipedia Support: Introduce a language selection setting to query Wikimedia endpoints for different Wikipedia languages (
es,fr,de,ja, etc.). -
Android Home Screen Widget: Develop a native Glance/Android widget displaying the current day's featured article thumbnail and title.
- Node.js (v18+)
- Android Studio / Android Emulator or a physical Android device with Expo Go / Development Build
- Java version 17 is required
- Instally dependencies and npx expo run:android to run on simulator or physical device
