Habit Tracker Dev Log – Stages 2-4: Monorepo Setup, UI Design & Frontend Build
Habit Tracker – Daily Log (Stages 2-4)
Front-End Engineer (React/Next.js/TS) with MERN & MySQL experience. Built AI ride-hailing (+30 % matches) and 50K+ user booking platforms. Passionate about scalable UX and global remote work.
(Honestly, I couldn’t wait—I jumped three stages at once 😅)
What I Did
Stage 2 – Repository Setup
Monorepo structure with separate frontend and backend folders
Configured TypeScript and ESLint for both parts
Set up environment and configuration files
Stage 3 – UI Design
Built a full Design System (colors, typography, spacing)
Planned component architecture & state management
Created a responsive layout with Header and Sidebar
Stage 4 – Frontend Implementation
Base components: Button, Input, Card, Modal
Four main pages: Home, Habits List, Add Habit, Tracking
Dark/Light theme support using
next-themesRTL support for Persian language
Navigation with a mobile drawer
Challenges
CSS variables setup for theme switching
Mobile navigation drawer state management
RTL layout adjustments for Persian text direction
Solutions
Combined CSS variables with
next-themesMobile-first responsive design
Proper event handling for the drawer
Tech Tip
Used Route Groups in Next.js App Router for cleaner dashboard organization.
Next Up
Stage 5: Database Connection
🔗 Follow the daily progress: coding-daily-log
🔗 Project repository (with detailed docs): Habit-Tracker
I’d love your feedback! Check out the docs folder to see all the daily challenges, solutions, and decisions—I hope it helps you tackle similar bugs and design choices.