Daily - Gamified Task Management System

🎯 Project Overview

Daily is a comprehensive, full-stack task management application that gamifies productivity through a unique point-based scoring system. Built with modern web technologies, it transforms traditional task management into an engaging, data-driven experience that helps users track and improve their daily productivity patterns.

Key Features

• 🎮 Gamified Task Management: Point-based scoring system with customizable daily targets
• 📊 Advanced Analytics: Comprehensive insights with charts, trends, and performance metrics
• 📝 Rich Text Editor: Built-in document capture with TipTap editor for note-taking
• 🔄 Recurring Process Management: Create and manage automated recurring tasks
• ⚡ Grind Mode: Focused work sessions with time tracking capabilities
• 📱 Responsive Design: Mobile-first approach with seamless cross-device experience
• 🔐 Secure Authentication: Auth0 integration with role-based access control
• 📈 Performance Tracking: Daily, weekly, monthly, and yearly progress visualization

🛠️ Technical Stack

Frontend

• React 18 with modern hooks and context API
• Vite for fast development and building
• Tailwind CSS for responsive, utility-first styling
• React Router for client-side routing
• TipTap for rich text editing capabilities
• Recharts for data visualization and analytics
• Auth0 React SDK for authentication

Backend

• Node.js with Express.js framework
• MongoDB with Mongoose ODM
• Auth0 for secure authentication and authorization
• JWT token-based authentication
• RESTful API architecture

Development Tools

• ESLint for code linting and quality assurance
• PostCSS for CSS processing
• Nodemon for development server auto-restart

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB Atlas account
• Auth0 account and application setup

Installation

1. Clone the repository

   git clone <repository-url>
   cd daily

2. Install dependencies

   # Install server dependencies
   npm install
   
   # Install client dependencies
   cd client && npm install

3. Environment Setup

   • Configure server .env file (see Environment Variables section)
   • Configure client .env file (see Environment Variables section)

4. Start the application

   # Start the server (from root directory)
   npm run dev
   
   # Start the client (from client directory)
   cd client && npm run dev

5. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3003

🔧 Environment Variables

Server Environment (.env)

PORT=[your_dev_port]
MONGODB_ATLAS_CONNECTION_STRING=[your_mongodb_atlas_connection_string]
ENVIRONMENT=dev

# Auth0 Configuration
AUTH0_AUDIENCE="http://localhost:3003"
AUTH0_ISSUER=[your_auth0_issuer_val]
AUTH0_JWKS_URI="[your_auth0_domain]/.well-known/jwks.json"
AUTH0_DOMAIN=[your_auth0_domain]
AUTH0_ID=[API_APP_ID]
AUTH0_SECRET=[API_APP_SECRET]

Client Environment (.env)

NODE_SERVER_PORT=[your_dev_port_for_node_server]

# Auth0 Configuration
VITE_AUTH0_DOMAIN=[your_auth0_domain]
VITE_AUTH0_ID=[your_auth0_client_id]
VITE_AUTH0_CALLBACK_URL=http://localhost:5173
VITE_AUTH0_AUDIENCE=http://localhost:3003
VITE_AUTH0_METADATA=http://localhost:5173/app_metadata

🔐 Authentication Setup

This application uses Auth0 for secure authentication and authorization. Follow these steps to set up authentication for development:

1. Auth0 Account Setup

• Create an Auth0 account and tenant
• Set up a Single Page Web Application
• Create an API Application
• Configure a Machine-to-Machine application for API access

2. Single Page Web Application Configuration

1. Create a new Single Page Web Application in Auth0
2. Add your local development URL to:
   • Allowed Callback URLs
   • Allowed Logout URLs
   • Allowed Web Origins
3. Copy the Domain and Client ID to your client .env file

3. API Application Setup

1. Create an API Application in Auth0
2. Copy the Issuer Base URL and Audience to your server .env file

4. Custom Claims Action

Create a Post-Login Action in Auth0 with the following code:

exports.onExecutePostLogin = async (event, api) => {
  if (event.user && event.user.app_metadata) {
    api.idToken.setCustomClaim(
      `http://localhost:5173/app_metadata`,
      event.user.app_metadata
    )
  }
}

5. Machine-to-Machine Application

1. Create a Machine-to-Machine application in Auth0
2. Authorize access to the Auth0 Management API
3. Copy credentials to your server .env file

For detailed Auth0 implementation guidance, refer to the Auth0 React SPA Guide.

🏗️ Project Architecture

Frontend Structure

client/src/
├── components/          # Reusable UI components
│   ├── dashboard/      # Main dashboard and todo management
│   ├── insights/       # Analytics and reporting features
│   ├── capture/        # Rich text editor for note-taking
│   ├── grind/          # Focused work session management
│   ├── process/        # Recurring task management
│   └── user/           # User profile and settings
├── providers/          # React context providers
├── handlers/           # Utility functions
└── assets/             # Static assets

Backend Structure

src/
├── models/             # MongoDB schemas
├── routers/            # Express route handlers
├── modules/            # Utility modules
└── migrations/         # Database migrations

🚀 Key Features Deep Dive

Gamified Task Management

• Point System: Tasks are assigned point values based on complexity and importance
• Daily Targets: Users can set and track daily point goals
• Performance Grading: A-F grading system based on target achievement
• Progress Tracking: Visual indicators of daily, weekly, and monthly progress

Advanced Analytics

• Interactive Charts: Built with Recharts for data visualization
• Date Range Analysis: Custom date range selection for historical data
• Performance Metrics: Points per day, completion rates, and trend analysis
• Export Capabilities: Data export for external analysis

Rich Text Editor

• TipTap Integration: Modern, extensible rich text editor
• Auto-save: Automatic document saving every 30 seconds
• Formatting Tools: Bold, italic, lists, and custom styling
• Document Management: Persistent storage with user-specific documents

🌐 Production Deployment

For production deployment:

1. Environment Configuration

   • Create separate Auth0 API application with production audience
   • Configure production MongoDB Atlas cluster
   • Set up production environment variables

2. Build Process

   # Build the client
   cd client && npm run build
   
   # The built files will be served by the Express server

3. Server Configuration

   • Configure production port and MongoDB connection
   • Set up proper CORS and security headers
   • Implement proper error handling and logging

📊 Performance & Scalability

• Database: MongoDB Atlas for scalable data storage
• Authentication: Auth0 for secure, scalable user management
• Frontend: Vite for fast builds and optimized bundles
• API: RESTful architecture with proper error handling
• Responsive Design: Mobile-first approach for cross-device compatibility

🤝 Contributing

This project demonstrates modern full-stack development practices including:

• Component-based architecture
• Context API for state management
• RESTful API design
• Secure authentication implementation
• Responsive UI/UX design
• Database modeling and migrations

📝 License

This project is for portfolio and demonstration purposes.