Building a Tiny dApp with AI
Hell-Month
Hell-Month is a 4-week lecture conducted by Joel Mun, a Web3 community builder and developer. It was a valuable opportunity to learn about Uniswap and AMM (Autonomous Market Maker) and even develop them ourselves.
I was able to learn so much thanks to his passionate lectures and self-made assignments, covering what Uniswap is, how AMM works, and why it’s necessary, all despite his busy schedule. As of writing this, there are still lectures and assignments left, but I wanted to first organize my thoughts on the most recent dApp building assignment.
The result has been uploaded to github.
The Wall I Couldn’t Overcome, Frontend
Non-developers might think, ‘Isn’t all development the same anyway?’, but frontend and backend are truly different worlds. To become an outstanding Full Stack developer, you need double, no, even more effort. Most developers with office jobs belong to one of these two areas, but if you want to build a personal service, you must know both fields.
I, too, challenged myself with frontend multiple times with the thought of becoming a service developer. However, in the harsh reality of being swamped just trying to master the backend technologies I use for work, it wasn’t easy to study frontend, which I don’t even use, starting from the concepts.
I remember feeling envious watching a junior colleague, who had frontend experience from being suddenly thrown into a project in the past, build a service all by himself. At that time, I just felt sorry for my junior colleague who was struggling with an unwanted task, but looking back, I was able to realize through him that developers truly grow by tackling things head-on.
Launching a Frontend with AI
Personally, I think the reasons why frontend development is well-suited for AI assistance are as follows:
- Standardized patterns: The screen composition and functions of websites that people prefer are mostly similar.
- Abundant learning data: AI has learned from numerous websites and can propose the most common and efficient methods.
- Advancing development tools: Tools that facilitate deployment and management are continuously emerging.
In conclusion, it means that with AI, you can sufficiently build ‘a website similar to what others make’. Coincidentally, this Hell-Month’s assignment was ‘To develop an AMM-based dApp utilizing AI’, so I decided to use AI properly.
For reference, the AI tools I am using are listed below:
- windsurf: An AI-based IDE tool. When many people were using cursor, I used windsurf from its early versions because it was cheaper. Thanks to that, I am still using the $10 plan (early bird user privilege).
- gemini: I am using it because I got free credits. Personally, I think gemini gives more accurate answers for coding than gpt. However, if you want interaction like a real conversation with a person, gpt seems better.
Additionally, the model I used for coding in windsurf is claude-sonnet-4. I’ve been seriously considering paying for claude code recently to try the paid version. The price is high, and my main job is to check and refactor code one by one, so I hadn’t felt the need to entrust an AI with building a web service from scratch. However, since the assignment this time was ‘a backend developer with no frontend knowledge doing context programming with only pre-made solidity contracts’, I wanted to test the performance of claude-sonnet-4, so I used it. Of course, as of now, claude-sonnet-4 costs about twice as much in tokens as other models in windsurf.
opus-4 required significantly more token costs + I had to get a separate API key from Anthropic and charge the cost to use it, so I judged it was not suitable for testing so-called ‘vibe coding’ through this assignment. However, I will write about my thoughts on this later as well.
Creating Rules
Numerous videos recommend ‘injecting good rules and context into the AI agent before using it’. In a recently read book, Dual Brain, it also mentions that the more you explain to the AI, the richer the answers it can provide based on that content. This is actually a very obvious story. Because AI cannot read our thoughts and answer, we must be able to provide the maximum information to the AI to get the answers we want. And we also need to provide a guide for the work to proceed in the direction we want. As I said before, this is because AI cannot read our thoughts. Of course, people like us can’t read other people’s thoughts either.
Actually, I have never created a rule while using AI so far. I would tell it the location of the code that might have a problem and solve the problem in a conversational way, organizing my thoughts on which part seemed to be the problem. However, this was the first time I was entrusting the AI with a task of creating something from nothing, like this assignment, so I decided to try making a proper rule.
They say the structure for making a good rule is broadly as follows:
- You must be able to explain the purpose of the service development and the desired outcome as specifically as possible.
- You must clearly define the technology stack you intend to use.
- You must provide a guide so that the work can proceed step-by-step. If this is not clarified, the AI may also execute multiple tasks haphazardly. Therefore, you should have it solve tasks one by one using checkboxes and get confirmation at each stage.
- The AI might automatically modify code or move to the next step. If you don’t want this, you must be able to instruct it clearly.
There were several other things, but first, I created the following rule based on the four criteria above.
# MiniAMM DApp Development Checklist
## Step 1: Initial Project Setup
- [x] Create Next.js + Typescript project
- [x] Install essential libraries like Ethers.js, RainbowKit, Wagmi
- [x] Install TypeChain and configure for TypeScript integration from ABI
- [x] Set up `static` variables or environment variable file to manage each contract address
## Step 2: Wallet Connection and Basic UI Composition
- [x] Implement wallet connection button and functionality using RainbowKit
- [x] Initial screen composition for when the wallet is not connected
- [x] Display MiniAMM's total liquidity (TokenA, TokenB quantities)
- [x] Add UI to display user information after wallet connection
- [x] Display user's TokenA, TokenB balance
- [x] Display user's LP token balance
- [x] Secure UI space to show transaction error messages
## Step 3: Implement Mock Token Minting Function
- [x] Implement UI (input field, mint button) to mint TokenA and TokenB respectively
- [x] Implement logic to call `freeMintToSender` function of MockERC20 contract when 'Mint' button is clicked
- [x] Real-time update of user's token balance after minting
- [x] Error handling and message display during the minting process
## Step 4: Implement Add Liquidity Function
- [x] Implement UI to input quantities of TokenA and TokenB to supply
- [x] Implement logic to call `addLiquidity` function of MiniAMM contract when 'Add Liquidity' button is clicked
- [x] Real-time update of user's LP token balance and total liquidity after adding liquidity
- [x] Error handling (e.g., insufficient balance) and message display during the add liquidity process
- [x] Automatic approve feature: Automatically handle necessary token approvals on button click
- [x] Balance validation: Check user token balance before transaction execution and display error if insufficient
- [x] Step-by-step progress display: Clearly guide the user through the approve → add liquidity process
## Step 5: Implement Swap Function
- [x] Implement UI for selecting swap token type (A→B, B→A) and inputting quantity
- [x] Calculate and display the estimated swap result quantity in real-time based on the input amount
- [x] Implement logic to call `swap` function of MiniAMM contract when 'Swap' button is clicked
- [x] Disable 'Swap' button while transaction is processing
- [x] Real-time update of user's token balance and total liquidity after swap completion
- [x] Error handling and message display during the swap process
## Step 6: Implement Remove Liquidity Function
- [x] Implement UI to input the quantity of LP tokens to remove
- [x] Implement logic to call `removeLiquidity` function of MiniAMM contract when 'Remove Liquidity' button is clicked
- [x] Disable 'Remove' button while transaction is processing
- [x] Real-time update of user's token/LP balance and total liquidity after removing liquidity
- [x] Error handling and message display during the remove liquidity process
## Step 7: Deployment
- [x] Prepare web application deployment via Cloudflare Pages
- [x] Configure Next.js static build (output: 'export')
- [x] Fix TypeScript errors (any → unknown type change)
- [x] Install Wrangler CLI and authenticate with Cloudflare
- [x] Create Cloudflare Pages project (miniamm-dapp)
- [x] Final testing and deployment completion
**Deployment Result:**
- Main Domain: [https://miniamm-dapp.pages.dev](https://miniamm-dapp.pages.dev) ✅ (Operating normally)
- Deployment URL: [https://27e7e9a0.miniamm-dapp.pages.dev](https://27e7e9a0.miniamm-dapp.pages.dev) ⚠️ (SSL error - normal phenomenon)
- Uploaded Files: 200
- Deployment Status: Success
The above content is the result of my final development wrap-up. I divided the development scope into a total of 7 steps, and configured sub-items for each step in a checkbox format so I could mark them off as I solved each one.
One of the biggest reasons for using the checkbox format was due to the limitations of the AI’s memory. Since it left a written record of the content it had processed so far, I always made it proceed based on this file to prevent it from wasting tokens by performing completed tasks redundantly. Additionally, I had it get final confirmation from me every time each step was completed, but even so, there were cases where it moved on to the next step and implemented features on its own. I thought I needed to check if there was a better context writing method to prevent this.
Also, I realized I absolutely had to commit every time each step was finished. Occasionally, even for a feature that was already well-written and confirmed, the AI would modify the previously completed feature on its own while developing the feature for the next step. As the amount of code increased, it was difficult to track where the problem occurred when the program went wrong due to an unexpected change by the user. I thought the best way would be to commit as many times as possible during each development stage, but this would leave too much history and could actually hinder tracking. So, I made the commits myself every time each step was completed. Later, as my context writing skills improve, I thought it would be good to have the AI make the commits directly.
Result
This website is a simple website that implements Uniswap.
Conclusion
After actually using it, I found that it completed the development up to step 6 of the above steps almost without errors. When I got a different result than I expected while testing step-by-step, if I explained the desired result well along with the error message, it also showed the ability to solve the error in almost 1-2 attempts.
However, tasks using external services, like deployment, required a bit of guidance. I was trying to deploy using Cloudflare Pages, and partly due to my lack of experience, the AI kept throwing a ERR_SSL_VERSION_OR_CIPHER_MISMATCH error and couldn’t solve it, giving me a hard time. I found out later that this SSL error was a common phenomenon that could temporarily occur during Cloudflare Pages deployment. If the main domain was working properly, the deployment was successful.
The interesting thing is, it was also AI that told me the above. Since the error wasn’t getting resolved, I reverted the code to the version where the previous step was completed, opened a new AI window, and tried the conversation again. I had it check the checkbox indicating the previous step was completed and try to deploy again. I was able to realize again the importance of maintaining a document so the AI can review its own progress history, and I also learned that how much more information you provide is definitely an important part, as AI doesn’t always produce the same result.
Additionally, through this assignment, I came to think that ‘services that general users think of and want to implement can almost all be created using AI’. It would require more attempts for complex systems, but it seemed possible to implement most features using AI. However, it seemed that the ‘realization of the reality of vibe coding’ that many people talk about is necessary. For those with no IT knowledge at all, or those with insufficient knowledge, it seemed difficult to verify the service even if AI builds it for them. In the end, it seemed that the ‘ability to review whether the work is being done properly’ is definitely necessary. While it was important in the past to be a person with a deep understanding of one technology, I thought we are moving into an era where it’s important to be a person who can quickly select the features needed for the service I want to develop, quickly understand new features, and provide various options and abundant information to the AI.