Vue COCOMO icon
Vue COCOMO
Problem it solves
Tech stack
Application
Features
Value and application
Prerequisites
Installation and running
License

Vue COCOMO is a modern web application for estimating software project costs using the COCOMO (Constructive Cost Model). It enables automatic calculation of effort, development time, team size, and cost required to complete a software project based on various input parameters.

Overview of the Vue COCOMO project
Overview of the Vue COCOMO project

Problem it solves

Manual estimation of software projects can be inaccurate and time-consuming. The COCOMO model requires multiple sequential mathematical calculations, and existing tools are often outdated or cumbersome to use. Vue COCOMO automates this process, providing fast and reliable results.

Tech stack

  • Frontend
    • stack/typescript icon TypeScript: Main language of the project
    • stack/vue icon Vue 3: UI framework
    • stack/vite icon Vite: Fast build tool
    • stack/pinia icon Pinia: State management for global data handling
  • UI
    • stack/tailwind icon Tailwind 4: Utility-first CSS framework
    • stack/shadcn icon Shadcn/UI: Prebuilt, reusable components
    • stack/iconify icon Iconify: Icon library
  • Validation
    • stack/vee_validate icon VeeValidate: Real-time schema validation
  • Internationalization
    • stack/vue icon Vue I18n: Multilanguage support
  • Markdown
    • stack/markdown icon markdownit: Rendering documentation in MD
    • stack/markdown icon markdown-it-mathjax3: Math formula rendering
  • Storage
    • stack/javascript icon IndexedDB: Local browser data storage

Application

The estimation process is performed through an interface where users can enter key project parameters such as software size, complexity, and other relevant factors. The application then automatically calculates estimation metrics using the COCOMO model and presents the results clearly and understandably.

User interface for project estimation
User interface for project estimation

Features

  • Project management: Allows users to create, edit and delete software projects, storing all data locally in the browser for quick and secure access via IndexedDB.
  • Step-by-step guidance: Leads users through a process to enter the parameters required for estimation, ensuring no important detail is missed.
  • Result visualization: Presents estimation results with metric cards and detailed tabs breaking down costs.
  • Multilanguage support: Dynamic interface language switching; currently supports English and Spanish.

Value and application

  • Software developers: To estimate effort and cost for new projects.
  • Students and academics: As an educational tool to understand the COCOMO model.
  • Project managers: To better plan resources and budgets.
View of selecting projects stored in IndexedDB
View of selecting projects stored in IndexedDB
Detailed description of the COCOMO step
Detailed description of the COCOMO step
Responsive design, iPhone 12 Pro dimensions
Responsive design, iPhone 12 Pro dimensions

Prerequisites

  • Node.js >= 18.x
  • npm >= 9.x or yarn >= 1.22

Installation and running

  1. Clone the repository:

    git clone https://github.com/igidio/vue-cocomo.git
cd vue-cocomo

  2. Install dependencies:

    npm install
# or using yarn
yarn install

  3. Start the application in development mode:

    npm run dev
# or using yarn
yarn dev

  4. Open your browser and go to 🔗http://localhost:3000 to see the app in action.

License

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

© 2026 igidio