Diary Study App
Period: 2020
Expertise: dev, React Native
Team: personal project
Building a React Native App that Makes Diary Study More Efficient
Motivation
The goal of this project was to learn the logic and programming behind app development. While conducting a diary study for a project of mine, Talkie, I realized that there’s not too many tools specifically made for diary study. Tools like Google Sheets would work but they’re inconvenient. Therefore I wanted to build an app that makes diary study more efficient and effortless.
Outcome
I first conducted a quick round of research and made a rough product roadmap for this app. I then designed and developed a MVP version for the participant side, which allows participants to add and edit entries (basic CRUD operation) with date, text, photos, and videos. The MVP also has an advanced feature that participants can CRUD in a calendar view.
Design
Research
Summary
Design Research
Key Features
A Quick Research on What to Build
I conducted a brief competitive analysis, investigating competitors like Indeemo and FocusVision, and I ran some guerilla interviews with UX researchers.
Key Features
Based on the research results, the app should have two parts – participants side and researcher side. The participants side is for participants to accept a project from a researcher. The researcher side is a dashboard where researchers can create a (diary study) project and invite participants to join. In addition, the logged data from participants should also be shown in the dashboard so researchers can analyze them easily.
Participants side
Researcher side
MVP's
User Flow
Focusing on the Participants Side in the MVP
As a MVP, I decided to focus on developing the features on the participants side, which can best demonstrate how this app should work. More specifically, I focused on the “diary entry” and “calendar view” parts mentioned above. Below is the user flow of these features I created for development reference.
Development
Expo React Native
The development of this app used Expo React Native instead of Vanilla React Native simply because Expo provides robust packages that saves lots of time of setting up a project.
Firebase (Firestore) and Database Structure
Since the goal of this project focused more on the FE, I used Firebase (Firestore) as the BaaS. The database structure is based on users (collection), and each of them is represented as an unique key (document). Under a user document, there will be some basic account info (fields), and entries (collection). Within the entries collection, a single entry will be stored as a document with a unique key. In that document, there will be basic info such as date, timestamp, etc. (fields), and also a list of media (array), which store the information of photos and videos.
Basic CRUD and Navigation
The app consists of the two main pages: home (list of entries), and entry detail page (for both adding and editing). Users can click the add button or click on an existing entry, they will then enter the entry detail page, where they can add and/or edit text, date, and media, or delete the entire entry. At the home page, it can be switched to calendar view, where users can add an entry directly from selecting a time slot (30 min).
Using Built-In Modules and Components
For development efficiency, most components of this app utilized the existing (Expo) React Native modules. For example, the date and time picker and the camera component.
Custom Components – Flat-List Hell!
Although most components can reuse the official components or those built by the community, I have to hardcode some components. For example, the list of adding media, I had to make the “add icon” to be the first item in the list so it can align with other media. Another example is the calendar view. I wanted the time slots in each day to have its own timestamp, and show the entries on top of the calendar with the correct position. I ended up making each day a flat list, and an entry is appended at the end of the list, whose position is set to absolute, and I calculate what the position should be based on the time. It’s definitely a flat-list hell!
Full Demo
