TrueCost

DebtTrap Shield helps borrowers see a loan’s true cost, understand warning signs, and find safer next steps before they commit.

Comment

Inspiration

Taking a loan can be an important financial decision, but understanding its actual cost is not always easy. People often focus on the monthly EMI without realizing how processing fees, additional charges, repayment penalties, and other loan conditions can affect the total amount they pay.

This inspired us to build TrueCost, a loan-safety web application that helps people understand the real cost of borrowing before making a decision. We wanted to make financial information easier to understand through a simple, structured, and user-friendly experience.

What it does

TrueCost helps users review loan information, understand repayment costs, and identify potential warning signs before committing to a loan.

Key features include:

  • Loan Cost Analysis: Calculate and understand important loan repayment figures.
  • Additional Cost Awareness: Bring attention to fees and other charges that can affect the total cost.
  • Risk Signals: Highlight loan terms and conditions that may deserve closer attention.
  • Guided User Flow: Walk users through entering loan details, reviewing information, understanding results, and exploring next steps.
  • Clear Summary: Present the key information in a more readable and organized format.

TrueCost is designed to support informed decisions, not to make financial decisions on behalf of users.

How we built it

We built TrueCost using React and Vite for the frontend, with Express.js for supporting backend functionality.

The application uses browser-based JavaScript logic for loan calculations and organizes the experience into a guided sequence of screens, from entering loan information to reviewing the results and viewing a final summary.

We focused on creating a modern, dark-themed interface with clear typography, structured result cards, and a consistent visual hierarchy. The aim was to make a complex financial topic feel approachable while keeping important figures and warnings easy to find.

The backend also supports optional AI-assisted document extraction functionality. Our overall approach was to combine useful financial calculations with a clear user experience.

Challenges we ran into

One of our main challenges was making loan information understandable without overwhelming users with too many numbers or technical terms. We needed to make the difference between monthly payments and the overall cost of borrowing clear.

Another challenge was designing a connected, step-by-step workflow where each screen serves a purpose and guides users toward the final result.

We also encountered technical issues during development, including local server port conflicts, frontend-backend connectivity, and debugging application behavior. Working through these problems taught us to test the entire user journey rather than focusing only on individual components.

Accomplishments that we're proud of

We are proud of turning a financial problem into a structured digital experience that focuses on transparency and usability.

We designed a guided workflow that helps users move from entering loan details to reviewing calculated costs, identifying potential warning signs, and understanding their next steps.

We are also proud of the attention given to the interface, including its dark visual theme, organized information cards, and emphasis on presenting financial results clearly.

Most importantly, TrueCost reflects our goal of using technology to help people better understand the financial commitments they are considering.

What we learned

Building TrueCost taught us that a useful application requires more than an attractive interface. The calculations, user experience, and underlying application logic must work together.

We learned how to structure a multi-step React application, connect frontend functionality with an Express backend, debug development issues, and present complex information in a more accessible format.

We also learned the importance of validation, clear error handling, and testing the complete application flow. Above all, this project helped us understand how thoughtful design can make technology more useful for real-world problems.

What's next for TrueCost

Our next goal is to make TrueCost more reliable, accessible, and useful for everyday borrowers.

We plan to improve loan-offer comparisons, strengthen input validation and error handling, and make document extraction more reliable. We also want to enhance the responsive interface and test the application with users to understand which features help them most.

In the future, we hope to provide clearer comparisons between loan offers and help users recognize important terms and potential risks before committing to a financial agreement.

Our vision is simple: help people understand the true cost before they decide.

Share this project:

Updates

Submission history