Habit Tracker – Daily Log (Stages 2-4)
(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-themes - RTL 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-themes - Mobile-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.
Top comments (0)