Yesterday I launched a small side project called IndieHacks and the goal was to finish this within a weekend.

Now when the time is this short, It doesn't make much sense to code the whole thing but I also can't go full no-code since this is a free project most no-code site builders require a subscription.

But I think I found a sweet spot By using Airtable as the database and NextJS. Here's how it works 👇🏼

Collecting & Storing Data

I placed an "Add New Product" button on the site navbar, Clicking that opens up the TallyForm widget.

Besides offering such a nice & clean UI, Tally also has some cool integrations including AirTable. So now when a user submits the form, Tally sends the data to my Aritable database.

The great thing about Airtable is it makes it really easy to access its DB data through API. That saved a lot of API building & management time from my end! 😁

EXAMPLE REQUEST
curl "https://api.airtable.com/v0/YOUR_API_ID/products" \
  -H "Authorization: Bearer YOUR_API_KEY"
EXAMPLE RESPONSE
{
    "records": [
        {
            "createdTime": "2022-12-01T22:52:32.000Z",
            "fields": {
                "Alternative": "Google Forms, Typeform, Jotform",
                "Logo": "https://global-uploads.webflow.com/62014002185c7b256316ef63/6227d89b340c3b27961d2158_60e345d1f48cea70e9934764_Tally.png",
                "Website": "tally.so",
                "Name": "Tally",
                "Twitter Handle": "TallyForms",
            }
        },
        {
            "createdTime": "2022-12-02T12:26:34.000Z",
            "fields": {
                "Alternative": "MicroAcquire",
                "Logo": "https://storage.googleapis.com/indie-hackers.appspot.com/product-avatars/acquirebase/200x200_acquirebase.webp?1669984457278",
                "Website": "acquirebase.com",
                "Name": "AcquireBase",
                "Twitter Handle": "acquirebase",
            }
        },
    ],
}

Retrieving Data & UI

I wrote this getStaticProps function to call the Airtable API which will revalidate every 10min. Now I wanted to only show the data that is published/reviewed by me but couldn't find exactly what I was looking for, so I added an extra look that I'm not very proud of 🥲

export async function getStaticProps() {
  const res = await axios.get(
    'https://api.airtable.com/v0/YOUR_API_ID/products',
    {
      headers: {
        Authorization: 'Bearer YOUR_API_TOKEN',
      },
    }
  );
  const data = res.data.records.filter(
    (pro) => pro.fields.Status === 'Published'
  );

  return {
    props: {
      products: res.data ? data : [],
    },
    revalidate: 60 * 10,
  };
}

Then I just looped through the data in UI and with TailwindCSS, made the site look like this.

Analytics

Umami is definitely one of my favorite website analytics tools. Besides being open source they have a very flawless way to self-host.

So thanks to umami & Railway was quickly able set up the analytics. Here's a sharable link in case you wanna check it out 👉https://analytics.indiehacks.link/share/NZkL6cYS/IndieHacks

Thanks for reading, Feel free to visit IndieHacks. We will soon launch on Product Hunt. So would really appreciate your support.