Word of the Day Mobile App Project in React Native
Table of Contents
- Project Overview
- Design and Planning
- Core Features and Functionality
- Technical Components
- About Section and Acknowledgements
PRoject OVerview
What is the Project?
The Word of the Day app is a mobile application built to promote Indigenous language preservation by delivering a daily Blackfoot word, complete with its pronunciation, translation. This app acts as an interactive language tool, enabling users to learn and connect with Blackfoot words and phrases regularly.
The app offers users a new word every day, which they can view and listen to, along with monthly phrases that provide additional context and imagery. Users receive a daily notification reminding them to check out the latest word, and they can revisit past words through a calendar feature.
Why was it Created?
The app was developed as a part of the urgent need to preserve Indigenous languages, many of which are at risk of disappearing. Language is a powerful cultural asset, and this project supports efforts to keep the Blackfoot language alive for future generations. By providing a consistent daily learning tool, the app makes it easy for users to incorporate language learning into their routines and helps strengthen the cultural connection.
Who is the App For?
The primary audience includes members of the Blackfoot community. The app is intended for all ages, from young children to adults, providing an accessible entry point for language learning. Additionally, it’s designed to be user-friendly, so even those with limited experience using mobile apps can easily navigate and use it.
What Went Into Building It?
This project took approximately eight to nine weeks of development as part of my internship with Native Teaching Aids. The development process involved:
- Design and Prototyping: Using Balsamiq for initial mockups to structure the app layout and user flow.
- Technology Stack: Built using React Native for cross-platform compatibility, with Firebase as a NoSQL database and backend for managing dynamic daily content.
- Core Features: Developing functionalities such as daily notifications, audio playback for pronunciation, offline content storage, and a calendar modal for browsing past words.
- Cultural Collaboration: Working closely with Native Teaching Aids who worked closely with Blackfoot community to ensure the app aligns with cultural values and accurately represents language elements.
This project allowed me to apply technical skills in mobile development while contributing to a meaningful cause, making it a unique and rewarding experience.
Design and planning
1. Initial Design Process with Balsamiq
I began by creating wireframes in Balsamiq to visualize the app’s layout and key functionalities. These mockups allowed me to plan the structure and user flow before diving into development.
The initial mockups focused on the Home Screen and Calendar Modal, as these were the most central elements. The Home Screen mockup emphasized the daily word display, translation, phonetic guide, and audio playback button. I included a calendar button in the design to allow users to browse past words.
The Calendar Modal mockup illustrated the process of selecting a specific date to view previous words, making the app more interactive and allowig users to revisit words over time.
2. Visual Design Choices
- The visual design of the app was inspired by Indigenous art, using earthy colors and simple, cultural elements to evoke a connection to nature and traditional aesthetics. I wanted the app to feel warm, inviting, and grounded, reflecting the cultural context of the Blackfoot language.
I chose a color palette with shades of brown, beige, and red to give the app a natural, earthy feel that aligns with Indigenous themes and is easy on the eyes for long-term use.
3. User Experience Considerations
I ensured that core interactions—viewing the daily word, listening to audio pronunciation, and exploring past content—were accessible from the main screens, reducing unnecessary steps and making the app easy to navigate.
Accessibility and simplicity were key priorities to ensure the app could be used by individuals of all ages and backgrounds, even those with limited experience using mobile apps. The wireframes and final design focused on clear, intuitive navigation, with large buttons for critical actions like playing audio and opening the calendar.
4. Collaborative Planning with Native Teaching Aids
Feedback from weekly meetings influenced both the visual design and the app’s functionality, ensuring it met the community’s needs and respectfully represented Blackfoot culture.
Throughout the planning phase, I collaborated closely with the team at Native Teaching Aids who will be further developing this project for the Blackfoot community.
5. Defining the Core Features
Based on the design mock-ups and initial planning, I identified the core features that would bring the app’s vision to life:
Daily Notifications: Setting up reminders to encourage daily engagement and retention of language concepts.
Daily Word Display: To engage users with fresh content each day, encouraging consistent use.
Audio Pronunciation: Providing audio playback for each word to help users learn proper pronunciation, a critical feature for effective language learning.
Calendar for Past Words: Allowing users to revisit previous words via an interactive calendar, enriching the learning experience and enabling repetition.
6. Prototyping and Adjusting
- Once the initial designs and core features were defined, I built a prototype to test the user flow and ensure a smooth experience. This early prototype provided valuable insights into the navigation and layout, allowing me to make adjustments before full development began.
- Based on testing feedback, I made some refinements to improve readability, layout consistency, and visual appeal, resulting in a user experience that was both accessible and engaging.
Core Features and Functionality
The Word of the Day app combines multiple features to deliver a useful educational experience for users interested in learning Blackfoot words and phrases. Each feature was designed to encourage daily engagement and facilitate language retention.
1. Daily Word Display
The Home Screen showcases this content prominently, with a clean, readable layout to ensure users can focus on the language without distractions.
The core of the app is the Daily Word feature, which presents users with a new Blackfoot word each day. Each word is displayed alongside its English translation and phonetic spelling to assist users in pronunciation.
The daily word feature refreshes every day and is stored in a Firebase database, making it easy for Native Teaching Aids to update and manage the content. This dynamic setup allows for a wide range of words and phrases to be introduced over time, supporting long-term engagement.
2. Audio Pronunciation Playback
This functionality helps users improve pronunciation accuracy and builds a deeper connection to the language by hearing native speakers.
Recognizing that pronunciation is essential to language learning, the app includes an Audio Pronunciation feature. Users can tap the “Play Audio” button to hear a native speaker pronounce each word.
This feature was implemented using React Native’s Expo Audio API, allowing playback even in silent mode, so users can listen and learn at any time. The audio files are stored in Firebase and fetched dynamically, ensuring quick access without taking up significant device storage.
3. Monthly Phrase
To add variety and offer additional cultural context, the app includes a Monthly Phrase feature on the Home Screen. Each month, a new phrase or expression is displayed below the daily word, giving users an additional linguistic and cultural insight.
4. Calendar Modal for Past Words
Each date is linked to the corresponding word in the Firebase database, enabling retrieval of past content. The calendar is designed for ease of use, with a clean and simple interface that aligns with the overall aesthetic of the app.
The Calendar Modal feature allows users to explore past words by selecting a specific date. By tapping on the calendar icon, users can open a modal and select a date to view the word from that day.
5. Daily Notifications
This functionality was developed using Expo’s Notifications API, and it plays an essential role in helping users stay consistent with their language learning, ultimately improving retention.
To encourage daily engagement, the app sends a Daily Notification reminding users to check out the new word. This feature helps build a learning habit, prompting users to interact with the app each day.
Notifications are scheduled at a set time each day (e.g., noon) and include a custom message like “Check out your new word of the day!”
6. Offline Access and Data Storage
Local data storage was implemented using Expo’s FileSystem and AsyncStorage libraries, providing an efficient way to manage offline access while keeping the app lightweight.
The app was designed to accommodate users who may have limited internet connectivity. To achieve this, data fetched from Firebase is stored locally on the device, allowing users to access daily and past words offline once they’ve been initially loaded.
7. Responsive Design and Device Compatibility
This responsive design ensures that users have a visually pleasing experience regardless of device type or orientation, making the app more versatile and user-friendly.
The app’s layout is responsive and adaptable to various screen sizes and orientations, providing a consistent experience on both tablets and smartphones. This was achieved by implementing a custom useOrientation hook that adjusts the layout based on the device’s orientation.
Technical Components
The Word of the Day app relies on a range of technical components and tools to deliver a seamless and responsive experience. Below is an overview of the key technical elements that went into building the app.
1. Firebase Integration for Dynamic Content
This integration also includes Firebase Storage, where audio files are stored and linked to the app, providing quick access to pronunciation recordings.
The app uses Firebase as a NoSQL database to store the daily word, monthly phrases, translations, phonetic spellings, and audio files. Firebase’s real-time capabilities make it ideal for updating the daily word dynamically without requiring manual app updates.
The firebaseConfig.js file initializes the Firebase connection, allowing the app to fetch content for each day’s word and store it locally if needed. This setup allows Native Teaching Aids to easily manage and update content in the backend, ensuring that users receive fresh, accurate information.
2. FetchWordData Component
By storing data locally using Expo’s AsyncStorage, users can access previously viewed words offline, making the app more robust and accessible for users in areas with limited connectivity.
The FetchWordData component is a custom hook that retrieves daily word data based on the user’s selected date. This component connects to Firebase, fetches the data for a specific day, and stores it in local storage for offline access.
The component uses async/await to manage asynchronous calls, ensuring a smooth user experience while data is being fetched. Additionally, it checks whether data for a particular date already exists locally, which optimizes performance by minimizing unnecessary API calls.
3. Audio Playback with AudioPlayer Component
The playSound function initiates audio playback, while configureAudioSession sets the appropriate settings for iOS and Android. This feature is crucial for accurate language learning, as it allows users to practice pronunciation by hearing native speakers.
The AudioPlayer component enables users to hear the pronunciation of each Blackfoot word. This feature was implemented using the Expo Audio API, allowing for cross-platform compatibility and responsive audio playback.
The component handles configuration settings, such as allowing background playback and ensuring audio is audible even in silent mode. It dynamically loads audio files from Firebase Storage, ensuring minimal storage use on the user’s device.
4. NotificationService for Daily Reminders
By keeping users engaged through gentle reminders, this feature helps build a consistent language-learning habit, improving retention and making the app more effective.
To encourage daily engagement, the app includes a NotificationService component that sends a reminder notification each day at noon. This feature was implemented using Expo’s Notifications API, making it easy to schedule and manage notifications across platforms.
The scheduleDailyNotification function cancels any existing notifications before scheduling a new one, ensuring that users only receive one reminder per day. This function accepts customizable time parameters, allowing the app to adapt to user preferences if needed.
5. Calendar Modal and Custom ModalContext
The Calendar Modal links seamlessly with Firebase to fetch data based on the selected date, creating an interactive user experience that allows for flexible learning.
The Calendar Modal allows users to select specific dates to view past words. This feature was implemented using React Navigation’s modal capabilities, combined with a custom ModalContext for managing modal visibility across components.
The ModalContext.js file provides a context and custom hooks to control when the calendar modal is displayed, making it easy to manage the modal’s state throughout the app. This modular approach keeps the code clean and simplifies updates or changes to modal behavior.
6. CustomDrawerContent for Navigation
React Navigation’s DrawerItemList is used to manage the list of navigation items, while custom styling is applied through a StyleSheet to adjust padding, font size, and icon size. This ensures a user-friendly navigation experience, particularly for users who are new to mobile apps.
The CustomDrawerContent component handles the app’s navigation drawer, which provides quick access to the Home screen, About screen, and Calendar. This component was customized to match the app’s earthy design theme, ensuring a consistent look and feel.
7. useOrientation Hook for Responsive Design
The hook uses React Native’s Dimensions API to listen for orientation changes, updating the layout as needed. This adaptability ensures that the app remains visually appealing and functional across different screen sizes and orientations.
To ensure a responsive layout across devices, the app includes a useOrientation custom hook that detects the device’s orientation and adjusts the layout accordingly. This feature is particularly useful for tablets and larger screens, where landscape mode is common.
about section and Acknowledgements
The Word of the Day app was created as part of my internship with Native Teaching Aids, where I worked alongside a talented and dedicated team to develop a language-learning tool that supports Indigenous language preservation. As an Ojibwe First Nations person, contributing to this project has been a deeply meaningful experience, allowing me to build my technical skills to help preserve and promote cultural heritage.
Acknowledgments
- Thomas Koefod, Head Software Engineer at Native Teaching Aids, served as the project supervisor and provided invaluable guidance throughout the development process. His expertise and leadership were essential in shaping the app’s vision and functionality.
- Spencer Kittle, React Native Developer at Native Teaching Aids, closely assisted in the development of the app. Spencer’s technical insights, particularly in optimizing React Native components, were instrumental in bringing the app to life and ensuring a seamless user experience.
I am grateful for the opportunity to work with Native Teaching Aids and to collaborate with the Blackfoot community on this project. Their cultural insights and commitment to language preservation inspired every aspect of the app’s design and functionality.
Heartfelt Gratitude to the Blackfoot Community
A special thank you to the Blackfoot people of Montana, who have been incredibly generous in sharing their language and culture. This project was made possible through their collaboration, and it is dedicated to supporting their efforts in language revitalization. Our hope is that the app will serve as a useful tool for both current and future generations, helping to keep the Blackfoot language and culture strong.
