Smart Task Planner

Abstract

The Smart Task Planner is a full-stack, intelligent project management application designed to bridge the gap between high-level goal setting and actionable project execution. By integrating a powerful Large Language Model (LLM) via the Groq API, the application automates the initial, often time-consuming, phase of project planning. It takes a user's goal as input and generates a comprehensive, structured project plan, complete with a task breakdown, priorities, and dependencies.

The system is built on a modern, decoupled architecture, featuring a responsive React frontend and a high-performance FastAPI backend. It provides a full suite of project and task management tools, secure user authentication, and a customizable user interface, making it a powerful tool for individuals and teams looking to streamline their workflow and bring their ideas to life more efficiently.

Demo Video

Demo

Table of Contents

1. Core Features
2. System Architecture
3. Technology Stack
4. Database Schema
5. API Endpoint Documentation
6. Local Development Setup
7. Usage Guide
8. Contributing
9. License

Core Features

• AI-Powered Goal Analysis: The core feature of the application. Users can input a high-level goal through a dedicated dialog. The system then communicates with the Groq API to perform an in-depth analysis, returning a complete, structured project plan that the user can review and approve before it is saved.

• Comprehensive Project and Task Management: Provides full CRUD (Create, Read, Update, Delete) functionality for both projects and tasks. Users can create projects manually or through the AI analysis feature. Tasks can be created, edited, and deleted from a centralized task management page or within a specific project.

• Automatic Progress Calculation and Status Updates: The system provides real-time feedback on project progress. When a task's status is updated to "completed," its completion percentage is set to 100%. The parent project's overall completion percentage is then instantly recalculated as an average of all its tasks. If a project's completion percentage reaches 100%, its status is automatically updated to "completed".

• Dynamic and Persistent UI Theme: The application includes a fully functional dark mode, which can be toggled from the settings page, allowing for a comfortable user experience in any lighting condition. The user's theme preference is saved to the browser's local storage, ensuring it persists across sessions.

• Secure User Authentication and Management: The system features a robust and secure user authentication system based on JSON Web Tokens (JWT). User passwords are never stored in plain text; they are securely hashed and salted using the bcrypt algorithm via the passlib library.

• Secure Password Management: Authenticated users can securely change their password through a dedicated interface. The system requires verification of the user's current password before allowing an update, ensuring the security of the user's account.

System Architecture

The application follows a modern, decoupled client-server architecture.

• Frontend (Client): A responsive single-page application (SPA) built with React. It is responsible for all user interface rendering and client-side state management. It communicates with the backend via a RESTful API.

• Backend (Server): A high-performance RESTful API built with FastAPI. It handles all business logic, including user authentication, database interactions, and communication with the external Groq API for AI-powered features.

• Database: A relational database (PostgreSQL recommended for production) that serves as the single source of truth for all application data, including users, projects, tasks, and their relationships.

Technology Stack

Frontend

• React 18: The core of the user interface, built with modern functional components and hooks for a declarative and efficient UI.
• TypeScript: Provides static typing to the JavaScript codebase, improving code quality, maintainability, and developer experience.
• Material-UI (MUI): A comprehensive library of pre-built React components that implements Google's Material Design, used for creating a clean and consistent user interface.
• React Query: A powerful library for managing server state. It handles data fetching, caching, synchronization, and updates, providing a seamless and responsive user experience.
• React Router: Manages all client-side routing within the single-page application.
• React Hook Form & Yup: Used in combination for efficient, scalable, and robust form management and validation.
• Axios: A promise-based HTTP client for making requests from the frontend to the backend API.

Backend

• Python 3.11+: The primary programming language for the backend logic, chosen for its readability and extensive ecosystem of libraries.
• FastAPI: A modern, high-performance web framework for building APIs with Python. It features automatic data validation, serialization, and interactive API documentation (via Swagger UI and ReDoc).
• SQLAlchemy: A powerful Object-Relational Mapper (ORM) that acts as an abstraction layer between the Python code and the relational database. It allows for database operations to be performed using Python objects, improving code readability and maintainability.
• Groq API: The high-speed AI service used for the intelligent goal analysis feature. The groq Python library is used to interact with this service.
• Passlib & python-jose: Libraries used for security-critical operations. passlib is used for securely hashing and verifying passwords with bcrypt, and python-jose is used for creating and verifying JWTs for authentication.

