DEV Community: Muhammad Fahad

Stop Wondering Where Your Money Went: Why I Built Penny Tracker

Muhammad Fahad — Thu, 09 Apr 2026 08:20:05 +0000

Like many people (especially developers 😄), I used to face the same problem every month.

It’s the 28th. You check your bank account, expecting enough to get through the last few days… and you only have Rs. 3,000 left.

You think back. You didn’t buy anything expensive. No trips, no big purchases. So where did all your money go?

The truth is simple: it disappeared in small, everyday spending. Coffee here, groceries there, a bit of online shopping—it all adds up. But because I wasn’t tracking anything, I had no idea where my money was going.

I had paper receipts everywhere, emails full of invoices, and zero clarity. That confusion led to stress. I couldn’t control my spending because I couldn’t see it. At one point, I was going over my monthly budget by more than 100%.

So I decided to fix it the only way I know how: I built an app.

Introducing Penny Tracker

Penny Tracker is a simple and modern expense tracking app designed to make managing money easy—and even a little fun.

Here’s what it does:

1. Quick Expense Logging

No more saving receipts.

You can quickly:

Scan a receipt
Or manually add an expense in seconds

The goal is simple: logging an expense should take less time than making it.

2. Simple, Clear Dashboard

No confusing charts or menus.

You can instantly see:

Your current balance
How much of your monthly budget you’ve used
Your recent expenses

It gives you a clear picture of your money at a glance.

3. Gamification (Make Saving Fun)

Staying on budget can feel boring—so I added rewards.

You can:

Earn badges for tracking consistently
Unlock achievements like staying under budget
Build streaks to stay motivated

It turns managing money into something you actually want to keep doing.

4. Clean and Modern Design

I wanted something I’d enjoy using every day.

Penny Tracker uses a dark, clean design with calm colors and simple visuals—easy on the eyes and easy to understand.

Why I Built This

This app isn’t just about tracking expenses.

It’s about:

Knowing where your money goes
Making better spending decisions
Feeling in control instead of stressed

Once you can clearly see your spending, everything changes.

Try It Out

If you’ve ever wondered where your money disappears each month, this app is for you.

Give Penny Tracker a try and start taking control of your finances.

Penny Tracker - Apps on Google Play

Smart Expense Tracking for Modern Life

play.google.com

Penny Tracker – Version 2.0.0
A simple, expense tracker built for everyone. Currently, available on Google Playstore.

Axios Interceptor Hook Typescript

Muhammad Fahad — Sat, 19 Mar 2022 07:38:48 +0000

Re-Published

Hi,
Before that I have published my first NPM package which is: axios-interceptor-hook

Problems

Build on JavaScript, difficult for user to know about props because there is no suggestions.
There is no way to call multipart/form-data content-type.

What's new

Developed with typescript.
separate hook for Application/json, and multipart/form-data.
You can use Types for the configurations. (ApiConfig).

Interceptors

Axios interceptors are the methods which are used for each call request and response transformation using axios. Interceptors helps to transform your request before calling api request and when it gets response from the api. It's just like working as middleware.

Configuration

You need to install npm package axios-hook-typescript

Github Repo: (https://github.com/sheikhfahad67/axios-hook-typescript)

Run the command on your terminal.
npm install axios react-toastify axios-hook-typescript

axios-hook-typescript

React hooks for axios with built in react-tostify integration. Simple to use with minimum configuration.

Features

All the axios awesomeness you are familiar with
Zero configuration, but configurable if needed
Integrated react-toastify for better toast messages
Minimize file managment

Installation

npm install axios react-toastify axios-hook-typescript

axios and react-toastify are peer dependencies and needs to be installed explicitly

Example

import { useEffect, useRef } from 'react';
import {
  ApiConfig,
  useJsonApiInterceptor,
  useMultipartInterceptor,
} from 'axios-hook-typescript';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

interface todosObject {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

const App = () => {
  const { apiHandler: jsonApiHandler, data: jsonData } =
    useJsonApiInterceptor();
  const { apiHandler: multipartApiHandler } = useMultipartInterceptor();
  const inputRef = useRef(null);

  const getTodos = async () => {
    const config: ApiConfig = {
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
      displayToast: true,
      successMessage: 'Fetch all todos',
      theme: 'colored',
    };
    await jsonApiHandler(config);
  };

  useEffect(() => {
    getTodos();
  }, []);

  const handleFileChange = async (e: any) => {
    const { files: newFiles } = e.target;
    const formData = new FormData();
    formData.append('image', newFiles[0]);

    const config: ApiConfig = {
      url: 'http://localhost:8000/files',
      data: formData,
      method: 'POST',
      displayToast: true,
      successMessage: 'File uploaded successfully',
    };
    await multipartApiHandler(config);
  };

  return (
    <div className='App'>
      <ToastContainer />
      <h1>Axios Interceptor Examples</h1>
      <input
        id='file'
        type='file'
        multiple
        ref={inputRef}
        onChange={handleFileChange}
      />
      <button className='submit-btn' type='submit'>
        Upload
      </button>
      <div style={{ marginTop: '50px', border: '1px solid green' }}>
        {jsonData &&
          Object.keys(jsonData).length > 0 &&
          jsonData.map((todo: todosObject) => (
            <h1 key={todo.id}>{todo?.title}</h1>
          ))}
      </div>
    </div>
  );
};

export default App;

Documentation

Hooks

useJsonApiInterceptor - for content-type: application/json.
useMultipartInterceptor - for content-type: multipart/form-data

Return

It will return following fields:

Fields	Type	Description
data	Object	It return the response of api `(res.data)`
isPending	Bool	For loading purpose return `true` while fetching and return false after completion or failure
apiHandler	Func	Function to give you control over calling when you need just by passing `config`

For Bearer Token

Need to save your auth token as, interceptor will automatically get it.

localStorage.setItem('authToken', <YOUR TOKEN>);

Environment Variable for Base URL

Please add env variable into your .env or .env.local file.

REACT_APP_BASE_URL="https://jsonplaceholder.typicode.com"

Config Props

Types

ApiConfig - for api configurations

Fields	Type	Description
method	string	'get', 'post', 'put', 'delete', 'patch'
url	string	it will be your endpoint
delay	number	default 5000
data	Object	required on post, put, patch requests
successMessage	string	'Any Message'
position	string	'top-right', 'top-left', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'
hideProgressBar	Bool	`true` or `false`
theme	string	'light','dark','colored'

License

MIT

Configure Axios interceptor in few minutes...

Muhammad Fahad — Fri, 07 Jan 2022 11:33:25 +0000

Interceptors

Axios interceptors are the methods which are used for each call request using axios. Interceptors helps to transform your request before calling api request and when it gets response from the api. It's just like working as middleware.

Configuration

You need to install npm package axios-interceptor-hook

Github Repo: (https://github.com/sheikhfahad67/axios-interceptor)

Run the command on your terminal.
npm install axios react-toastify axios-interceptor-hook