Forem: Amir

Building a Structured Finance Tracker in Vanilla JavaScript (Without Frameworks)

Amir — Wed, 11 Feb 2026 16:48:59 +0000

Modern front-end development is heavily framework-driven.

React, Vue, Angular — they give us structure, state management patterns, and predictable rendering out of the box.

But I recently asked myself:

What happens if you remove all of that?

Not to avoid frameworks.

But to understand what they’re actually solving.

So I built a personal project:

An advanced personal finance tracker using pure Vanilla JavaScript — no frameworks, no UI libraries, no charting libraries.

The Real Goal Wasn't the UI

Yes, the app includes:

Income and expense tracking
Dynamic filtering
Live search
Monthly grouping
CSV export
Dark/Light mode
Canvas-based chart visualization
LocalStorage persistence

But the real challenge was architectural:

How do you prevent your application from becoming fragile as features grow?

Core Architectural Decisions

1. Centralized State Object

All application data lives in a single state object.

Instead of mutating the DOM everywhere, state changes trigger rendering functions.

This helped prevent:

Inconsistent UI updates
Scattered data mutations
Hard-to-track side effects

2. State-Driven Rendering

Rather than updating isolated DOM fragments manually, rendering is driven by the current state.

When state changes → render cycle runs → UI reflects state.

This mirrors how modern frameworks operate internally.

3. Separation of Logic and Rendering

Business logic (adding transactions, filtering, exporting, formatting) is kept separate from UI rendering.

That separation made it easier to extend features without breaking existing functionality.

4. Canvas Without Chart Libraries

The income vs expense chart is built directly using the Canvas API.

No Chart.js.

No abstraction layer.

That forced me to think about scaling, layout, and rendering math manually.

What This Reinforced for Me

Frameworks are powerful.

But understanding:

State flow
Rendering cycles
Data mutations
UI synchronization

without relying on them builds real confidence.

It also makes you appreciate what frameworks abstract away — and when they’re truly needed.

Live Demo

Try the application here:

👉 https://amirhosseinln.github.io/advanced-finance-tracker/

Source code:

👉 https://github.com/AmirhosseinLN/advanced-finance-tracker

Connect

If you're interested in frontend architecture, state management, or UI engineering discussions, feel free to connect:

👉 https://www.linkedin.com/in/amirhossein-latifinavid-5923272a7/

Open Question

For developers building vanilla projects:

At what point do you introduce architectural patterns?

Do you design for scale early — or let complexity drive abstraction?

I'd genuinely appreciate feedback on the structure or UX decisions.

I thought I knew JavaScript.

Amir — Thu, 29 Jan 2026 13:05:45 +0000

I had studied:

arrays and objects
loops and conditionals
destructuring
string methods
even map, filter, reduce

But every time I opened a “simple” problem, my brain froze.

Not because of syntax.

Because I didn’t know how to think.

The mistake I kept making

I was asking:

“What code should I write?”

Instead of:

What is the input?
What shape should the output have?
Am I counting, grouping, or transforming data?
Should the result be {} or []?

That single question — {} or [] — blocked me more times than syntax errors ever did.

The moment things clicked

I stopped rushing to write code.

Before touching the keyboard, I started writing this in plain English:

“I need to group items by X”
“I need to count how many times Y appears”
“I need one value per key”

Only then did loops, accumulators, and dynamic keys make sense.
_What was the moment JavaScript finally “clicked” for you???
_


js
const result = {};

for (const item of data) {
  const key = item.type;
  result[key] = (result[key] ?? 0) + 1;
}

Practicing JavaScript Data Structures Without map/filter/reduce

Amir — Thu, 22 Jan 2026 16:44:54 +0000

_I’ve been practicing JavaScript data structures with a strict rule set:
_ • no DOM
• no map, filter, or reduce
• only objects, arrays, loops, and conditionals

The focus wasn’t syntax — it was learning how to think in data flow.

⸻

Exercise 1: Daily Store Report

From a flat list of products, generate:
• items that must be reordered
• items that are risky based on time in store

Rules:
• negative stock → 0
• missing values → 0
• reorder if stock < min
• risky if daysInStore >= 5

