Build an Expense Tracker & Financial Advisor App with Next.js, Tailwind CSS, and Javascript

Опубликовано: 16 Февраль 2026
на канале: Albert Mends
72,951
1.9k

Built with the latest Next.js. Finan Smart is an advanced AI financial advice tool. It allows users to input their income, expenses, and budgets, and receive personalized financial advice based on their financial data. This project is perfect for those looking to learn how to integrate AI-driven insights and financial management into a Next.js application.

⭐ Shadcn: https://ui.shadcn.com/
⭐ Drizzle: https://orm.drizzle.team/docs/get-sta...
⭐ Neon: https://console.neon.tech/
⭐ TailwindCSS: https://tailwindcss.com/
⭐ Aceternity UI: https://shorturl.at/3p5Dp

📚 Materials/References:
GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/ai-fin...
README (assets & code): https://github.com/mendsalbert/ai-fin...

❤️ BuyMeACoffe : https://www.buymeacoffee.com/mendalbert

👋 Social Media:
  / mendsalbert  
  / mendsalbert_  
  / mends-albert  
https://t.me/albertmends

Subscribe or I turn your vs code into light mode
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
Timestamps
00:00:00 - Intro
00:00:29 - What we will build
00:02:20 - Project Setup
00:06:59 - Clerk Authentication Part 1 + NavBar
00:26:58 - Home page (Hero Section)
00:37:09 - Clerk Authentication Part 2
00:43:25 - Database setup
01:03:49 - Dashboard Components & Fetching Data from Database
02:23:52 - Other Dashboard pages
02:29:10 - Open AI Integration + Conclution

💼 Business inquiries: [email protected]

👨🏽‍💻 Tools and Tech Stack
React JS, NextJs, TailwindCSS,Typescript, Preline, Openai API, Tabler Icons, Javascript, AI, Drizzle, chadcn, neon console, API, Database.

A huge shoutout to Tube Guruji for the inspiration behind this project. I have modified his version and added some new features to it. Check out his channel for more great content!

   / @tubeguruji