From Prototype to Live Application: What Building SiteSidekick Taught Me

Building SiteSidekick: My Meta AI Hackathon Journey — Part 7

When I first started working on SiteSidekick, I had an idea and a limited amount of time to turn it into something real.

By November 2, I had a live application with guided troubleshooting, saved issue history, developer handoff reports, and working Meta Muse Wonder integration.

There were still things I wanted to improve.

There always are.

But getting from an idea to a functioning application was a rewarding experience.

Step 1: Make the Application Available Online

One of my goals was to have something people could actually use.

I didn’t want the project to exist only on my computer or in a presentation.

I wanted a live website.

I deployed the SiteSidekick frontend and backend using Render, connected the application to GitHub, and configured the necessary environment settings.

That gave me a working version I could share with testers.

It also meant I could see how the application behaved outside my local development environment.

Step 2: Test It Like a Real Customer

I didn’t want to assume that a feature worked simply because it appeared on the screen.

I tested the application using a fictional bakery owner whose mobile menu layout broke after updating photos.

I started by describing the problem in everyday language.

SiteSidekick asked what was happening.

I selected the option indicating that the website loaded but something looked wrong.

From there, I chose the guided troubleshooting option.

The application walked me through three checks: comparing another phone, opening the page in a private browser window, and refreshing the affected page.

When the problem remained unresolved, SiteSidekick recommended professional assistance.

That was the outcome I wanted.

The application didn’t keep suggesting increasingly complicated changes.

It recognized when the next step should involve someone with more technical experience.

Step 3: Test the Developer Handoff

After completing the troubleshooting steps, SiteSidekick generated a structured report.

It included the original issue, the answers I’d provided, the checks I’d completed, and the fact that the problem was still unresolved.

It also suggested information a developer might need to investigate further.

I tested the copy feature and confirmed that the report could be copied for use in an email or support request.

This feature demonstrated one of the original reasons I wanted to build SiteSidekick.

Even when a tool can’t fix a website problem, it can still make the next step easier.

Step 4: Test Saved Issue History

I also tested the issue history feature.

After completing the bakery scenario, I opened the saved issue from the application’s navigation.

The previous conversation reopened with the troubleshooting information preserved.

That was important because I wanted users to be able to revisit what they’d already done rather than starting over.

For the prototype, this history is stored in the browser.

A future commercial version would need a more complete account and data storage system.

Step 5: Test Live Meta AI

After configuring the Meta API connection, I successfully tested Muse Wonder using the same bakery scenario.

The AI generated a plain-English explanation of the problem, described possible causes, and suggested a safe next step.

It also acknowledged that it hadn’t inspected the website.

That was an important result because I wanted the application to provide helpful guidance without making unsupported claims.

The guided troubleshooting and AI assistance were working as two complementary parts of the experience.

Step 6: Let Other People Test It

Once the core features were functioning, I began sharing the application with a few testers.

This was a different kind of test.

I knew how SiteSidekick was supposed to work because I’d been involved in every decision.

Someone opening it for the first time wouldn’t have that background.

I wanted to find out whether the instructions made sense, whether the navigation was understandable, and whether users knew what to do next.

Feedback from real people is valuable because they often notice things the person building the application overlooks.

I planned to use that feedback to identify any important improvements before the final hackathon presentation.

Step 7: Think About the Future

Although SiteSidekick began as a hackathon project, I can see opportunities for it beyond the competition.

The initial audience is small business owners who need help understanding website problems.

But the same concept could eventually help small marketing departments and agencies organize support requests and reduce repetitive troubleshooting work.

I’ve also considered offering a one-time trial followed by a subscription option.

Those are longer-term possibilities.

Before developing SiteSidekick into a full commercial product, I’d want to expand its account management, strengthen usage controls, improve persistent data storage, and continue testing the user experience.

For now, the focus is on the working prototype and what I’ve learned from creating it.

What This Project Taught Me

Looking back, I learned more than I expected.

I gained practical experience setting up a development environment, managing a project through GitHub, deploying separate frontend and backend services, integrating an AI model, troubleshooting API errors, and testing a complete application.

But I also learned something about my existing skills.

My experience in design, development, accessibility, marketing, and client support all contributed to this project.

I wasn’t simply learning how to connect to an AI model.

I was learning how to turn a familiar business problem into a usable digital product.

And that required many of the same skills I’ve developed throughout my career.

Why I’m Glad I Did It

I entered the hackathon because I wanted to challenge myself and have some fun learning something new.

I didn’t know exactly how far I’d get.

There were frustrating moments, unexpected problems, and plenty of things I had to research along the way.

But that’s what made it worthwhile.

I enjoy the process of figuring things out.

I like being able to take an idea, work through the problems, and eventually see it become something functional.

SiteSidekick gave me the opportunity to do all of that in a very short amount of time.

And regardless of what happens with the competition, I’ll walk away with new experience, a working project, and a better understanding of what’s possible when I combine the skills I already have with technology I’m still learning.

That’s a win in itself.

Explore SiteSidekick: https://sitesidekick.onrender.com

View my portfolio: https://tabathabierie.com

SiteSidekick is an independently developed TB Designs project using Meta AI technology. It is not affiliated with or endorsed by Meta.