DailyHabitz — Habit Tracker
Full-stack habit tracker with 4 accessible Next.js screens, 11 Express routes, CI/CD automation, and 50+ reusable frontend modules.
Architecture flow
Problem
Habit tracking fails when flows are complicated or progress feels invisible. Users need dead-simple CRUD with meaningful visual feedback on streaks and completions.
Solution
Built structured full-stack CRUD (Next.js + Express + MongoDB) with visual analytics (streaks, completion charts) and consistent, reusable UI components across all screens.
Architecture
Frontend: Next.js 15 App Router + TypeScript + Tailwind CSS
Backend: Node.js + Express.js (11 routes) + MongoDB Atlas
Infra: Render (backend) + GitHub Actions CI
Key Features
- 4 responsive, ARIA-compliant screens (landing, login, signup, dashboard)
- 11 Express routes: auth, CRUD habits, completion, refresh, logout
- 3 Next.js API proxy routes for stable request handling
- 50+ frontend modules + 20 backend modules with clear structure
- GitHub Actions CI: lint, type checks, build on every PR
Challenges & Decisions
Keeping chart performance smooth with growing data. Used date-range filters to limit rendered data points. Also stabilized API calls during Render cold starts using Next.js proxy routes.
Design Note
Emphasized progress over punishment — charts use soft gradients and clear completion states to feel motivating rather than stressful.
Impact
- Shipped four responsive, ARIA-compliant screens translating Figma directly to production.
- 11 Express routes delivering full auth + habit CRUD in a clean, structured API layer.
- 50+ frontend + 20 backend modules organized for easy onboarding and future extension.
- GitHub Actions CI catches lint, type, and build failures before they hit production.
What I'd Improve Next
Add reminders/push notifications, onboarding flow, offline-first mode (PWA), and higher test coverage with Playwright E2E.