Overview

소개

• Pomodoro technique을 기반으로 하는 공부 & 작업 시간 측정 App입니다.

• 한 사이클의 작업 시간을 여러 개의 작업 세션들과 이어지는 짧은 휴식 그리고 마지막 긴 휴식으로 나누어 높은 집중력을 유지하는 데 도움을 줍니다. (작업 시간을 pomodoro 또는 pomo라고 부릅니다).

  • One cycle == (pomo + short break) * number of pomos + long break

• 작업 시간에 대한 통계를 제공하여 사용자의 생산성을 파악하는데 도움을 주고 다양한 Feedback기능을 통해 동기부여가 될 수 있도록 도와줍니다.

만들게 된 계기

• 원래 사용하던 앱이 있었는데, 일시 정지를 한 번 했을 때 얼마 동안 했는지 기록이 안 되었습니다.
• 그것을 계기로 제가 원하는 기능들을 추가하면서 배워보자는 생각으로 만들기 시작했습니다.

기술 스택

프론트엔드

HTML, CSS, JavaScript and WEB APIs

• CSS
  • Positioning, Coordinate systems
    • 적용한 기능 (Timeline)
    • 구현 관련 어려웠던 점
• WEB APIs
  • matchMedia, MediaQueryList
    • 기능 및 관련 영상
    • 사용하게 된 계기 및 방식

TypeScript

• Generic Types, Conditional Types
  • description
• Index Signatures
  • description

SPA(Single Page Application) Related

• React
  • useMemo, useCallback, useContext, etc.
• React Router DOM
  • Nested Routing

HTTP Requests & Authentication

• Axios
  • axios instance, interceptors
    • example
• Firebase Authentication

Styling

• Styled Components, React Inline Style

Etc

• Recharts
  • example
• idb
  • for a promise-based interface for interacting with Indexed DB
• date-fns
• JavaScript Design Patterns
  • Pub/Sub (Publisher-Subscriber Pattern)
    • example

백엔드

• NestJS, Express
• Firebase Admin
• MongoDB Atlas, Mongoose, @nest/mongoose

호스팅

• Vercel - React app
• Render.com - API server

기능 요약

• 포모도로와 휴식으로 구성된 한 사이클에 대한 설정 및 각 세션의 측정
• 타임라인을 통해 시각적 피드백 제공
• 일시 정지 및 정지한 시간 측정
  • 한 세션에서 한 일시 정지들을 타임라인에 그려서 피드백 제공
• 자동 시작
• Statistics 페이지에서 일간 및 주간 통계 제공
• 한 사이클을 얼마나 잘 이행했는지에 대한 feedback 제공
• 세션을 구분하기 위한 카테고리 생성
• 한 세션에서 여러 카테고리의 작업 가능
• 카테고리별 통계
• 세션 진행 도중 /timer, /statistics, 그리고 /settings 페이지 간 자유롭게 이동 가능
• 목표설정 및 달성에 관한 통계
• 인터넷 연결이 불안정한 경우에도 주요 기능을 사용할 수 있도록 하기
• Todoist Integration Option 제공

아키텍처 (Architecture)

이 프로젝트의 전체 시스템 아키텍처는 C4 모델을 사용하여 표현했습니다. C4 모델은 소프트웨어 시스템을 위성 사진을 보듯 가장 넓은 관점(C1)에서 시작하여, 점차 코드가 있는 상세 레벨(C4)까지 확대하며 설명하는 방식입니다.

System Context Diagram (C1)

이 다이어그램은 우리 '뽀모도로 앱'이 외부 세계와 어떻게 상호작용하는지 보여주는 가장 높은 수준의 지도입니다.

Container Diagram (C2)

위 시스템을 확대한 다이어그램입니다. '뽀모도로 앱'이 어떤 기술적인 컨테이너들(웹 애플리케이션, API 서버, 데이터베이스 등)로 구성되어 있는지 보여줍니다.

Page Screenshots

• 아래는 각 페이지의 간단한 스크린샷입니다. 구체적인 기능 설명은 'Features' 사이드바 항목에서 다루겠습니다.

/timer

세션 진행 도중에 카테고리 바꾼 경우.

타임라인

/statistics

Total Graph and Category graph

두번째 그래프에 Uncategorized만 그려짐.

두번째 그래프에 Documentation 와 Development.

두번째 그래프에 Uncategorized 와 Job Search and Application.

Two graphs show different week data

첫번째 - 11.4 ~ 11.10, 두번째 - 10.28 ~ 11.3.

첫번째 - 10.28 ~ 11.3, 두번째 - 11.4 ~ 11.10.

Mouse hover over each graph

Weekly Trend

Goals

Daily goals

Weekly goals

/settings