How an AI Beginner Built a Web Tool with ChatGPT and Claude and Published it on Netlify | A Practical Record of Creating 'Interview Cheat Sheet': Decisions, Failures, and Insights

The summer with little rain has ended, and the days are starting to get shorter.

I've been getting bitten by mosquitoes lately, which I didn't pay much attention to during the summer. Is the hatching season delayed? Or have I just started to notice them?

Into such daily life, strong words suddenly intrude.

"AI has started to run out of control."

"Development needs to be slowed down."

I don't know if the situation is truly that urgent. Even so, once you become conscious of AI, related news catches your eye quite often.

The feeling that I'm hearing the word 'AI' more often in the news might not just be due to changes in the world at large.

The 'cocktail party effect,' where you can easily hear conversations relevant to you even in a noisy place.

The so-called 'color-bath effect,' where once you become conscious of something, you suddenly start noticing information related to it.

In my case, it's close to the feeling of inexplicably spotting only license plates like '3588' or '8008' from a car driving through town.

People unconsciously pick up information they care about through their sight and hearing.

For me, AI had also become one of those things before I knew it.

However, just looking at the news doesn't tell me what AI will bring to me.

In that case, I should try using it.

And so, with almost no programming knowledge, I decided to proceed with building a single Web tool together with AI and publishing it.

About this article

The 'Interview Cheat Sheet' is a Web tool born from my own struggles with interview preparation.

I cannot write HTML or JavaScript myself. While having ChatGPT and Claude create the code, I handled the planning, specification setting, operation verification, publishing, and user testing all by myself.

This article is not an introduction to the 'Interview Cheat Sheet' tool, but a record of 'what a person with no programming experience actually did to build and publish something with AI.' It is written for those who want to shape what they want to create with AI and publish it.

1. The Trigger

While job hunting, I had self-introductions, reasons for leaving, and motivations for applying. The answers I created while consulting with ChatGPT were scattered across multiple chats.

Even when I tried to look back at them right before an interview, I didn't know where I had written what. Answers for each company also got mixed up.

'Can't I consolidate the place to create interview answers and the place to check them right before the interview into one?'

This was the starting point.

2. Introduction to the Completed Interview Cheat Sheet

The 'Interview Cheat Sheet' is a Web tool for organizing expected interview answers for each company so that they can be reviewed immediately before an interview.

The intended users are people who are job hunting or changing jobs, especially those struggling with explaining career changes or short-term resignations, and those having trouble managing answers created with ChatGPT.

However, this is a story about 'people who use the Interview Cheat Sheet,' and it is not a story about wanting the people reading this article to use the Interview Cheat Sheet. I have someone else in mind as the reader of this article. I will explain that in the next section.

3. Target Audience for This Article

This article is intended for the following people:

• People with no programming experience who have used generative AI like ChatGPT or Claude but do not know how to proceed with 'saving code,' 'organizing files,' and 'Web publishing (deployment).'

• Beginners who are interested in so-called 'vibe coding' and want to shape and publish something they want to create.

This is not an article for people who are job hunting. It is an article for you to re-experience the 'process from a non-engineer building and publishing something' through the actual example of the Interview Cheat Sheet.

4. What is Needed for Production

What I actually used are the following:

• ChatGPT, Claude (in charge of code creation, correction, and technical validity checks)

• Netlify (a service for publishing sites)

• GoatCounter (a service for measuring the number of visits. I will explain the details in the paid section)

• PC and smartphone for operation verification (actually touch and check on both)

• Means to collect feedback from users (I will explain the specific usage in the paid section)

All of these are services that are easy for individuals to start using.

5. Costs and Constraints

To be honest, I did not leave a clear breakdown of the cost aspects in this material.

However, for Netlify and GoatCounter, there is no record of actually paying fees at the time of this production.

As a constraint, I want to tell you in advance that I did not build it with 'everything included' from the beginning. Login functions, payment functions, and cloud synchronization across devices were intentionally postponed (synchronization remains unimplemented even now).

It was a decision that prioritized 'making something that works, and shaping it quickly.'

6. Overall Production Flow (Overview)

The 'Interview Cheat Sheet' was not completed all at once, but the functions were expanded little by little.

• v0.1: Prototype with only minimum functions (state where answers for one company can be saved)

• v0.2: Expansion to support multiple companies

• v0.3: Function to add self-made questions

• Design renewal

• Preparation for publishing

The actual time taken was not accurately measured work time, but in my feeling, looking back, it was about 15 hours in total over two days. This is not a guideline that anyone can complete in the same time, but I am writing it as my own personal estimate.

7. Things I Want to Tell You First: Things Not Yet Completed

I don't want to write this as a story that was completed beautifully, so I will write honestly first.

• Monetization is still in the verification stage (the stage of confirming reactions of whether people want to use it even if it is paid is yet to come)

• Measures to be found naturally from search (SEO) are insufficient

• Data synchronization across devices is not possible (intentionally left unimplemented)

In the paid section from here on, I will write as specifically as possible about how I actually moved my hands, where I stumbled, and what I noticed through testing.

In the paid section from here on, I will introduce the following:

• Correction prompts actually sent to AI

• How to organize HTML and image files

• Publishing and update procedures on Netlify

• Pre-publishing checks performed on PC and smartphone

• Problems and correction contents found in the 5-person limited test

• Processes that can be reused for the next production