todoist-dashboard Tailwind Templates

Todoist Dashboard

A powerful dashboard for Todoist users, offering deep task analytics, productivity insights, and trend tracking. Built with Next.js, React, TypeScript, and Tailwind CSS. 🌟

Todoist Dashboard

A powerful dashboard for Todoist users that provides deep insights into task management and productivity patterns. Visualize your most productive days and times, track task completion trends over time, and gain insights into your focus areas. Built with Next.js, React, and Tailwind CSS.

Features

  • 📊 Comprehensive task analytics and insights
  • 📈 Productivity scoring and trends
  • 🔄 Recurring task tracking and habit analytics
  • 🎯 Focus time recommendations
  • 📈 Project distribution analysis
  • 🖨️ Printable reports
  • 🌙 Dark mode interface
  • 📱 Responsive design

Technology Stack

  • React - A JavaScript library for building user interfaces
  • Next.js - The React Framework for Production
  • TypeScript - Typed superset of JavaScript
  • Tailwind CSS - A utility-first CSS framework
  • NextAuth.js - Authentication for Next.js
  • ECharts - A powerful charting and visualization library

Getting Started

Prerequisites

  • Node.js 18.x or later
  • A Todoist account
  • Todoist OAuth integration credentials

Installation

  1. Clone the repository:

    git clone https://github.com/uncazzy/todoist-dashboard.git
    cd todoist-dashboard
    
  2. Install dependencies:

    npm install
    # or
    yarn install
    
  3. Set up OAuth and environment variables:

    a. Create a Todoist OAuth integration:

    • Go to Todoist App Management Console
    • Create a new app
    • Set your OAuth redirect URI to http://localhost:3000/api/auth/callback/todoist (for development)
    • Copy your Client ID and Client Secret

    b. Create a .env.local file in the root directory with the following variables:

    # Todoist OAuth
    TODOIST_CLIENT_ID=your-todoist-client-id
    TODOIST_CLIENT_SECRET=your-todoist-client-secret
    
    # NextAuth Configuration
    NEXTAUTH_URL=http://localhost:3000
    NEXTAUTH_SECRET=your-nextauth-secret-key
    

    Note: Generate a secure NEXTAUTH_SECRET using openssl rand -base64 32 or another secure method

  4. Run the development server:

    npm run dev
    # or
    yarn dev
    
  5. Open http://localhost:3000 in your browser and authenticate with your Todoist account.

Contributing

Contributions to Todoist Dashboard are welcome! Whether it's reporting a bug, suggesting an enhancement, or submitting a code change, your help is appreciated.

Please check out Contributing Guidelines for detailed instructions on how to get started.

Test Data

For development and testing purposes, this project includes test data generators in the /test directory. Currently available generators:

  • generate_recurring_tasks.py: Generate test data for recurring tasks with various patterns

See test/README.md for detailed usage instructions and examples.

Development Guidelines

  • Follow the existing code style and conventions
  • Keep code clean and maintainable
  • Update documentation as needed
  • Keep commits atomic and well-described

Privacy

Todoist Dashboard respects your privacy. It accesses your Todoist data only with your explicit permission and does not store any personal data or task information beyond the active session. See the Privacy Policy for more details.

Security

If you discover any security vulnerabilities, please report them directly to [email protected]. Your efforts in making the project more secure are greatly appreciated.

Disclaimer

Todoist Dashboard is an independent project and is not affiliated with, sponsored by, or endorsed by Todoist or Doist. Todoist is a trademark of Doist.

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this software in accordance with the terms of the license. See the LICENSE file for details.

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes