Rawitphoom Kiatthitinan

Figma Prototype: https://www.figma.com/proto/makUwxfvjAsze1WoqNsmjz/IAT359
Video Link: https://www.youtube.com/watch?v=jkE5LUxzD9c

Introduction

Consistency is a mobile app designed to help people build and maintain healthy habits through structured tracking and motivation tools. By combining traditional habit logging with geolocation features, the app allows users to log activities based on their physical location, creating a visual journey of their progress. The goal was to encourage self-discipline and long-term commitment by merging visual progress, rewards, and spatial interaction into a cohesive experience.

Prototype Preview

Sketches

Initial concepts focused on how to integrate map-based logging with standard habit tracking cards.

Design & Development Process

Built using React Native and Expo, the project required a robust technical architecture including Firebase for authentication and Async Storage for local data persistence. A key focus was the "Map Log" feature, which uses react-native-maps to let users attach photos and locations to their habits. We also implemented a gamification system where users unlock achievement cards based on their streaks, adding a layer of visual motivation.

Challenges

One of the main technical challenges was managing the Complex Navigation Structure. We needed a mix of tab-based navigation for main screens and stack-based navigation for flows like "Create Habit." This required restructuring the navigation tree to allow specific screens to overlay the bottom tab bar.

Another hurdle was Conditional Rendering on the Stats screen, which needed to display data in three drastically different formats (Weekly list, Monthly grid, Yearly heatmap). We solved this by creating modular sub-components and using state variables to conditionally render the correct layout without code duplication.

Outcome

We successfully implemented all core features, resulting in a functional and cohesive user experience. The final app includes secure authentication, a dynamic home dashboard, interactive habit tracking, and the unique map logging feature. Through this project, I significantly strengthened my skills in React Native component lifecycles, state management, and creating polished "Glassmorphism" UI styles.