Skip to main content
Youngmin Ko
HomeWritingProjectsPlaygroundKnowledge GraphCV
More ⌄
AboutNowCoursesLinksPrivacy
Search ↗
Writing/Projects, hackathons & contests · Side projects

Side Project: Building Jaksim Friend (React Native)

2024-02-07·2 min read
ProjectDevelopmentReact NativeTypeScriptRecoil
Next Post →LG Aimers 5th: Product Defect Detection with Stacking and SMOTE-ENN

Loading comments...

← Writing

On this page

  • Project Overview
  • Tech Stack Decisions
  • React Native & TypeScript
  • Recoil for State Management
  • Styled-Components
  • Architecture Principles
  • API Layer Isolation
  • Custom Hooks for Reusable Logic
  • Retrospective
  • Wins
  • Regrets
© 2023-2026 Youngmin. All rights reserved.
rhdudals0505@naver.comGitHubLinkedIn
Built with Next.js.Updated 2026.11.07

In 2022 our five-person team started a side project called Jaksim Friend, a social accountability app for people who wanted to keep their resolutions. Although we never released it to the public, the build gave me my first end-to-end experience shipping a mobile product with React Native, TypeScript, and Recoil.

Project Overview

The concept was simple: users created goals, shared progress with friends, and encouraged each other to stay motivated. I served as the frontend lead covering planning, UI, development, and release preparation for both iOS and Android.

Jaksim Friend Branding

Early brand palette and type for Jaksim Friend.

Core features

  • Goal creation and management
  • Photo proof feed for accountability
  • Group rooms for friends
  • Feedback and cheer components

Goal

  • Launch simultaneously on the App Store and Google Play
Project Overview

Overview slide: stack and main flows.

Tech Stack Decisions

React Native & TypeScript

We wanted one codebase for both platforms, so React Native was an obvious choice. Pairing it with TypeScript caught data-shape issues early and made the developer experience much easier, especially with API payloads or nested props.

Recoil for State Management

Redux felt like overkill for this scope. Recoil let us manage state via atoms/selectors with minimal boilerplate and integrate cleanly with hooks, so components stayed focused on rendering rather than wiring reducers.

Styled-Components

Styled-Components kept styles colocated with components, prevented class-name collisions, and let us drive dynamic styling via props without jumping between files.

Architecture Principles

API Layer Isolation

All Axios calls lived inside src/apis. UI components simply requested data from that layer, so backend contract changes only touched one directory.

Home UI

Marketing site: search and habit feed block.

Custom Hooks for Reusable Logic

Shared flows such as authentication were extracted into hooks like useAuth. Each hook handled AsyncStorage tokens, Recoil updates, and API calls so product components remained declarative.

Retrospective

Wins

  • End-to-end mobile experience: From planning to store submission readiness, I learned how each step impacts the next.
  • Clean-code discipline: Separating API layers and extracting hooks made the codebase far easier to extend as requirements grew.

Regrets

  • No distribution: Without consistent team bandwidth the service never officially launched.
  • Missing tests: In the rush to ship, we skipped automated tests. If the app had grown, that omission would have slowed us down.