Habit tracker · Daily journal · Streak tracking · Interactive dashboard · Dracula & custom themes
🔗 Live demo: daymark-ochre.vercel.app
Track your daily habits, write personal notes, and visualize your progress over time. Built with Next.js 16, React 19, Prisma 7, and PostgreSQL.
Interactive infinite timeline on login
Interactive calendar cascade on register
Dashboard overview, habits tracking, and dark theme support
- Habit tracking — Create habits and log them daily with a single click
- Streak calculation — Automatic streak tracking to keep you motivated
- Daily notes — Write a personal note for each day
- Dashboard calendar — Monthly view with habit completion status
- Overview & charts — Activity graph, completion rates, and trends (via Recharts)
- Custom themes — 4 presets (Minimal, Gris Industrial, Negro Puro, Dracula) + custom hex colors with auto-contrast
- i18n — English and Spanish (ES/EN) with context-based switching
- Authentication — JWT-based auth with httpOnly cookies (bcrypt + jsonwebtoken)
- Node.js >= 20
- PostgreSQL running locally on port 5432 (or configure via
DATABASE_URL)
# 1. Install dependencies
npm install
# 2. Configure environment
cp .env.example .env # or edit .env directly
# 3. Generate Prisma client
npx prisma generate
# 4. Run migrations
npx prisma migrate dev
# 5. Start the dev server
npm run devOpen http://localhost:3000 to see the app.
| Variable | Description | Default |
|---|---|---|
DATABASE_URL |
PostgreSQL connection string | postgresql://postgres:postgres@localhost:5432/daymark |
JWT_SECRET |
Secret key for JWT signing | Generate with: node -e "console.log(require('crypto').randomBytes(64).toString('hex'))" |
Copy .env.example to .env and fill in your values.
src/
├── app/
│ ├── api/auth/ # Auth API routes (login, register, logout)
│ ├── dashboard/ # Protected dashboard (habits, notes, overview)
│ │ ├── habits/
│ │ ├── notes/
│ │ └── overview/
│ ├── login/
│ ├── register/
│ └── layout.tsx
├── components/ # React components
├── lib/
│ ├── actions/ # Server actions (habits, notes, auth)
│ ├── auth.ts # Auth utilities (JWT, cookies)
│ ├── prisma.ts # Prisma client singleton
│ ├── lang.tsx # i18n (ES/EN)
│ └── theme-context.tsx # Theme system
├── middleware.ts # Route protection
└── globals.css
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npx prisma studio |
Open Prisma Studio (DB GUI) |
npx prisma migrate dev |
Run pending migrations |
DayMark is under active development. See the milestones and issues on GitHub for the full roadmap.
MIT
Seguimiento de hábitos · Diario personal · Racha de días · Dashboard interactivo · Dracula y temas personalizados
🔗 Demo en vivo: daymark-ochre.vercel.app
Realiza un seguimiento de tus hábitos diarios, escribe notas personales y visualiza tu progreso a lo largo del tiempo. Construido con Next.js 16, React 19, Prisma 7 y PostgreSQL.
Línea de tiempo infinita e interactiva al iniciar sesión
Cascada de calendario interactiva en el registro
Panel de control, seguimiento de hábitos y soporte para temas oscuros
- Seguimiento de hábitos — Crea hábitos y regístralos diariamente con un solo clic.
- Cálculo de rachas — Seguimiento automático de rachas para mantener la motivación.
- Notas diarias — Escribe una nota personal para cada día.
- Calendario del dashboard — Vista mensual con el estado de finalización de hábitos.
- Gráficos y vista general — Gráfico de actividad, tasas de finalización y tendencias (a través de Recharts).
- Temas personalizados — 4 preajustes (Minimal, Gris Industrial, Negro Puro, Dracula) + colores hexadecimales personalizados con contraste automático.
- i18n — Inglés y Español (ES/EN) con cambio basado en el contexto.
- Autenticación — Autenticación basada en JWT con cookies httpOnly (bcrypt + jsonwebtoken).
- Node.js >= 20
- PostgreSQL ejecutándose localmente en el puerto 5432 (o configúralo mediante
DATABASE_URL)
# 1. Instalar dependencias
npm install
# 2. Configurar el entorno
cp .env.example .env # o edita .env directamente
# 3. Generar el cliente de Prisma
npx prisma generate
# 4. Ejecutar migraciones
npx prisma migrate dev
# 5. Iniciar el servidor de desarrollo
npm run devAbre http://localhost:3000 para ver la aplicación.
| Variable | Descripción | Por defecto |
|---|---|---|
DATABASE_URL |
Cadena de conexión de PostgreSQL | postgresql://postgres:postgres@localhost:5432/daymark |
JWT_SECRET |
Clave secreta para la firma de JWT | Generar con: node -e "console.log(require('crypto').randomBytes(64).toString('hex'))" |
Copia .env.example a .env y completa tus valores.
src/
├── app/
│ ├── api/auth/ # Rutas de API de autenticación (login, registro, logout)
│ ├── dashboard/ # Dashboard protegido (hábitos, notas, vista general)
│ │ ├── habits/
│ │ ├── notes/
│ │ └── overview/
│ ├── login/
│ ├── register/
│ └── layout.tsx
├── components/ # Componentes de React
├── lib/
│ ├── actions/ # Acciones de servidor (hábitos, notas, autenticación)
│ ├── auth.ts # Utilidades de autenticación (JWT, cookies)
│ ├── prisma.ts # Singleton del cliente de Prisma
│ ├── lang.tsx # i18n (ES/EN)
│ └── theme-context.tsx # Sistema de temas
├── middleware.ts # Protección de rutas
└── globals.css
| Comando | Descripción |
|---|---|
npm run dev |
Iniciar servidor de desarrollo |
npm run build |
Construcción para producción |
npm run start |
Iniciar servidor de producción |
npm run lint |
Ejecutar ESLint |
npx prisma studio |
Abrir Prisma Studio (interfaz gráfica de la BD) |
npx prisma migrate dev |
Ejecutar migraciones pendientes |
DayMark está bajo desarrollo activo. Consulta los hitos (milestones) e issues en GitHub para ver la hoja de ruta completa.
MIT