Lovable is a no-code AI-powered tool for generating websites, with the option to transfer project to github, update the code locally and integrate to your database instead of using their preferred choice: supabase. I’m currently using it to redesign the UI of my side project, Spendwise(Tech stack:Flask+SQL+RabbitMQ), aiming to improve the design and explore additional functional features. I’m using the free version of Lovable, which allows up to 5 queries per day which means we should cherish every chance of asking question. My side project github repo SpendWise.

Background

I developed a traditional web application called Personal SpendWise, handling everything from UI design and backend API development to RabbitMQ-based monitoring.

What I did

Implement UI for Authentication and Authorization
Develop backend APIs for the session-based authentication service
Design and establish the database schema and connections
Implement basic & JWT-cookie authentication and authorization accessing to customer’s dashboard.
Fix JWT token is shared if loginout and login with another users shortly
Implement Cache, pagination technique to reduce conjestion and optimize data retrieval from the database.
Build Expense Record Form to record expenses in the past(max: today, location is West US).
User can upload receipt(file), view in Expense table.
Build the Paginated Expense Record Table(create, view) with sorting function(with Boostrap).
Integrate with Plotly Dash and optimize asynchronous Chart Loading.
Integrate RabbitMQ to monitor user activity

What is Next

The current UI and feature set of my side project are not very user-friendly or robust. To improve the landing pages and frontend, I’ve started using Lovable, a no-code AI tool for web generation. While Lovable helps me design the frontend, I focus on refining and implementing the backend logic.

Chat with AI

Showing your detailed requirements through text or by attaching images.
I received an application that closely matches what I envisioned—almost complete and just as I expected.
AI created a comprehensive Flask backend for your expense tracker application that includes authentication, expense management, and category management. The backend uses PostgreSQL for the database and implements a RESTful API design. The code includes proper error handling, filtering capabilities, and follows best practices for Flask applications. To use this backend, you’ll need to set up a PostgreSQL database and run the Flask application independently from your React frontend.

API endpoint:

/login
/register
/dashboard
/expenses
/profile

Web pages:

Dashboard
login/register by PIN or OAuth
Expense table
Profile

Clone code

After successfully connecting to your github on lovable platform. You can see private repo is automatically generated and you can git clone to your local and update your code and integrating to database.
Go src/backend/README.md follow steps.

Connect to Database

I use TablePlus GUI database management tool. Before you connect new Database, make sure you already created database. First time, you can through CLI to access database. For my case, I already had DB username postgres and DB host localhost, but I need to create new database expense_tracker.

1 2	psql -U postgres -h localhost -p 5432 -l createdb -U postgres -h localhost -p 5432 expense_tracker

Now you can login and connect to your databse on TablePlus GUI.

Fix

Now application may have bug, such as data persistent issue. Since lovable code consider many factors such as cache.
For me, I meet the bug is that refresh dashboard expense page, data there. but if switch from one page to another, data is missing.
Cursor helps me to find bug.

enabled: !!localStorage.getItem('auth_token'),
// staleTime: 30000  Wrong! Data will be considered fresh for 30 seconds
staleTime: 0, // Correct! Always consider data stale  // staleTime: 30000 Data will be considered fresh for 30 seconds that is root cause for latency
gcTime: 5 * 60 * 1000, // Keep in cache for 5 minutes
refetchOnMount: true,
refetchOnWindowFocus: false

Ready to run

Please check source code in here AI Powered SpendWise.

Feedback

If you only need to generate frontend design based on your idea like UI/UX designer, go ahead to use it. If you have enough budget, also good to go. Since there is quota for free version(5/day,30/month). There is no free lunch.
If you’re experienced with frontend development, it’s easier to debug and refine the TypeScript code generated by AI, since it may contain bugs. But if you’re not as familiar, you’re often better off building the code yourself from scratch to avoid confusion and inefficiencies or use another AI code tool to debug such as Cursor.
Anyway, end of using AI is spending money, since you will keep depending on it. Let it keeps debugging what it creates.