Viabl

• 

  Overview page (Home page)

• 

  My Budget page

💡 Inspiration

Managing personal finances can be stressful. Viabl was born from the desire to create a simple, stress-free way to meet budget needs without the fear of overspending. The goal was to strip away the complexity of traditional finance apps and focus on clarity and control.

📱 What it does

Viabl allows users to take control of their finances by setting a global budget and tracking expenses in real-time. Users can log spending across specific categories (like Housing, Food, and Utilities) and visualize their financial health through interactive trend graphs, ensuring they meet their spending goals without going over budget.

🛠️ How we built it

The journey began with a high-fidelity design in Figma, focusing on a minimal and accessible user interface. This design was then translated into code using React and Tailwind CSS for the frontend. For the backend, I built a robust REST API using Node.js and Express, connecting to a PostgreSQL database via Prisma ORM to ensure data persistence and speed.

🛑 Challenges we ran into

As a solo developer, the biggest challenge was managing strict time constraints while ensuring the full stack—frontend, backend, and database—integrated seamlessly. Debugging data flow between the client and the server while maintaining a clean UI required careful planning and persistence.

🏆 Accomplishments that we're proud of

I am incredibly proud of building a fully functional full-stack application from scratch. Successfully bridging a modern, responsive React UI with a persistent PostgreSQL backend and deploying a working budget tracker as a solo developer is a major milestone.

🧠 What we learned

I gained deep insights into the end-to-end development lifecycle. Specifically, I learned how to design a seamless, minimal frontend that prioritizes user experience, and mastered the intricacies of connecting that frontend to a backend database using Prisma.

🔮 What's next for Viabl

The next step for Viabl is to integrate Artificial Intelligence. I plan to add smart algorithms that analyze spending patterns to offer personalized recommendations, helping users save money more effectively.

Built With

• express.js
• node.js
• postgresql
• prisma
• react