GoSolo: How I Built a Freelancer Service Platform from Scratch

The Problem That Sparked an Idea

Imagine you’re a freelancer trying to find new clients. You’ve got skills, but where do you showcase them? That’s exactly the problem I wanted to solve with GoSolo a web app where freelancers and solo entrepreneurs can list their services, connect with clients, and manage their availability seamlessly.

With GoSolo, you become your own boss, setting your own schedule while offering high-quality services to those who need them. Whether you’re a personal trainer, a pet sitter, or a graphic designer, GoSolo makes it easy to display your expertise and let clients book your services effortlessly. No more waiting for opportunities create them!

Building with JavaScript & JSON Server

I set out to build GoSolo as a Single Page Application (SPA), meaning no clunky page reloads just a smooth, dynamic experience. HTML, CSS, JavaScript, and JSON Server became my best friends throughout this journey.

The Features That Make GoSolo Work

Post a Service Instantly Users can fill out a form with title, description, category, price, location, and contact details, and boom it appears in real time, thanks to a fetch POST request to my JSON Server.

Live Search & Filter A search bar updates results dynamically as users type, filtering by title, category, location, or description using an event listener on keyup.

Mock Backend with JSON Server Instead of relying on a real database, JSON Server acts as my backend, handling GET, POST, and DELETE requests seamlessly.

Smooth Asynchronous Fetch Requests No one likes lag. Fetch API ensures instant updates without page reloads, creating a fast, intuitive user experience.

Challenges and Fixes

Challenge 1: My Services Weren’t Updating Immediately
I’d add a service, but it wouldn’t appear until I refreshed the page. Not ideal. The fix? Calling fetchServices() right after a successful POST request. Boom, problem solved.

 fetch("http://localhost:3000/services", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(newService)
    })
    .then(response => response.json())
    .then(() => {
        alert("Service Posted Successfully!");
        document.getElementById("post-form").reset();
        document.getElementById("post-form-container").style.display = "none";
        fetchServices(); 
    })
    .catch(error => console.error("Error adding service:", error));
});

Challenge 2: Search Wasn’t Case-Insensitive
If someone searched for "DOG" instead of "dog," no results appeared. Fix? Convert all text to lowercase before filtering. Now, it doesn’t matter if you’re shouting or whispering it finds what you need.

Challenge 3: Not Enough Event Listeners
To meet project requirements, I needed three distinct event listeners. I had search (keyup) and form submission (submit), so I added a click event to toggle the form visibility.

document.getElementById("post-service-btn").addEventListener("click", function() {
    document.getElementById("post-form-container").style.display = "block";
});

Lessons That Hit Hard

JavaScript is all about event-driven magic.
APIs and JSON Server make front-end apps feel "real".
Asynchronous code is powerful but debugging it is an art.
A great user experience means instant UI updates.

What’s Next for GoSolo?

Edit & Delete Services – Because people change their minds.
Polished UI with animations – Because good design matters.
User Authentication & Local Storage – Because no one likes retyping.

Final Thoughts

Building GoSolo wasn’t just a coding exercise it was a problem-solving mission. I started with an idea, built something functional, and leveled up my JavaScript skills along the way. This is just the beginning.