Next.js
React framework using the App Router for pages, layouts and server-side capabilities.
ENGINEERING
Technology Stack
Discover the technologies, frameworks and development tools used to build HabitFlow. The stack combines a modern React frontend, type-safe backend development and relational data storage.
Stack Overview
Frontend
Next.js + React
Language
TypeScript
Database
PostgreSQL
ORM
Prisma
Authentication
NextAuth.js
Package Manager
pnpm
Technologies Used
Explore the technologies grouped by their role in HabitFlow.
Frontend Development
Building the user interface and interactive experiences.
React
Component-based library for building interactive user interfaces.
TypeScript
Static typing that improves code reliability and maintainability.
Tailwind CSS
Utility-first CSS framework for responsive application styling.
shadcn/ui
Reusable interface components built on accessible UI primitives.
Lucide React
Icon library used throughout the application interface.
Backend and Database
Managing application logic and persistent data.
PostgreSQL
Relational database used to store users, habits, categories and progress records.
Prisma ORM 7
Type-safe ORM for database models, queries and relationships.
Next.js API Routes
Application endpoints for handling client requests and server-side operations.
node-postgres (pg)
PostgreSQL driver used by the application database adapter.
Authentication and Validation
Handling user identity and application data validation.
NextAuth.js
Authentication and session management for the application.
Prisma Adapter
Connects NextAuth authentication records to the Prisma database.
bcrypt
Password hashing library for credential security.
Zod
Schema validation library for validating structured data.
UI and Data Visualization
Improving interaction, analytics and data presentation.
Recharts
Charting library for visualizing habit progress and analytics.
Framer Motion
Animation library for interactive interface transitions.
React Hook Form
Form state management and form handling.
TanStack Table
Headless table utilities for structured data interfaces.
dnd-kit
Drag-and-drop toolkit for interactive sortable interfaces.
Development Tools
Supporting development, styling and code quality.
pnpm
Package manager used to install and manage project dependencies.
ESLint
Static code analysis and linting.
PostCSS
CSS processing used with the Tailwind CSS setup.
TypeScript Compiler
Type checking and compilation support.
Engineering Approach
HabitFlow uses TypeScript across its application, Prisma for structured database access, reusable React components for the interface and PostgreSQL for persistent relational data. These technologies help keep the codebase organized, maintainable and extensible.