Day 4 TextbookExpanding Features and Improving Quality β€” Change Specification, Implementation, and Regression Validation Guide
🏫 AI Self-Study Classroom
ACE AI Startup Bootcamp Β· Self-Study Textbook
D4

Expand Service Features and
Improve Quality

Move beyond the MVP and develop a polished service

πŸ”‘
Chapter 1
Feature Expansion Principles
🎨
Chapter 2
UI/UX Improvements
πŸ—„οΈ
Chapter 3
Data Persistence
πŸ§ͺ
Chapter 4
Testing & Quality Validation
Training Provider
ODA AI SW Β· ACE Program
Course
AI Web Development for Aspiring Founders
ACE AI Startup Bootcamp Β· Day 4 Introduction and Feature Expansion Principles
ACE AI Startup Bootcamp Β· Day 4 Self-Study Textbook

Expanding Service Features and Improving Quality

πŸ“š Building on the MVP created on Day 3, you will add features that improve the user experience.
You will not build a completely new service. Continue from the existing PROJECT.md and index.html files.

1. What Are We Doing Today?

Day 4 Key Principle: Feature increases are always "Current status β†’ Changed goal β†’ acceptance criteria" I'm asking in order.
If you say to AI, "Add this, add that", the existing code collapses.
πŸ”
Goal 1: Improving UX
Search, filter, sort feature makes it faster for the user to find what they want.
⚠️
Goal two: Error handling
It shows empty input, wrong value, kind guidance messages in exceptional situations.
✨
Goal 3: Improve your performance
It adds sophisticated experiences like loading state, toast messages, soft screen switching.

2. Feature Expansion vs. Building a New Service

Today's key principle is to continue from the existing files. Why does this matter?

Reboot from the new file.
"Make it from scratch".

The problem is:
Day two or three, the design disappears.
β€’ An existing feature is missing from the new code
β€’ PROJECT.md and the actual code are inconsistent
β€’ Waste of time
βœ… Add feature to existing files
"Add the OOO feature to Exxon index.html".

Advantages:
β€’ Maintaining the existing feature
β€’ Maintain alignment with PROJECT.md design
β€’ Clear scope of change
β€’ I am limited in error
Self-Study AI Web Development Textbook for Founders Page 1 of 5
ACE AI Startup Bootcamp Β· Day 4 Choosing a Feature and Requesting It Safely

3. Choose the Feature You Will Build Today

When the MVP basic feature is complete, choose the one that fits my service from the two tracks below.

track a user-friendly feature added

Search + Filter + Favorites
Features that help users quickly find items in a list and save the ones they like

  • Text search: real-time filtering by name/subject
  • Category Filter: Classify by clicking on the button
  • Favourite: Save/resolve with the heart button (localStorage)
Track B error handling + data management

Input Validation + Delete/Edit + Statistics
Features that safely handle invalid input and edit requests

  • Form input validation: empty spaces, incorrect format error message
  • Delete items: Check pop-up and delete after pop-up
  • Summary statistics: total number, completion rate, etc.

4. How to Request a Feature Safely

The format of your request to AI is critical when adding a feature. Current state β†’ change goal β†’ acceptance criteria Always include all three.

πŸ“ Example 1: Add Search

Antigravity request: [Current status] On index.html's helper list screen, three of the dirty data is shown as a card. [Changing goal] Add a text search input window to the top of the list, When a user enters a name, they filter only the card containing that name in real time. [Conditions] - Don't change the old card style. - If there are no search results, "No search results" message is displayed. [acceptance criteria] If you type "box" in the input window, you'll see "box book" only, and if you type "yi" you'll see an empty state message.

πŸ“ Example 2: Add Favorites

Antigravity request: [Current status] The helper card list is displayed and when you click on the card, go to the detail view. [Changing goal] Add the heart button on the top right of each card. When you click on Favorites on/off toggle (Save to localStorage 'favorites' key) Add the "Just look for fun" filter button to the top of the list [Conditions] - Turn the card button so that the event doesn't collide with the card click - Favorite on condition: ❀️ red, off condition: gray [acceptance criteria] When you click the hard button, the color changes, and even after the page is reopened, the preferred search remains complete.

πŸ“ Example 3: Validate Form Input

