A highly professional and modern personal dashboard with comprehensive productivity features, built with Next.js 15, TypeScript, MongoDB, and NextAuth.js.

• NextAuth.js Integration - Secure authentication with email/password
• Magic Link Authentication - Passwordless login via email link
• Password Hashing - Secure storage with bcryptjs
• Session Management - JWT-based sessions
• Flexible Login Options - Choice between password or magic link

• Project-based Time Tracking - Organized by projects and tasks
• Live Timer - Real-time time tracking with start/stop functionality
• Automatic Calculations - Duration calculated automatically
• History & Analyticstics - Detailed time tracking with reports

• Contact Management - Complete contact database
• Tagging System - Contact categorization
• Company Integration - Link to companies and positions
• Search Function - Quick contact search

• Categorized Notes - Organized by categories
• Markdown Support - Rich-text notes
• Contact Linking - Notes can be linked to contacts
• Tag System - Flexible categorization
• Collaborative Notes - Share notes with other people
• Project Integration - Link notes to projects

• Team Management - Add team members via email
• Role-based Permissions - Project owners vs. collaborators
• Project-based Access Control - Automatic content permissions
• Email-based Invitations - Registered and unregistered users
• Collaborative Content - Shared notes, documents, contacts, and events

• Project Owner Rights - Full access to all project data and project editing
• Collaborator Rights - Read/write access ONLY to project-related content (NOT the project itself)
• Clear Separation - Collaborators cannot edit project details
• Protected Analytics - Time tracking and analytics only for owners
• Granular Sharing - Share individual notes and documents

🔐 Important Clarification:

• Collaborators cannot edit the project itself (name, status, budget, etc.)
• Collaborators can ONLY edit project-related content (notes, documents, contacts, events)
• Only the project owner can manage the project and team

• Productivity Dashboard - Detailed insights into your work
• Time Visualization - Charts and graphs with Recharts
• Project Distribution - Analysis of time allocation
• Trend Analysis - Long-term productivity trends

• Event Management - Manage appointments and tasks
• Various Event Types - Meetings, tasks, reminders
• Month View - Clear calendar overview
• Upcoming Events - Overview of upcoming appointments
• Advanced Recurring Events - Complex repetition patterns
• Flexible Repetitions - Daily, weekly, monthly, yearly
• Special Weekdays - E.g. every 2nd Monday of the month
• End Options - By date, count, or infinite
• Event Sharing - Share events with team members

• Dark Mode Only - Consistent dark design
• Responsive Design - Optimized for all screen sizes
• Tailwind CSS - Modern and consistent UI
• Radix UI Components - High-quality, accessible components

• Profile Management - Manage personal data
• Change Password - Secure password updates
• Theme Settings - Personalized display
• Data Export - Complete data export as JSON
• Notifications - Customizable notification settings

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Primitive UI components
• Lucide React - Modern icon library
• Recharts - Data visualization
• date-fns - Date utilities

• Next.js API Routes - Serverless API endpoints
• MongoDB - NoSQL database
• NextAuth.js - Authentication
• bcryptjs - Password hashing

• ESLint - Code quality
• TypeScript - Type checking
• Turbopack - Fast development server

• Node.js 18.17.0 or higher
• MongoDB (local or Atlas)
• Git

git clone [repository-url]

cd personal_dashboard

npm install

Create a .env.local file in the root directory:

# Auth.js Configuration

NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_SECRET=your-secret-key-here-change-in-production


# MongoDB Configuration

MONGODB_URI=mongodb://localhost:27017/personal-dashboard


# Email Configuration (Optional - for email authentication)

EMAIL_SERVER_HOST=smtp.gmail.com

EMAIL_SERVER_PORT=587

EMAIL_SERVER_USER=[email protected]

EMAIL_SERVER_PASSWORD=your-app-password

EMAIL_FROM=[email protected]

1. Install MongoDB Community Server
2. Start MongoDB service
3. The application will automatically create the required collections

1. Create an account at MongoDB Atlas
2. Create a new cluster
3. Copy the connection string to MONGODB_URI

npm run dev

The application is now available at http://localhost:3000.

1. Push your code to GitHub
2. Connect your repository with Vercel
3. Configure environment variables in Vercel
4. Deploy!

The application can be deployed on any platform that supports Next.js:

• Netlify
• Railway
• Digital Ocean
• AWS
• Google Cloud

1. Register via /auth/signup
2. Sign in via /auth/signin
3. Explore the dashboard

1. Click "Start Timer" in the dashboard
2. Select project and task
3. Start time tracking
4. Stop timer when finished

1. Navigate to "CRM Notes"
2. Add new contacts
3. Organize with tags
4. Create linked notes

1. Visit the Analytics page
2. Select desired time period
3. Analyze your productivity trends

The theme can be customized in components/providers/theme-provider.tsx.

MongoDB collections are created automatically:

• users - User accounts
• accounts - NextAuth account links
• sessions - Active sessions
• timeEntries - Time tracking entries
• contacts - CRM contacts
• notes - Notes

• /api/auth/* - Authentication (NextAuth)
• /api/time-entries - Time tracking CRUD
• /api/contacts - Contacts CRUD
• /api/notes - Notes CRUD

├── app/                    # Next.js App Router
│   ├── api/               # API Routes
│   ├── auth/              # Authentication Pages
│   ├── dashboard/         # Dashboard Pages
│   └── globals.css        # Global Styles
├── components/            # React Components
│   ├── dashboard/         # Dashboard-specific Components
│   ├── providers/         # Context Providers
│   └── ui/                # Reusable UI Components
├── lib/                   # Utilities and Configuration
│   ├── auth.ts           # NextAuth Configuration
│   ├── mongodb.ts        # MongoDB Connection
│   └── utils.ts          # Utility Functions
└── public/               # Static Assets
tatic Assets

1. Create new API routes in app/api/
2. Develop UI components in components/
3. Add new pages in app/dashboard/
4. Extend navigation in dashboard-layout.tsx

• All passwords are hashed with bcryptjs
• JWT-based session management
• CSRF protection through NextAuth.js
• Server-side input validation
• Secure HTTP-only cookies

This project is available for personal and commercial use.

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Create a pull request

Bei Fragen oder Problemen öffnen Sie bitte ein Issue im Repository.

Viel Erfolg mit Ihrem Personal Dashboard! 🚀