logo - Cost Calculator

Technologies: React 18, Tailwind, Context Api, SPA

Completed in 2022

costotus project image
costotus project image
costotus project image
costotus project image
costotus project image

Costotus - Manufacturing Cost Calculator

Costotus started as a simple cost calculator and evolved into a simple ERP. Developed using react 18 when I was first learning react development. This was a great learning experience.

App Features

  • All data saved to browser local storage as a single json string.
  • Google analytics doesn't set cookie without users explicit permission at the settings panel.
  • Supports multiple currencies and conversion between them using exchange rates.
  • User can provide an api-key for fixer api to automate exhange rate fetching.
  • Self implemented api cache to avoid unneccesary requests
  • Visit to backup or load your data. All data can be downloaded as a json file.
  • i18next library for localization. Easy to add more languages to the app.
  • Dasiy UI used for some components and theme support.
  • ReactCharts-2 to display price/expense history and cost analysis. -Joi for form schemas and validation
  • Some other packages used are axios, date-fns, focus-trap-react, locale-helpers, react-country-flag, react-day-picker,react-router-dom,react-icons, react-toastify, uuid

Getting Started

Go to and get started with demo data or your own. All data is stored in browser local storage for security reasons. You can backup your data anytime.

Simple starter guide

  1. Create your company profile
  2. In company menu, you can define periodic expenses and employees. These will be used to calculate fixed expenses and running costs. You can view detailed analysis of all expenses in company/expenses page.
  3. Go to materials page and define all raw materials that'll be needed for manufacturing.
  4. In packages menu, define all packages and their capacity that'll be used for manufacturing.
  5. Go to manufacturing/products and define unpackaged products.
  6. Go to manufacturing/recipes to define manufacturing recipes for the products created in step 5.
  7. Go to products menu to define end user products that are packaged and ready to sell.
  8. Keep your raw material/package prices and currency exchange rates up to date to track your expenses / cost per produced unit for each product.