function buildDayliyReports(products) {
const orderList = [];
const riskyProducts = [];

for (const item of products) {
const { name, stock, min, daysInStore } = item;

const minValue = min ?? 0;
const days = daysInStore ?? 0;
let currentStock = stock ?? 0;
if (currentStock < 0) currentStock = 0;

if (currentStock < minValue) {
  const order = minValue - currentStock;
  orderList.push({ name, order });
}

if (days >= 5) {
  riskyProducts.push(name);
}

}

return { orderList, riskyProducts };
}

⸻

Exercise 2: Supplier Report (Dynamic Grouping)

Extend the same logic to:
• group orders by category
• compute totals per category
• handle missing categories safely

function buildSuppliersReport(products) {
const orderByCategory = { uncategorised: [] };
const riskyProducts = [];
const totals = { uncategorised: 0 };

for (const item of products) {
const { name, category, stock, min, daysInStore } = item;

const minValue = min ?? 0;
const days = daysInStore ?? 0;
let currentStock = stock ?? 0;
if (currentStock < 0) currentStock = 0;

const cat = category ?? "uncategorised";

if (!(cat in orderByCategory)) orderByCategory[cat] = [];
if (!(cat in totals)) totals[cat] = 0;

if (currentStock < minValue) {
  const order = minValue - currentStock;
  orderByCategory[cat].push({ name, order });
  totals[cat] += order;
}

if (days >= 5) {
  riskyProducts.push(name);
}

}

return { orderByCategory, riskyProducts, totals };
}

⸻

Takeaway

What helped me most was following this order consistently:
1. Normalize data
2. Make decisions independently
3. Aggregate results explicitly

This approach made nested data feel manageable and prepared me for more complex state logic.

⸻

I Stopped Memorizing JavaScript — Here’s What Changed

Amir — Wed, 21 Jan 2026 12:35:05 +0000

For a long time, I thought learning JavaScript meant memorizing syntax.

Methods.
Operators.
Exact function signatures.

But the more I practiced, the clearer something became:
syntax was never the real problem.

What actually changed things for me was understanding how data flows.

When I started working with things like:
*- spread vs rest
*- destructuring
*- event bubbling
*- passing data through functions

I stopped asking “what does this keyword do?”
and started asking “why is this data shaped this way?”

That shift made debugging easier.
It made reading other people’s code less intimidating.
And it made tools (including AI) actually useful instead of confusing.

I still forget syntax.
I still look things up.
But now I know what to look for and why.

Curious:
Do you still focus on memorizing syntax, or has something else helped things click for you?

Building a Multilingual AI Personality Quiz with Google AI Studio (Gemini)

Amir — Tue, 20 Jan 2026 12:29:30 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built a fun, multilingual personality-style web app that asks users 10 humorous questions and then matches them with an ideal thinker or scientist from history (such as Einstein, Da Vinci, Tesla, and others).

The app uses Google AI Studio (Gemini API) to dynamically generate:
• The final match explanation
• A personalized title, short bio, and match reason for each scientist

At the beginning, users can select their preferred language (English, Turkish, Italian, Persian, or Arabic), and all questions, UI text, and results are displayed in that language.
The questions are intentionally playful and conversational to keep the experience light and engaging.

Demo

My Experience

Working on this project helped me understand how powerful and flexible the Gemini API is for building user-facing AI experiences.
I learned how to:
• Structure prompts so the model generates consistent but creative outputs
• Combine static app logic with dynamic AI-generated content
• Handle multilingual UX in a clean and scalable way

What surprised me most was how well Gemini handled tone and personality when generating explanations, especially across different languages. It made the app feel much more human and interactive than a traditional quiz.

Overall, this track gave me confidence to integrate generative AI into real products, not just experiments.

Building a Todo App with Vanilla JavaScript

Amir — Mon, 19 Jan 2026 17:19:29 +0000

This is a small practice project built to improve my understanding of JavaScript logic and DOM manipulation, without using any frameworks.

The app follows a *state-driven * approach, where the UI is always derived from the application state rather than updated through scattered DOM operations.

amirhosseinln.github.io

https://github.com/AmirhosseinLN/Todo-app-V1