Simulation  banner

Simulation

2 devlogs
4h 53m 1s

Built a Life Simulation web app that predicts a user’s 10-year future based on personal inputs like income, sleep, study, risk level, and lifestyle habits. The app generates yearly scores for Wealth, Health, Mental, and Career, with a final summar…

Built a Life Simulation web app that predicts a user’s 10-year future based on personal inputs like income, sleep, study, risk level, and lifestyle habits. The app generates yearly scores for Wealth, Health, Mental, and Career, with a final summary evaluation, responsive SaaS-style layout, and Light/Dark mode support.

This project uses AI

Used AI to help me in colors.

Demo Repository

Loading README...

mathew.emad778

Shipped this project!

Hours: 4.88
Cookies: 🍪 41
Multiplier: 8.36 cookies/hr

Ship v1: life simulation app is live. Users can input habits and see a 10-year projection with yearly scores and a final evaluation.

mathew.emad778

After building the core simulation engine, the next step was turning the logic into something interactive. Initially, the system was running with a hardcoded test user just to verify that the calculations and yearly progression worked correctly. The goal was to replace that with a real input system so users could enter their own data and see how different habits might influence their life trajectory over the next ten years.

To achieve this, I built a form that collects several key variables such as age, income, sleep hours, study time, and risk tolerance, along with lifestyle habits like going to the gym or investing money. When the form is submitted, the data is passed to the simulation function which generates a year-by-year timeline.

During this process I ran into a common frontend issue where the script attempted to attach event listeners before the DOM elements were fully loaded, causing the well-known “Cannot read properties of null” error. Fixing it required adjusting how the scripts were loaded.

The interface was then redesigned into a two-column layout, placing the form on the left and the simulation results on the right. Each simulated year is displayed as a card showing Wealth, Health, Mental state, and Career progress. A final summary card calculates an overall score and provides a simple evaluation of the user’s trajectory. Alongside these changes, the UI was refined with custom form styling and a light mode toggle built using CSS variables.

Attachment
0
mathew.emad778

The first real step in this project was not about design, layout, or animations. It was about logic. I wanted the application to feel alive, not random. The goal was to simulate 10 years of a user’s life in a way that reflects how small daily decisions compound over time.

I started by designing a function called simulateTenYears(). Instead of generating isolated yearly results, the system carries state forward. Each year builds on the previous one. Wealth increases based on income, investment behavior, and risk tolerance. Health reacts to sleep hours and gym consistency. Mental state shifts depending on balance between effort and pressure. Career growth is influenced by study hours and long-term discipline.

One of the biggest challenges was balancing the equations. If the impact of one factor was too strong, it would break the realism of the simulation. If too weak, the results would feel meaningless. The logic had to reward consistency while still allowing risk to produce both gains and setbacks.

Another important decision was making the engine deterministic but flexible. The structure allows easy tuning of weight values and conditions without rewriting the full system. This makes the simulation scalable and adjustable for future features.

By the end of this phase, the application had a working life progression engine capable of generating a 10-year timeline based entirely on user input. No UI improvements yet — just pure logic and structured thinking.

This was the foundation everything else would be built on.

Attachment
0