Building An App To Sell With ChatGPT

Follow along as I build an app to sell with ChatGPT.

It all started with this Tweet:

Taking a page out of @byhazellim - thought this would be fun DeveloperGPT creating an app with a $100 budget to sell at No Code Weekend

Here are a few updates...

These were the first suggestions:

Prompt: "if we want to 10x our investment, how would you go about allocating your $100 budget?"

Poor budgeting skills by ChatGPT

Change of Plans: No-Code Mentor was born

Change of plans!

Clarity FM for No-Code folks”

Ughh – ChatGPT was down for 3 days 👎

We're back up! I had ChatGPT design the base and I must say, it did a great job 🥳

We have our domain!

Coming along nicely...

Softr example
One of my fav. ChatGPT functions: generating fake data QUICK :)
Sorry about that. In that case, we need to adjust the formula to account for Daylight Saving Time (DST) changes that occur on different dates in different time zones. Here's an updated formula that should adjust for DST changes for all dates:
I think we all hate timezones! A minor tweak with explaining my issue and it was no problem for ChatGPT :)

Our Airtable database is all set up.

Asked ChatGPT to provide step-by-step directions on “next steps” and set up our site on Softr (Affiliate link). Here is what it said:

I removed Steps 1 and 2 since it was only instructions to sign up for Airtable and Softr.

Step 3: Create Pages in Softr 3.1. Home Page:

  • Add a hero section, search bar, and featured experts section to showcase top experts.
  • Add a categories section to display different areas of expertise.
  • Include a sign-up/login call-to-action (CTA) for users and experts.

3.2. Categories Page:

  • Display a list of categories with descriptions.
  • Add a filterable and searchable list of experts in each category.

3.3. Expert Profile Page:

  • Display expert's name, title, bio, hourly rate, average rating, and profile picture.
  • Include a booking button that leads to the booking page.

3.4. User Profile Page:

  • Show user's name, email, phone number, and profile picture.
  • List user's bookings and allow them to manage their appointments.

3.5. Booking Page:

  • Display the expert's name, title, and hourly rate.
  • Allow users to select a date, time, and duration for their appointment.
  • Include a payment processing feature for booking.

3.6. Ratings & Reviews Page:

  • Allow users to rate and review their expert after a completed booking.

Step 4: Set up User Authentication 4.1. Go to the "Settings" section in Softr and click "User Authentication." 4.2. Configure user registration and login options (e.g., email/password or social media).

Step 5: Configure List and Details Blocks 5.1. Use the "List" block to display experts and categories in a grid or list format. 5.2. Use the "Details" block to show more information about the selected expert, category, or booking.

Step 6: Set up Filters and Search 6.1. Add search functionality to the home page and categories page. 6.2. Implement filters for expert listings by category, availability, and rating.

Step 7: Set up Booking and Payment Integration 7.1. Choose a payment provider and integrate it into your Softr app. 7.2. Configure the booking process to create new records in the "Bookings" table in Airtable.

Step 8: Configure Email Notifications 8.1. Set up email notifications for users and experts when a new booking is made or updated. 8.2. Notify users when their review is posted.

Step 9: Test and Launch 9.1. Thoroughly test your Softr app to ensure everything is working correctly. 9.2. Publish your app and share it with your target audience.

I then asked it to provide some sample copy for the Home Page and it gave me this:

3.1. Home Page:

Hero Section:

  • Heading: "Discover No-Code Experts for Any Project"
  • Subheading: "Connect with top professionals to help you build, scale, and launch your no-code projects with ease."
  • Button: "Explore Experts"

Search Bar:

  • Placeholder text: "Search for no-code experts by name, skill, or category"

Featured Experts Section:

  • Heading: "Top No-Code Experts"
  • Subheading: "Our most trusted and experienced professionals, hand-picked for their exceptional skills."
  • Expert Card: Display expert's name, title, profile picture, average rating, and a "View Profile" button.

Categories Section:

  • Heading: "Browse No-Code Expertise Categories"
  • Subheading: "Find the perfect expert in any field to bring your project to life."
  • Category Card: Display category name, description, and a "View Experts" button.

Sign-up/Login CTA:

  • Heading: "Join Our No-Code Expert Community"
  • Subheading: "Sign up today to connect with experts, book appointments, and start making progress on your no-code projects."
  • Button 1: "Sign Up as a User"
  • Button 2: "Apply as an Expert"

To be continued…