You must be wondering now if you have landed on the wrong
post or probably be even thinking about why am I even talking about my first
blog here where the title says how I built an app. Yes that’s where the idea
actually got planted in my head, but the execution was slightly delayed ( only
by 15 years).
While I was writing and posting my blogs in my blogger profile.
I wanted a beautiful landing page for it. Something like a portfolio page and
then have a section for all my social media profiles, which I have it in the
form of menu in the current theme. But
the portfolio page is still not built, or basically I do not have enough achievements
to boast about myself. I’m content with the brand that it is now. As I kept expanding
my social presence from blogs to vlogs to podcasts I kept adding the menu
items. So wherever I get an opportunity to post a link be it WhatsApp,
Facebook, Instagram I paste my blog link (www.zakapedia.in)
so people can land on my blog and if they happen to see the menu they go around
to explore my other avenues. Then one day I happened to see the Linktree app
two years back. It was a simple concept, a landing page with URLs to all the
social media profiles. No portfolio page, no content, just the links. A simple
solution but added more value. I could
have easily created another profile in the app and added my links, but me being
me, I thought why not build my own webpage in the same concept. No additional
app, no additional permission of my Google profile to another app, just a
simple HTML page that will sit in my blogger page. The idea remained un implemented
Cut to 2026, today the world revolves around AI, and chasing
it I even ended up paying for a subscription for the first time ever.
I was recently introduced to Claude in my workplace and it
was instant love at first sight. I am so much in love that I have installed it on all my personal devices.
Now that I have subscribed
to the pro plan, I cannot let it go waste right. I made a vow to use it meaningfully
(value for money – typical middle class mind-set). So I keep discussing some
random thoughts / ideas and stuffs with it whenever I get free time, I started
using it for everything and every time and that’s how I built InkNeighbour
(live) and WellNest (parked for now). Ok what next now. That’s when I
remembered Linktree. Now with Claude I can go back and build my own portfolio
page which was my first wish, not that I have achieved enough, but I need not
worry about the content. It will fill the page with some context. But again me
being me, I thought everybody can create a portfolio page now with AI do I do
the same and be that sheep in the herd. Naaah, let’s build the Linktree clone
app. But it will not be just a clone app, it will be something which is
different from Linktree. So how did I start.
Step 1: Discuss the idea with Claude
I opened the Claude Chat (there are different options available in Claude – Code, Dispatch, Cowork) and put in the idea.
“I want to build an app which is a clone / should have features
like Linktree app. But I want some additional features as well what do you suggest”
The best part about Claude is that it always jumps in to
give the solution like a fish wanting to get to the ocean. It tries to code wherever
and whenever it senses an opportunity. Like if you give it two texts and ask it
to compare, it will compare but also ask you if it can generate a quick python script
to compare and run it locally. So for my idea it gave me a detailed feature
list and it also gave me the analytics feature for tracking the views and
clicks in the user profile as and added feature which is different from
Linktree app. It also gave me an option to monetize the analytics feature. The
profile creation is free but if the user wants to view the analytics they have
to pay a premium. But then we are building an app which is different from the
original one. So I decided nothing should be paid, everything in the app should
be free.
And while we (Me and
Claude) were discussing I remembered I had an NFC card. Basically we can
program the NFC card trigger any automations. For example the tap to pay feature
in your credit and debit cards works with NFC technology. It’s a cool tech to
have. I thought why not program an NFC card with the profile link which the
user is creating and let them tap on others phone to share their profile. Sounds
cool huh, so asked Claude to it add it, but now I had decided to charge the
user, because I have to spend some money in buying and printing the NFC card. Also
there is a catch, not all phones are enabled with NFC what can we do about it,
that’s when I introduced the normal visiting cards, but instead of having text
it will have a cool QR code to scan and land on the profile page. I understand
that it’s an overkill with people going digital, no one would prefer a cool QR
code. But that’s ok, anyways Claude is going to build the feature, let it
build.
Once the features are locked in I asked it to create a
PRD.md (Product Requirement Document). Since I have already built a couple of
apps before it knows my preference. If it’s a first time, it will ask you few questions on what technologies
you want to use to build the app and the best part is it will also suggest
where to host it and the available free options. I’m used the suggested apps,
solely because they were literally free.
1.
React native for app (easy to convert to mobile
app in the future)
2.
Supabase for the database ( two projects free
with limited bandwidth, ideal for an app with small user base)
3.
Vercel for deployment. Unlimited deployments and
provides free SSL certificates. You can also connect to the GitHub for automatic
deployments.
Once it generated the PRD I review it for any flaws. It will
sometimes put in something which I would have rejected during the discussion.
So it is always better to check.
Step 2: Upload the PRD to GitHub
Once the PRD is clean with the features I intended, I create
a new repo in GitHub and uploaded it. This is our starter point. Now there are
two ways you can start generating the app. I’ll tell you my favourite one
because this method makes me feel more productive.
I use Claude Code on mobile. It has options to connect to my
GitHub. Once connected it can scan the repo, make changes to the repo and
generate code. Now that I had already uploaded my PRD and given access to my
repo, I started a new session and asked Claude to prepare a feature list to
implement from the document and start implementing one by one. The beauty is
that it automatically creates a new branch and starts creating the app. The
reason I asked to implement feature by feature is because sometimes it becomes
overwhelmed and starts implementing start to end in one go and end up having a context
too long error. Once the code is
generated it will ask you to do a pull request. You can either do it and merge
it to your main branch or have it in the feature branch.
The reason why I feel more productive in this approach is that. I do this while I’m travelling or not near my laptop. Open my mobile, ask Claude code to summarise and give me a to do list and just ask it to implement one by one all while I’m in a crowded metro or a hospital waiting area or at a family function waiting for the ceremonies to be over.
Step 3: Clone the GitHub repo on Laptop
Once I’m home I quickly clone the repo (download the code from GitHub) on to the laptop and build it once. Now comes the reality check. Will it work in the first go. Absolutely not. Will it be as you expected – Nopeeeee. But the good part is it will be a good boiler plate code with all the features implemented so that I don’t have to start from the scratch.
Step 4: Open Claude CLI on the folder and start refining
the app.
So we had an
idea, discussed with Claude to make it a proper app with features to stand out.
We coded the (asked it to code as well) app while traveling and now we have it
our system up and running. We can talk our way through to refine the app as
much as to our satisfaction. Now since I know some coding (trying to be humble
Ahem ahem) I can work my way through when things don’t work out or if a feature
is not working the way I want. There would be scenarios where one wrong prompt
and the entire code would go in circles. For example if I see a bug and ask
Claude to fix it, it will fix it and introduce a new bug. And the cycle will
repeat. I see this when I’m very particular about a design change. I sometimes
end up burning my entire session limit just for placing a logo at a position. That’s
where I roll up my sleeve and get my hands dirty. Otherwise it’s just pure
chatting, people say Vibe coding. But in my mind I’m the Tony Stark who is
working with Jarvis. Will soon build that too one day and tell you guys. Well coming
back to our app, most of the development happens on the laptop and slowly you would
see the idea coming to reality.
The Loop of reality
While I build an app, it usually takes about two to three
weeks before it becomes a fully functioning one. The reason being I only work
on the weekend and try to build it as much as possible. Most of the times I end
up not finishing the entire list of features I intend to fine tune. In that
case I save the code and check-in (upload) it to the same feature branch which
Claude initiated. Then I continue in my mobile the same session with Claude
Code.
Sometimes I get some new ideas too while doom scrolling, in
that case I go back to chat where the initial PRD was created and continue to
update it with the new features. And the
loop continues, I upload the updated PRD and ask it look for additional
features and start building it.
So the cycle is always like this whenever a new idea pops up
I discuss it in the chat and come up with the PRD. Then I upload the PRD to ChatGPT
to act as a critic and validate the idea and features. It does a good job in
validating and I ask it to give me suggestions. We literally fight in some
cases with me justifying why a particular feature will work and it giving me a
reality check. I eventually end up asking suggestions based on the
conversations and take them back to Claude to refine the PRD. And it’s always a
good practice to refine this document with as much as details as possible
including the tech stack and the coding patterns or the UI design decisions. Because
this is where we start the boiler plate code and if this is vague or not clear,
you will have to rewrite the entire codebase again, while Claude is the one who
is doing to heavy lifting here but we end up wasting tokens which is going to
be equivalent to gold in the near future. Hence I spend my entire week refining
the PRD and then building the boiler plate code. Only to open my laptop in the
weekend and start the actual work.
It is also good for
the session limits that are in place with Claude. There are session limits
which gets reset every 4 or 5 hours and there is weekly limit as well. I plan
to keep maximum weekly limit for the weekend and on the weekdays I just use it
for chatting and preparing the PRD. My goal will always be utilise the weekly
limit. As I said typical middle class mentality get as much as value as
possible for the shoot paid.
Step 5: Deploy it to distribute to the world
The idea is now a full blown app, but it’s still running in
my laptop. We have to deploy (host it) somewhere so the world can see it. Now again
as the AI suggested there are a couple of free platforms where we can deploy
the app.
1.
Netlify
2.
Vercel
I chose Vercel simply because it can connect to both Supabase and GitHub
Why am I building Tap in the first place
Well, to be honest I really don’t have a reason. I did not
build it make a revolution or make it a stand out product. I had a dream and instead
of adopting a product which was already available in the market now I have the
power to make it with my own hands. It is as simple a that. I can add wherever
features I want to and delete a feature that I no longer need. With generative
AI everything is possible, the limits are only your creativity and the
knowledge is democratized.
It can change lives for sure, but the caveat is it is not
cheap either. AI is definitely a costly affair and we would feel it in the
upcoming years. I wish it becomes more an empowerment tool t to the common man
rather than being a source of unlimited money to the selected individuals.
What did I learn out of it?
Well technically if you ask me did I learn a new technology (React
and PostgreSQL) the answer is like MS Dhoni answering about his retirement from IPL
(Definitely Not). But I definitely learned how to orchestrate the AI to be a
captain who steers the ship. Now I know when to clear a session, when to create
a skill and when and how to use a plugin. Also the various MCP’s available and
how to invoke them. I certainly refined my art of of creating a well documented
PRD which magically turns into an app in a week’s time.
I have learnt about the AI models available and what suits
best in various scenarios. How to connect them to my app, what will be the cost
implications and how to control them. Most importantly how to tackle a bullying
AI (I have personalized ChatGPT to be my critic). Hope the learning doesn’t
stop here and I continue to learn..
What do I ask from you as a reader
If you think
my apps are useful or make sense to you try using it. Your feedbacks are always
give me an additional perspective and scope to improve when I build my next
app. Though there is a sense of satisfaction when you build something and see
it working out there.
There are times when the emotions take over, and you start questioning yourselves why are you doing this when you can spend time with your family and kids. You spent the entire week working at office and in the weekend you do something again which is related to work. It’s not that I don’t enjoy doing this, but there are times when things don’t go your way. Fifteen years ago I wanted a simple page for my blogs. I had the skills to build it, but not enough motivation to spend weeks turning a small idea into working software. AI changed that equation.
Today I built an app while waiting in hospitals, travelling
in metros, and sitting through family functions. AI has reduced the distance between an idea and
execution.
Sooooooo what I’m trying to say izzzzz.. Chinna payaan enna support pannungaaa.
As people usually say Like karo, Share karo, Subscribe karooo. In my case also login and use it.
To my well-wishers:
Thank you for your feedbacks and support. I started this blog
keeping that one text which was sent in after my last couple of blogs. Though it
is a time taking process in this AI era, the human touch will be missed soon
and I hope to keep that legacy running 🤪. And for folks who sent me texts and made calls after the Average
IT guy blog and are waiting for the next blog, I’ll not disappoint you guys
either. Coming soon.. Until then Good bye, Take care and Bye Bye…..
.png)
Before you leave here’s what I built.. Tap.Zakapedia
){kind=link}
0 Comments