Antigravity request: [Current status] There's a date and time field on the booking application form. [Changing goal] Add validation below at the time of submission of the form: 1. Select the date error when entering the date. If the selected date is earlier than today, "Please select a date after today" error is displayed. Only when all validation passes is the application process completed. [Rolling mark] The error message is displayed with a small red text below the input [acceptance criteria] Date input β†’ error message display, normal input β†’ complete screen when you go to complete
Self-Study AI Web Development Textbook for Founders Page 2 of 5
ACE AI Startup Bootcamp Β· Day 4 Improving User Experience: Errors and Exceptions

5. Error and Exception Handling for Better User Experience

A good service is not just "being good", but "being kind when used badly".

The situation.I'm not doing well.Good work.
Necessary input key Just submit or save empty values without errors. Under the relevant input window, "This item is required" is indicated.
There are no results. Just display the blank screen. "No search results. Please change the conditions" + button
Click on the delete button. Delete immediately "Do you really want to delete it?" Check pop-up after deleting
Long text input The screen breaks. Maximum number of characters plus "OOO please enter"
I'm working on it. The button's not responding. Change the button to "in process"... text and disable the click.
Self-Study AI Web Development Textbook for Founders Page 3 of 5
ACE AI Startup Bootcamp Β· Day 4 Practice: Four Steps for Feature Expansion

6. Today's Practice β€” Expand Features Step by Step

βš™οΈ Practice 1 β€” Update PROJECT.md for the Feature Expansion

Before you add a feature, you record the feature you want to add to PROJECT.md first.

Codex request: Add the following feature to PROJECT.md's ##7. [Additional feature] - Text search: real-time list filtering by name - Favorite search: save/unlock with the heart button. Write the acceptance criteria together for each feature. Don't change the existing Must feature.

βš™οΈ Practice 2 β€” Implement Search

Antigravity request: [Current status] Three cards are shown on the existing index.html list screen. [Changing goal] Add a search entry window to the top of the list screen. Filtering cards in real time with input values. [acceptance criteria] Only display matching cards when text is entered in the search window. Empty State message is displayed without results.

βš™οΈ Practice 3 β€” Strengthen Input Validation

Antigravity request: [Current status] There's a reservation/request form and you can go to the completed screen when you submit it. [Changing goal] Added field validation prior to submission of form: 1. If all the required inputs are empty, display the error message below the corresponding field. If there is an error, stop submitting the form. 3. If there is no error, the existing completed processing process will proceed. [Styles] Error message: red, font-size 0.82rem, displayed under foot [acceptance criteria] An error message is displayed when submitting the blank form, and after submitting it correctly, the completed screen appears.

βš™οΈ Practice 4 β€” Add Toast Messages

Antigravity request: [Current status] There's a completed application screen. [Changing goal] When the application is completed, the screen switches instead or additionally, Add a toast message that disappears after 3 seconds in the bottom right: "Your application is complete!" [Styles] Background: #16a34a (green), text: white, border-radius: 10px position: fixed, bottom: 24px, right: 24px This is a fadeIn/fadeOut animation. [acceptance criteria] When you click the request button, the message appears at the bottom right, and it disappears after three seconds.
Self-Study AI Web Development Textbook for Founders Page 4 of 5
ACE AI Startup Bootcamp Β· Day 4 Independent Practice and Checklist

7. Challenge: Two Independent Practice Projects

πŸ† [Independent Project A] Add Sorting

On the list screen, add the sorting button "Name A–Z/Name Z–A/Lowest Price".
When you click a button, you have to change the order of the cards.

πŸš€ [Independent Project B] Add a Summary Dashboard

Add summary statistic cards to the home screen.
Example: "Number of registered helpers: three" / "My reservation number: two" / "Enjoyment number: one"

8. Day 4 Completion Checklist

  • Before adding the feature to PROJECT.md should be recorded first with the item
  • Additional feature used the "current status β†’ change goal β†’ acceptance criteria" format when requesting
  • The search feature is running, and there's an Empty State message.
  • Input validation has been added to the form.
  • The error message is displayed under the input window.
  • The toast or finish message is clearly displayed to the user.
  • After adding the feature, the existing core flow is still running normally.
  • I've updated the VALIDATION.md.
πŸ“Œ Next β€” Day 5: Final Validation, Deployment, Presentation, and Improvement
We're deploying the finished service to GitHub Pages today, and we're preparing a five-minute presentation.
Self-Study AI Web Development Textbook for Founders Page 5 of 5