Database

• SQLite: Used as the default, file-based database for local development. It is lightweight and requires no separate server installation, making it ideal for getting started quickly.
• PostgreSQL: The recommended database for production environments. It is a powerful, open-source, and highly scalable object-relational database system known for its reliability and performance.

Database Schema

The database schema is designed to be relational and scalable. The core models include:

• User: Stores user account information, including credentials and preferences.
• Project: Represents a single project, containing metadata such as title, description, goal, and status. Each project is owned by a user.
• Task: Represents a single task within a project. Each task has properties like status, priority, and completion percentage.
• TaskDependency: A linking table that defines dependencies between tasks (e.g., Task A must be completed before Task B can begin).

API Endpoint Documentation

The backend provides a RESTful API with the following key endpoints:

Authentication (/auth)

• POST /register: Create a new user account.
• POST /login: Authenticate a user and receive a JWT access token.
• GET /me: Get the profile of the currently authenticated user.
• PUT /password: Change the password for the currently authenticated user.

Projects (/projects)

• GET /: Get a list of all projects for the current user.
• POST /: Create a new project.
• GET /{project_id}: Get the details of a specific project.
• DELETE /{project_id}: Delete a specific project and all of its associated tasks.
• POST /analyze-goal: The AI-powered endpoint to analyze a goal and generate a project plan.
• GET /{project_id}/tasks: Get all tasks associated with a specific project.

Tasks (/tasks)

• POST /projects/{project_id}/tasks: Create a new task for a specific project.
• PUT /{task_id}: Update the details of a specific task.
• DELETE /{task_id}: Delete a specific task.
• PUT /{task_id}/status: Update the status of a specific task.

Local Development Setup

Prerequisites

• Python 3.11 or newer
• Node.js 18 or newer
• (Optional) Docker and Docker Compose for running a PostgreSQL database.

Step-by-Step Instructions

1. Clone the Repository

   git clone <repository-url>
   cd <repository-directory>

2. Configure Environment Variables Create a file named .env in the root of the project directory. This file will hold your secret keys and database configuration.

   # For a file-based database (recommended for local development)
   DATABASE_URL=sqlite:///./smart_task_planner.db
   
   # Get your API key from https://console.groq.com/keys
   GROQ_API_KEY=your_groq_api_key_here
   
   # Generate a long, random string for signing security tokens
   SECRET_KEY=your_super_secret_key_here

3. Set Up the Backend Navigate to the backend directory and set up a Python virtual environment.

   cd backend
   python -m venv venv

   Activate the virtual environment.

   # On Windows:
   venv\Scripts\activate
   # On macOS/Linux:
   source venv/bin/activate

   Install the required Python packages.

   pip install -r requirements.txt

   Start the backend server.

   uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

   The backend API will now be running on http://localhost:8000.

4. Set Up the Frontend In a separate terminal, navigate to the frontend directory.

   cd frontend
   npm install

   Start the frontend development server.

   npm start

   The frontend application will now be running on http://localhost:3000.

Usage Guide

1. Register and Log In: Navigate to http://localhost:3000 to create a new user account and log in.
2. Analyze a Goal: From the dashboard, click the "Analyze New Goal" button. Describe a high-level objective and, optionally, provide additional context, constraints, or preferences.
3. Create a Project: Review the AI-generated plan. If you are satisfied, click "Create Project" to save it to your workspace.
4. Manage Your Project: Navigate to the project's detail page to view its tasks. Use the dropdown menu on each task to update its status. As you complete tasks, the project's overall progress will update automatically.
5. Customize Your Experience: Navigate to the "Settings" page to toggle dark mode or change your account password.

Contributing

Contributions are welcome. Please open an issue to discuss a new feature or bug fix before submitting a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.