🛠️ Jumpstarting My Project UI with v0.dev: From CLI Tool to Web App

For a while now, I’ve had a functional but barebones command-line tool that calculates profit and loss (PnL) for trading based on CSV input. It’s been immensely helpful for parsing trading data and getting quick financial insights — but the fact that it only runs in the terminal has made it inaccessible to many users who aren’t comfortable with the command line.

So I decided to give it a frontend — something clean, fast, and intuitive. And I call it Sprolo.

💡 UI Development Enhanced by AI Tools

I’ve been following the rise of AI tools for UI design and development, and I wanted to leverage one of them to help me create a new UI project. I was looking for something that could help me quickly prototype a UI without getting bogged down in design details.

Below are a list of AI tools that can help you create a new UI project, but just like v0.dev, I haven't tried any of them yet:

For this project, it seemed like a great opportunity to explore some of the new AI tools that have emerged. I decided to give v0.dev a try first, and here's why:

1. It is created by Vercel, the same team behind Next.js.
2. It takes a text-based approach (prompt) to generating UI components, which is perfect for my needs. I wanted to quickly prototype a UI without getting bogged down in design details.
3. It’s designed to work with React and Next.js, which is my stack of choice for this project.
4. It’s free to use, which is always a plus when you’re just starting out.

This tool didn’t just help me brainstorm interfaces — it jumpstarted the entire layout, saving hours of boilerplate and design setup.

🧮 About the CLI Tool

The original project is a command-line application that:

• Accepts CSV data either from a file or pasted input
• Parses trading information like symbol, quantity, price, and direction
• Calculates:
  • Total profit
  • Total loss
  • Net PnL
  • Trade-level breakdowns
• Outputs the result as a summary in the terminal

The goal was to visualize this data in a more user-friendly way, allowing:

• 📥 File uploads or pasted data
• 📊 Display of profit/loss metrics
• 🔎 Trade-by-trade breakdown
• 📈 Highlighting gainers and losers
• 🌐 Mobile-friendly, responsive design

🎯 Project Goals for the Frontend

Here’s what I wanted the UI to support:

• Upload or paste CSV-style data
• Parse and visualize individual trades and summary stats
• Display profit/loss metrics clearly
• Highlight gainers and losers
• Responsive layout
• Test data and error validation

✨ Using v0.dev to Kickstart the UI

Now log in to v0.dev and create a new project. You’ll be greeted with a simple interface where you can start typing your prompts.

Paste the following prompt into the editor:

1. Framework and Setup

• Use Next.js (App Router) with TypeScript
• Include Tailwind CSS for styling
• Use ShadCN/UI (or similar modern UI library) for:
  • Form inputs
  • Layout components

2. Core Functionality

• Allow users to:

  • Upload a CSV file
    OR
  • Paste CSV-style data into a textarea

• On submit:

  • Parse data
  • Send to backend API (/api/calculate) in JSON format
  • Display profit/loss calculations from backend response

3. CSV Handling

• Use PapaParse to:

  • Parse uploaded files
  • Parse pasted CSV strings

• Normalize data into consistent JSON format for backend

4. UI Pages

• Homepage ("/")

  • Introduction to the tool
  • Brief description

• Main Tool Page ("/calculate")

  • Upload or paste CSV
  • Submit and view results

• Optional Page:

  • "Help" or CSV Format Guidelines

5. Results Display

• Show key metrics:

  • Total Profit
  • Total Loss
  • Net PnL

• Display individual trades in a table or card layout:

  • Symbol
  • Buy/Sell
  • Quantity
  • Price
  • Profit/Loss per trade

• Use conditional formatting to highlight:

  • Profitable trades (e.g., green)
  • Losing trades (e.g., red)

6. Other Notes

• Add basic form validation:

  • No empty file or empty input allowed

• Include loading indicator while fetching results

• Ensure mobile-friendly and responsive design

Optional Enhancements

• Provide sample CSV data to auto-fill textarea
• Allow users to download results as CSV or JSON
• Save last result to localStorage for quick re-access

This prompt is quite detailed, but you can adjust it based on your specific needs.

And yes, you can just copy and paste the above prompt (everything, from point 1 to point 6) into v0.dev, and it will generate a basic layout for you.

🐦 Branding It: Meet Sprolo

While working on the UI, I also wanted a name and identity. I chose Sprolo — a blend of "Shares", "Profit", "Loss", and "Tax", but also a word that sounds like “sparrow”.

To go with the name, I asked ChatGPT to create a minimal, origami-inspired sparrow logo that represents agility and smart insight — everything I want this tool to be for traders and investors.

🧰 Sprolo Repo

Now the project with the baseline UI is ready, and you can find the code from this repo.

To set up the development environment, follow these steps:

1. Clone the repository:
   bash

   Copy git clone https://github.com/tyolab/Sprolo.git
   
   

2. Navigate to the project directory:
   bash

   Copy cd Sprolo
   

3. Install dependencies:
   bash

   Copy ### you will encounter issues with dependencies, so using --force
   npm install --force
   

4. Start the development server:
   bash

   Copy npm run dev
   

5. Open your browser and go to http://localhost:3000 to see the app in action.

Now we have a working frontend that can accept CSV data and just need the backend to use the existing logic to calculate profit and loss.

🧪 Convert the CLI tool into a Library

Before integrating the existing functionality into the web app, I need to convert the original CLI tool into a library. This will allow it to be reused in both the CLI and web app, maintaining core logic in one place and avoiding code duplication. Since we are already using AI, why not use it to help us with this task?

To do this, I used claude code which is an agentic coding tool that can directly modify source files with new code or make changes where needed. To learn how to use and installclaude code, check out this link. Initially, claude code required an API key, which was quite expensive, to run, but now it is available for free with some limitations of course as long as you have an account with Anthropic.

After running /init command inside claude code, I asked it to convert the CLI tool into a library. It took a few minutes, but it did a great job. The original code was split into two files: cli.js and lib.js. The cli.js file contains the command-line interface logic, while the lib.js file contains the core logic for calculating profit and loss. You can checked out the updated code in the repo.

🚀 What's Next?

So far, all were going well, but I still need to integrate the backend logic into the web app. The existing CLI tool is already set up to handle CSV data and perform calculations, so I just need to modify the existing API endpoint in the Next.js app that uses this library.

Here’s a quick overview of the next steps:

• Add export (CSV/JSON) for processed results
• Store past results in localStorage
• Add a “Help” page for data formatting guidance
• Deploy a hosted version for users to try

🎉 Final Thoughts

v0.dev didn’t just save time — it helped me prototype, visualize, and build faster than ever before. It’s the kind of tool that fits right into a solo developer’s or small team’s workflow, especially when you’re bridging the gap between back-end logic and user-facing UI.

If you’re building any tool that needs a frontend jumpstart, especially one with forms, tables, and interactivity, I highly recommend giving it a try.

Also, this will be an ongoing project, so stay tuned for updates as I refine the UI and add features. I’m excited to see where this goes!

Credits

Banner image created by ChatGPT-4o with the following prompt:

A dynamic illustration showing a command-line interface transforming into a modern, user-friendly web application interface. Use a bright, tech-forward color palette with a subtle gradient background. Include a stylized representation of the Sprolo logo subtly integrated into the design.