How I Launched a Web App Using AI (Without Getting Stuck in Code or Design)

Lucas Neves — Thu, 03 Sep 2026 00:02:05 +0000

If you're a developer, you know the drill: you get a great side-project idea, open your code editor, start planning the architecture, get lost tweaking CSS alignments, and before you know it, the momentum dies. Another project ends up abandoned in your GitHub repositories.

Recently, I decided to break that cycle and ship GranaCheck—a web app that performs a financial health "checkup" and generates a personalized budget split (dynamically adjusting rules like 50/30/20 based on debt or emergency savings).

The twist? I used Artificial Intelligence as a full product team, broken down into clear, specialized stages. Here is the step-by-step breakdown of how it worked and how you can apply it to your next project.

Idea Validation & Business Logic Instead of jumping straight into coding, I used AI as a Product Manager (PM).

I explained the core concept and asked it to structure:

The essential input variables (income, age, debt status, emergency fund).

The decision engine logic (e.g., if the user has high-interest debt, priority shifts to a 60/20/10/10 split).

The Minimum Viable Product (MVP) scope to avoid feature creep on day one.

Key Takeaway: Use AI to trim the fluff from your original idea before writing a single line of code.

Visual Prototyping For the visual layer, I leveraged AI to generate structured screen layouts. Instead of asking for a generic "pretty design," I provided prompts strictly focused on a Design System:

Style Guide: Defined a functional color palette (emerald green for investments, coral for debts, electric blue for guilt-free spending) and clean typography.

Componentization: Requested separate layout generations (Landing Page, Multi-Step Wizard, and Results Dashboard).

This ensured the UI had clear visual hierarchy right out of the gate.

Modular Coding with Vue 3 & Tailwind CSS With the UI layout locked in, I moved to an AI code editor to build the app using Vue 3 (Composition API) and Tailwind CSS.

The key strategy here was modular prompting—building one component at a time:

BudgetCategoryCard.vue: Card component displaying each spending category.

BudgetChart.vue: Responsive donut chart.

BudgetWizard.vue: 3-step form with a progress bar.

useBudgetCalculator.js: The composable holding the algorithm's core logic.

Visual Refactoring via Image Prompts AI generates code fast, but CSS layout bugs still happen. On the first build of the dashboard, elements overlapped: the header banner bled into the cards, and the chart rendered in default black.

To fix it, I snapped a screenshot of the broken UI, fed the image back to the AI, and asked for targeted CSS fixes:

"The top banner is overlapping the grid. Add mb-8."

"Category cards are squished together. Apply flex flex-col gap-4."

"Replace the default black chart slices with our Design System tokens."

In a single refactoring loop, the layout was fixed and production-ready.

Conclusion
The biggest advantage of using AI for product development isn't just code generation speed—it's eliminating operational and creative friction.

The AI acted as PM, UI Designer, Frontend Developer, and QA. My main role was Product Architect: making sure decisions made sense for the end-user and orchestrating the integration.

GranaCheck is live in production. If you have an idea sitting in your head, break the process into short, focused prompts, choose a stack you know, and ship your MVP.

8 project ideas for Front-end developers

Lucas Neves — Tue, 30 May 2023 13:42:48 +0000

As a software developer, you want to showcase your skills and knowledge in a practical way that everyone can understand. To do that, it’s crucial to have a portfolio with your personal projects, even if they’re just for learning purposes.

A well-constructed portfolio can greatly assist in the hiring process, as it demonstrates your ability to solve problems and deliver functionalities that meet project requirements.

If you’re lacking ideas or inspiration, you can use Dribbble to gather some product design references. It’s particularly helpful for those who are not familiar with UX design. I’ve listed 8 project ideas that I came across while browsing Dribbble to help you develop and expand your skills.

1 — Shopping Cart

An e-commerce project is quite comprehensive and packed with cool functionalities, but you don’t have to develop them all. One of these functionalities is the shopping cart, where you can add products to a shopping list, calculate the total number of items, and the price for completing the purchase. It’s a basic feature, but leaves room for adding other ideas that may arise. If you have the knowledge, you can also create an API to facilitate integration with the front-end.

2 — Bookshelf

Create a book manager. You can start by building a CRUD system where you add books from your personal library. Then, you can mark the ones you’ve already read, the ones you’re currently reading, and even the ones you’ve borrowed. You can manage the reading progress of each book as well. You can use localStorage to store the information, utilize Firebase, or even create your own API.

3 — Album of the Day

Having trouble deciding which song to listen to? Create a page that connects to your Spotify library and includes a button that randomly selects an album from your collection or plays a random song. Use the Spotify API to integrate it with your account.

4 — Breakout

Surely you’ve played or seen someone play this classic game. It involves destroying a layer of blocks using a ball and paddle while trying to prevent the ball from touching the bottom of the screen. The game was inspired by Pong and served as the foundation for other games and the Apple II computer. To take it further, add scoring and increase the level as the player advances.

5 — Product Landing Page

Develop a landing page for an upcoming fictional product. You can create a basic form to collect data from visitors browsing the page. Pay attention to responsive design, ensuring that the site can be accessed on any device, regardless of screen resolution. If you’re lacking inspiration, you can take inspiration from various landing page layouts on Theme Forest or Dribbble.

6 — Component Library

In some projects, we often use the same components and end up copying and pasting them from one project to another, which can be tedious. To solve this issue, you can create your own component library, keeping them all in one place to easily access whenever starting a new project. While there are already many libraries available for this purpose, this is your chance to gain knowledge and understand how to create reusable components. Use Storybook for developing these components; it’s a valuable tool that greatly aids in maintenance and testing.

7 — Link Shortener

Another cool idea is to create a link shortener. By using the relink URL API, you have access to various functionalities to explore, such as social media links, QR codes, affiliate links, video links with the ability to preview the video, and more. There are plenty of possibilities to play around with.

8 — Live Sports Scoreboard

If you’re a sports fan, this is a great idea for an app. Create a live scoreboard for football or any other sport. There are several APIs available that deliver real-time sports information. You can create a filter for users to choose which sport they want to follow.

Conclusion

Here are some app ideas that you can create. The most important thing is to start as soon as possible because it’s through practice that we truly understand those programming concepts that might not be so clear at first. If you didn’t like any of these ideas, you can take a look at the frontendBR repository on Github, where several technical challenges are submitted by different companies for job candidates. It’s a great way to test your skills. Thank you, and see you in the next post!

DEV Community: Lucas Neves