Dev Log: App UX Enhancements and Web Performance Notes

May 1, 2026

UI & UX Improvements

• Redesigned the ad and subscription sections on the meal management screen. (Testing pending)
• Updated the meal analysis ad dialog with a new visual design.
• Replaced intrusive error dialogs for high AI usage limits with non-blocking snackbar notifications for a smoother user experience.

Bug Fixes

• Fixed an issue where the keyboard unexpectedly appeared while loading an ad after reaching the weight-recording limit.
• Fixed an issue where ad dialogs could appear at unintended moments during fasting tracking.
• Improved reward-ad handling to prevent users from losing rewards due to unexpected interruptions or errors.

Performance & Data Handling

• Added local storage for meal analysis photos.
• Analysis images continue to be optimized before processing.
• Original photos are now preserved locally at their captured quality for better user access and retention.

Codebase Refactoring

• Reorganized the project structure to improve maintainability and scalability.
• The original structure grouped files mainly under screens, services, and widgets, which became difficult to manage as the app grew.
• Refactored the codebase into a feature-based architecture, making it easier to navigate, develop, and maintain individual app features.

Subscription Preparation

• Completed the initial setup work required for future subscription support and ad-removal functionality.

New Things I’m Learning About Next.js, SEO, and Web Performance

Understanding Next.js

• React is a JavaScript library for building user interfaces.
• Next.js is a React framework that provides additional features such as server-side rendering, static site generation, routing, image optimization, and SEO improvements.

Rendering Strategies

Rendering is the process of turning code into content that users can see on the screen.

SSG (Static Site Generation)

Pages are generated as HTML during the build process and served instantly to users.

Best for:

• Landing pages
• Documentation
• Content that rarely changes

Advantages:

• Fast loading speed
• SEO-friendly

SSR (Server-Side Rendering)

Pages are generated on the server for each request.

Best for:

• Personalized content
• User-specific dashboards
• Frequently changing data

Advantages:

• Fresh data on every request
• Better initial page load for dynamic content

ISR (Incremental Static Regeneration)

A hybrid approach where static pages can be updated periodically without rebuilding the entire site.

Advantages:

• Combines the speed of SSG with the freshness of SSR

SEO Fundamentals

1. Make Content Visible to Search Engines

Search engines should be able to access meaningful content when they crawl a page.

Rendering strategies such as SSG, SSR, and ISR help ensure that important content is available immediately.

2. Improve Search Appearance

Dynamic Metadata

Each page should have its own unique title and description.

Open Graph Tags

When a page is shared on social media, an attractive preview image can improve click-through rates (CTR).

Favicons and App Icons

Displaying a recognizable icon in the browser can improve brand recognition and trust.

3. International SEO

Language-Based Routing

Using URLs such as:

• /en
• /ko
• /ja

helps search engines understand language-specific versions of a site.

hreflang Tags

These tags help search engines serve the correct language version to users in different regions.

4. Structured Data

JSON-LD

A structured format used to provide additional information to search engines.

Schema Markup

Labels content so search engines can better understand what a page represents, such as:

• Article
• Product
• Recipe
• Organization
• FAQ

5. Website Performance Matters

Image Optimization

Next.js Image Optimization automatically serves appropriately sized and modern image formats when possible.

Core Web Vitals

LCP (Largest Contentful Paint) Measures how quickly the largest visible content appears.

Target:

• Under 2.5 seconds

Optimization:

• Image optimization
• Font optimization
• Prioritizing critical content

INP (Interaction to Next Paint) Measures how responsive a page feels when users interact with it.

Optimization:

• Reduce main-thread work
• Code splitting
• Lazy loading non-critical components

CLS (Cumulative Layout Shift) Measures unexpected layout movement while a page loads.

Target:

• Under 0.1

Optimization:

• Reserve image dimensions
• Avoid inserting content above existing content

Next.js also provides tools and integrations that help developers measure and improve these metrics.

6. Helping Search Engines Discover Content

sitemap.xml

Lists important pages on a website and helps search engines discover them.

robots.txt

Provides guidance about which sections of a website search engine crawlers can access.

Keyword Strategy

Highly competitive keywords are usually dominated by large companies and established websites.

Instead of targeting broad terms like:

• “diet”
• “weight loss”

it can be more effective to focus on specific search intent:

• “One week without flour results”
• “10,000 steps challenge for office workers”
• “Low-sugar meal tracking community”

These niche keywords often have less competition and clearer user intent.

Backlinks

Search engines often view links from other reputable websites as signals of trust.

After building a useful product, sharing it respectfully in relevant communities can help people discover it naturally.

How Search Engines Work

Crawling

Search engine bots discover and visit webpages across the internet.

Indexing

The collected information is organized and categorized within search engine databases.

Metadata, structured data, and page content help search engines understand what a page is about.

Ranking

When someone performs a search, search engines evaluate many signals to determine which pages are most relevant and useful.

Factors may include:

• Content quality
• Relevance
• Website performance
• Backlinks
• User experience

Personal Reflection

Until now, most of my attention has been focused on building features and making interfaces look great for users.

As I learn more about web development and SEO, I’m realizing that there are two audiences to design for:

1. The people who use the product.
2. The search engines that help people discover it.

My next challenge is to build websites that are both beautiful for users and easy for search engines to understand.