Hackathon Madness: The M.o.b.b.(Map of Black Business) Rises Again

A vibrant scene of participants collaborating at a hackathon, showcasing excitement and creativity in a tech-focused environment. — ChatGPT created this image with DALL-E 3. It always has issues with drawing faces hands and feet. To get a better image add no faces, no hands, no feet directly into your prompt.

AI-powered Wix Studio app development

Man, the Hackathon kicked off via email on Thursday and was due on Sunday. It was framed like a contest, and you got to select your project from a set of prompts like "Create a business directory with categories, reviews, and contact info." You could submit up to five entries. You had to use LLM and AI-based technology to build your app/apps.

There were all kinds of other "base apps" you could build. You could "Design a personal blog with categories, posts, and a comments section" or "Design a subscription service with pricing plans and signup." All of these prompts were essentially training AI to know how to create these applications in different ways. Sounds like fun!

Deadline: The hackathon kicked off on Thursday and was due on Sunday.

Project Selection: Participants could select their project from a set of prompts, such as:
- "Create a business directory with categories, reviews, and contact info."
- "Design a personal blog with categories, posts, and a comments section."
- "Design a subscription service with pricing plans and signup."
Submission Limit: Each participant could submit up to five entries.
Technology Requirement: The only strict requirement was to use LLM and AI-based technology to build the app(s).
Design Requirement: Participants had to submit a detailed design, possibly to evaluate how closely the final product matched the original vision or to ensure that all steps of the Software Development Lifecycle were followed.
Use of Real Data: Not required—performance and visual appeal were the main priorities.
AI Assistance: AI was expected to handle most of the coding, aligning with the contest’s emphasis on AI-driven development.

Jumping into AI Headfirst

A cartoon character with a cheerful expression sits on top of an open laptop, surrounded by colorful icons and gadgets. — This is what the Bing AI Image Creator thinks jumping into AI Headfirst looks like

I got into AI a little bit myself. I created an open ai scheduler that takes input in the form of line items of things you have to do today. It then organizes them in order and explains why. Pretty simple, right? But it involved creating a system prompt, a user prompt, and building both a front end and back end to talk to OpenAI. I also had to make it look decent. This was actually for a job interview... more on that later. But it was an excuse to get deeper into AI.

I also work for a company that trains LLMs. They train a variety of models—voice, image, text, and files. If you're a detailed note-taker and want to learn how to write prompts and code that you can use in your own projects, it might be the gig for you. Tell them I sent you with this link: Outlier.ai. The bonus? You get access to about six or seven LLMs, including Claude, Grok, Llama, and GPT models—a $200/month value. You do need to qualify and pass an assessment, but if you're here, you should check it out.

Lastly I have a line of coloring books on Amazon that I created with a series of AI prompts in ChatGPT and Bing Image Create(DALL-E 3). You would think I was an AI Prompt Engineer.(Which is becoming a thing.)

The Game Plan: Build Fast, Build Smart

So I started out trying to build five applications from the list and enlisted the help of a fraternity brother in Kappa Alpha Psi, Fraternity Inc. and a fraternity brother in code, TenK. With just four days to build, we needed a solid architecture and a way to spin up apps quickly since they had to be separate for the contest.

I've been playing with Wix Studio and its advanced coding features, so I pushed for that. Wix basically built what I was trying to create in my React-based CMS Application. It’s a React/Node.js-based web application builder backed by a headless CMS (Sanity.io) instead of a PHP-based MySQL system like WordPress. This is much easier for me and any JavaScript developers to work with. In fact, a past company I worked for used it for their marketing site before shutting down while we were cleaning up my code. So, Wix Studio it is!

I also chose Wix because a requirement of the contest is to submit a detailed design. I guess they want to see how far off you are or they want to make sure if you had a project already that you completed all steps of the Software Development Lifecycle. Anyway, Wix has a plugin for Figma that allows you to import your Figma frames as Wix Widgets! This is awesome for rapidly building the front end.

Wix Studio is also very developer-friendly and is essentially a React/Node.js development environment. The Node packages you can install vary with the type of app (widget, dashboard, custom elements...). Your level of Wix plan also dictates which types of apps you have access to putting on a site.

Re-Enter: The Mobb App

The idea we landed on was the Mobb app, a map of Black-owned businesses. You can check out a "geo-visual" (go ahead, use that word—I’m used to starting phrase trends 😉). This app has gone through several iterations—five or six versions, at least. We’ve worked on it with different coder friends, within a small business I previously started, and even at fintech companies I worked for. I even had the CEO of my company pushing our dev team to bring it to life. Big shoutout to A. Pritzner & T. Chang! But we always stalled due to lack of manpower. With AI handling most of the coding (as per contest rules), we figured we could finally get something up and running.

The Data Journey: From Heroku to CSV to Google

Diagram illustrating the data journey from CSV files to Google, highlighting key steps and processes involved. — This is what the Bing AI Image Creator thinks The data journey looks like

Then came the data challenge. The data is a CSV that has been passed down through different versions of the app and compiled from various lists online. It used to live on Heroku, then MongoDB, and even some obscure database services in previous iterations. Now, it lives on universally as a CSV—a relic, an artifact of previous attempts, the last survivor of many a migration. (any other Survivor(https://www.cbs.com/shows/survivor/) fans out there?) Anyway, this data would be great for production use, but the contest rules stated that real data wasn’t required—performance and visual appeal were the priorities.

But here’s the thing—Google Maps already has a solution. Businesses can self-identify as Black-owned, and I can tap into that using the Google Places API.

The plan? Marry the two datasets. The CSV data is like an old family photo album—historical but a little incomplete. Google’s API is like Ancestry.com, ready to fill in the missing details. The final version of the app will use both. The CSV will provide legacy data, while Google will keep things fresh. If conflicts pop up, businesses will get a nudge to sync their profiles. Maybe later, I’ll even build a feature where businesses can sync with Google directly. But first, I’ll need caching strategies to keep API calls under control—more on that in my upcoming post about developing the Wix Google Photorealistic 3D Maps Widget, aka the Mobb.

Final Thoughts: Lessons from the Hustle | AI-powered Wix Studio app development

So here I am at 11:59, writing a blog post instead of submitting an entry. This was my first time doing anything like this, which is why I wanted to enlist help. But we’re adults with jobs and kids... well, y’all have jobs and kids. :-) When an out-of-work developer says, "Let’s build 5-10 apps in a weekend," it’s just tough to make time.