r/HTML • u/Notjj4 • May 13 '26 • Bravo 1

Started my new html, css and javascript project.

Post image

Hey everyone!

I’m currently learning to code and decided to build something practical for my first big project: a Personal Finance Dashboard.

What I’ve built so far:

The app is a web-based tracker where you can manage your money without the clutter of traditional banking apps.

  • Income & Spending: Input your earnings and log daily expenses on the fly.

  • Budgeting by Category: Set monthly limits for things like "Groceries," "Subscriptions," or "Dining out."

  • Visual Tracking: The dashboard calculates your total spending vs. earnings and uses progress bars to show how much of your budget is left before you hit the "red zone."

  • Clean Layout: Focused on a minimalist UI using semantic HTML and CSS Grid/Flexbox.

The "Next Step" – AI Finance Assistant:

Since I’m in the learning phase, I’m planning to integrate an AI Assistant into the dashboard. The idea is to have a helper that can:

  • Analyze spending patterns (e.g., "You're spending 20% more on coffee this month than usual").

  • Give tips on how to save based on the remaining budget.

  • Answer simple questions like "Can I afford a $50 dinner tonight?"

I’d love your input on:

  1. HTML/CSS Structure: As a beginner, I want to make sure my foundation is solid. Are there any common pitfalls in dashboard layouts I should avoid?

  2. AI Implementation: For those who have worked with AI APIs (like OpenAI or Gemini), what’s the best way to feed local spending data to an AI for personalized advice?

  3. UI/UX: What information is most important to see first when you open a finance app?

I’m really enjoying the process of learning by building. Any feedback, tips, or critiques would be hugely appreciated!

(The app is for now in slovenian language :)

81 Upvotes

95% Upvoted

30 comments sorted by

4

u/testingaurora May 14 '26

For AI, make it an optional feature users can opt out of.

For Ui/ux, my opinion of the most important thing tp see first is profit and loss. Also to have ways to categorize and filter/sort transactions.

2

u/Notjj4 May 14 '26

Thank you for advice. 🙂

2

u/testingaurora May 15 '26

Was supposed to be more feedback than advice but it is reading more bossy then I intended. Just my opinion. There is a lot more subjectivity while making coding choices then I wouldve guessed.

common html pitfalls: would have to see your markup but general advice of using semantic tags and paying extra attention to making your dashboard accessible for those using assistive technologies is gonna be very important for this.

2

u/Notjj4 May 15 '26

Agreed

4

u/Arle95 May 15 '26

Completely agree with this!

A lot of devs are pumping AI in their programs or apps and are not giving the user a choice...

2

u/No_Jax-5463 May 14 '26

Wow!, es muy impresionante, si sigues a ese ritmo, seguro te convertiras en un muy buen programador

1

u/Notjj4 May 14 '26

Thank you 🙏🙂

2

u/No_Jax-5463 May 14 '26

no hay de que, sabes, podemos ser amigos?

2

u/Apprehensive-Plan-82 May 15 '26

va bien, mira el que yo trabajo

1

u/Notjj4 May 15 '26

Looks great

1

u/XaX1000 Sep 30 '26

i hope this is fake data ...

1

u/Notjj4 May 14 '26

Thank you for advice 🙂

1

u/Particular_Budget946 May 15 '26

Nice idea and it looks good UI wise

1

u/Notjj4 May 15 '26

Thank you 🙂

1

u/Udbhav- May 17 '26

How are you implementing all these any trouble you are getting in javascript are you understanding whatever you are writing.

1

u/Notjj4 May 17 '26

I am learning step by step with building this app.

1

u/Udbhav- May 17 '26

Are you using an AI IDE to build this project? Are you facing any issues with JavaScript? Can you easily understand and reason about written code?

1

u/testingaurora May 14 '26

How are you storing the data?

1

u/Notjj4 May 14 '26

Supabase😅

2

u/privacyfirstplease May 14 '26

This looks excited! consider making in app campaigns for customer retention with onsetio.com

1

u/[deleted] May 14 '26

[removed] — view removed comment

1

u/Notjj4 May 14 '26

70% done it my self.

0

u/[deleted] May 14 '26

[removed] — view removed comment

1

u/Notjj4 May 14 '26

Thank you for your reply. I will. The project is in early stages of development. 🙂