# gokuldevp/habit-tracker-client architecture

> Architecture diagram of the GitHub repository gokuldevp/habit-tracker-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gokuldevp/habit-tracker-client
- Repository: https://github.com/gokuldevp/habit-tracker-client

## Overview

Habit Tracker is a React app for adding habits and reviewing or updating them by day and week. The main flow routes users to an add form or a view, then uses Redux state to represent habits and their statuses. The README documents daily and weekly views, habit creation, and status updates; sampled code confirms routing, creation, weekly status calculation, and store setup. DayView, WeekView, and NavBar internals were not sampled, so their specific data interactions are left unspecified.

Main entry points: [`src/components/App.js`](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/App.js) (App routes), [`src/redux/store/store.js`](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/store/store.js) (Redux store), [`src/index.js`](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/index.js) (React entry), [`src/pages/AddHabits.js`](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/AddHabits.js) (Add habits)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Application UI"]
  node_entry["React entry<br/>[index.js]"]
  node_app["App routes<br/>[App.js]"]
  node_navbar["Navigation bar<br/>[NavBar.js]"]
end

subgraph group_habit["Habit workflows"]
  node_addpage["Add habits<br/>[AddHabits.js]"]
  node_weekpage["Week view<br/>[WeekView.js]"]
  node_daypage["Daily view<br/>[DayView.js]"]
  node_weekbox["Day summary<br/>[WeekBox.js]"]
  node_dailybox["Habit display<br/>[DailyBox.js]"]
end

subgraph group_state["Redux state"]
  node_habitactions["Habit actions<br/>[habits.js]"]
  node_navactions["Navigation actions<br/>[navActions.js]"]
  node_store["Redux store<br/>[store.js]"]
  node_reducers["Root reducers<br/>[index.js]"]
  node_habitreducer["Habit reducer<br/>[habitsReducer.js]"]
  node_navreducer["Navigation reducer<br/>[navReducer.js]"]
end

node_user(("User"))

node_user -->|"opens app"| node_entry
node_entry -->|"provides state"| node_store
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_addpage
node_app -->|"routes to"| node_weekpage
node_app -->|"routes to"| node_daypage
node_addpage -->|"creates actions"| node_habitactions
node_addpage -->|"dispatches"| node_store
node_store -->|"dispatches defaults"| node_habitactions
node_store -->|"reduces actions"| node_reducers
node_reducers -->|"combines"| node_habitreducer
node_reducers -->|"combines"| node_navreducer
node_weekbox -->|"reads habits"| node_store
node_weekpage -.->|"renders days"| node_weekbox

click node_entry "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/index.js"
click node_app "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/App.js"
click node_navbar "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/NavBar.js"
click node_addpage "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/AddHabits.js"
click node_weekpage "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/WeekView.js"
click node_daypage "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/DayView.js"
click node_weekbox "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/WeekBox.js"
click node_dailybox "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/DailyBox.js"
click node_habitactions "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/actions/habits.js"
click node_navactions "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/actions/navActions.js"
click node_store "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/store/store.js"
click node_reducers "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/Reducer/index.js"
click node_habitreducer "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/Reducer/habitsReducer.js"
click node_navreducer "https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/Reducer/navReducer.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_navbar,node_user toneBlue
class node_addpage,node_weekpage,node_daypage,node_weekbox,node_dailybox toneAmber
class node_habitactions,node_navactions,node_store,node_reducers,node_habitreducer,node_navreducer toneMint
```

## Components

### Application UI

- [React entry](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/index.js): `src/index.js`
- [App routes](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/App.js): `src/components/App.js`
- [Navigation bar](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/NavBar.js): `src/components/NavBar.js`

### Habit workflows

- [Add habits](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/AddHabits.js): `src/pages/AddHabits.js`
- [Week view](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/WeekView.js): `src/pages/WeekView.js`
- [Daily view](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/pages/DayView.js): `src/pages/DayView.js`
- [Day summary](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/WeekBox.js): `src/components/WeekBox.js`
- [Habit display](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/components/DailyBox.js): `src/components/DailyBox.js`

### Redux state

- [Habit actions](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/actions/habits.js): `src/redux/actions/habits.js`
- [Navigation actions](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/actions/navActions.js): `src/redux/actions/navActions.js`
- [Redux store](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/store/store.js): `src/redux/store/store.js`
- [Root reducers](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/Reducer/index.js): `src/redux/Reducer/index.js`
- [Habit reducer](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/Reducer/habitsReducer.js): `src/redux/Reducer/habitsReducer.js`
- [Navigation reducer](https://github.com/gokuldevp/habit-tracker-client/blob/main/src/redux/Reducer/navReducer.js): `src/redux/Reducer/navReducer.js`

### Other components

- **User**

## Connections

- User → React entry: opens app
- React entry → Redux store: provides state
- React entry → App routes: renders
- App routes → Navigation bar: renders
- App routes → Add habits: routes to
- App routes → Week view: routes to
- App routes → Daily view: routes to
- Add habits → Habit actions: creates actions
- Add habits → Redux store: dispatches
- Redux store → Habit actions: dispatches defaults
- Redux store → Root reducers: reduces actions
- Root reducers → Habit reducer: combines
- Root reducers → Navigation reducer: combines
- Day summary → Redux store: reads habits
- Week view → Day summary: renders days