Daily Routine

Daily Routine is a modern full-stack Next.js application developed in December 2025 to help users efficiently plan and visualize their weekly schedule. It features a beautiful interactive timeline view with zoom controls, real-time 'Now' indicator, task conflict prevention, multi-day task editing, and powerful single/multi-day task management. Built with Next.js, TypeScript, React, Tailwind CSS, and MongoDB — offers a polished, responsive experience focused on time management precision and user convenience.

Daily Routine

Technology Stack

Next.jsNext.js
ReactReact
Tailwind CSSTailwind CSS
TypeScriptTypeScript
JavaScriptJavaScript
MongoDBMongoDB

Landing Page

Modern and clean landing page with quick access to login/registration and project introduction.

After login, redirects to the main dashboard with weekly routine visualization.

  • Responsive and visually appealing landing design
  • Quick navigation to authentication routes
  • Theme support (light/dark)
  • Protected dashboard access
Landing Page image 1

Authentication Routes

Standard secure login and registration system consistent with your other projects.

Users are redirected to dashboard after successful authentication.

  • Secure login form (/login)
  • Registration with basic user information (/register)
  • MongoDB storage with proper password hashing
  • Responsive authentication pages
Authentication Routes image 1
Authentication Routes image 2

Dashboard & Weekly Timeline View

Beautiful interactive weekly timeline with zoom levels (1×–8×), current time indicator, rotatable week view, and clickable time blocks.

Shows free time gaps and formatted duration of each task/activity.

Clicking on tasks opens sidebar editor with pre-filled values.

  • Zoomable timeline (5/10/15/30 min granularity)
  • Real-time 'Now' line & label with auto-update
  • Week rotation controls
  • Visual distinction between free time and scheduled tasks
  • Responsive grid layout
Dashboard & Weekly Timeline View image 1

Advanced Routine Editor

Powerful task editor with single-day & multi-day support.

Very strict validation: time overlaps, min/max duration, duplicate names, overnight limitation.

Ability to update/delete task across multiple or all days at once.

  • Add/edit tasks for single or multiple days
  • Sophisticated overlap & conflict detection
  • Minimum 5 min and maximum ~24h duration validation
  • Duplicate name prevention per day
  • Quick task search/filter on current day
  • Save changes to MongoDB with feedback
Advanced Routine Editor image 1

Technical Implementation

Built with Next.js App Router + TypeScript for type safety and better developer experience.

Advanced time manipulation logic with robust validation.

MongoDB for persistent weekly routine storage.

  • Next.js server actions & dynamic rendering
  • TypeScript for better type checking & refactoring safety
  • Complex time logic with overnight handling
  • React hooks & context for global theme/auth state
  • Tailwind CSS + custom scrollbar styling
  • Real-time UI feedback & optimistic updates feel