Skip to main content

Chapter 9 (Bonus): Having Fun

You already have a solid app. This optional chapter adds personality — a home screen that grows with every memory, and a quicker way to capture thoughts without leaving context.

This chapter is a bonus. If you are eager to wrap your web app in Capacitor, you can skip ahead to Part 5. Come back anytime when you want extra polish.

The two prompts below are independent features, but they work best together: the new Home tab is where the tree and daily CTA live, while the slide-up entry sheet and FAB make adding entries feel faster on a phone.

What You'll Build​

  • Rename the tab that shows your journal list to Feed, and add a dedicated Home tab
  • A minimal black-and-white SVG tree with a slow sway animation and multiple branches
  • Leaf nodes that appear (or accumulate) on branches as entries are added — visual feedback for each new memory
  • A daily CTA under the tree when the user has not journaled today, or a pill such as "Today's memory logged" when they have
  • Create entry as a modal / bottom sheet that slides up instead of a full-page route
  • A floating action button on the right, just above the bottom tab bar, for quick new entries

What You'll Learn​

  • How to evolve navigation when you split "feed" from "home"
  • SVG animation basics (sway, subtle growth) in React
  • Deriving UI state from "has entry today?" using your existing entry data
  • Sheet / modal patterns that preserve form logic while changing presentation
  • FAB placement with safe spacing above tab bars

Step 1: Home Tab, Tree, and Daily CTA​

The feed stays the scrollable list of posts. Home becomes a calm landing screen centered on the tree metaphor.

>_Claude Code — Step 1
Send this to Claude Code:
> Refine navigation and the home experience. Rename the tab that currently shows the journal list to Feed. Add a new Home tab with a clean, minimal layout: a black-and-white SVG tree with multiple branches that slowly sways in a gentle looping animation. Each time the user adds a new journal entry, attach a new small leaf-style node to a branch (or animate one appearing) so the tree visually grows with their memories. Below the tree: if there is no entry for the current calendar day, show a clear primary CTA to add today's entry; if an entry already exists for today, show a compact pill (e.g. 'Today's memory logged') instead of the CTA. Match our existing minimal / Notion-like theme.
Why: You are splitting list browsing (Feed) from a distinctive home surface (tree + daily status). Leaf growth should tie to real entry data, not random decoration.
What to expect: Claude Code will update tab labels and routing, add a Home screen with an animated SVG tree and leaf-on-entry behavior, and implement the today vs. not-today CTA vs. pill states.
Tip: If the tree feels busy, ask Claude Code to cap visible leaves or cluster them — readability matters on small screens.
$ claude "Refine navigation and the home experience. Rename the tab that currently shows t..."

After this step, run the app and confirm: Feed shows your list, Home shows the tree, and creating a new entry adds a leaf. Toggle the CTA vs. pill by whether you have posted today.

Step 2: Slide-Up Entry Modal and Floating Add Button​

Full-page navigation for every quick note breaks flow. A sheet keeps users oriented.

>_Claude Code — Step 2
Send this to Claude Code:
> Make creating a journal entry use a modal or bottom sheet that slides up from the bottom instead of navigating to a separate full page. Opening the sheet should work from every entry point: the Home daily CTA, the Feed flow if applicable, and the main add-entry control. Move the add-entry control to a circular floating action button (FAB) on the right side, positioned just above the bottom tab bar with comfortable spacing so it does not collide with the nav or home indicator. Reuse the existing form fields and save logic; only change presentation, wiring, and button placement. Add a dismiss gesture or close control so users can cancel without saving.
Why: Same Firebase and validation as before — this is a UX refactor, not a new data model.
What to expect: Claude Code will introduce a slide-up sheet component, wire open/close state from Home, Feed, and the FAB, remove or bypass the old full-page create route as appropriate, and position the FAB above the tab bar.
Tip: On very small viewports, ask Claude Code to ensure the sheet scrolls internally if the keyboard covers fields.
$ claude "Make creating a journal entry use a modal or bottom sheet that slides up from th..."

Verify: tapping the FAB opens the sheet; submitting saves and closes; the Home CTA opens the same sheet; you no longer bounce to a standalone create page unless you intentionally keep a deep link.

Step 3: Commit Your Progress (Optional)​

git add .
git commit -m "Bonus: Home tree, Feed tab rename, slide-up entry sheet, FAB"
git push
⚠️Common Issues

Checkpoint​

✓Checkpoint — End of Chapter 9

Your app should now:

  • The journal list lives under a tab labeled Feed
  • A Home tab shows a swaying black-and-white tree with leaves tied to new entries
  • No entry today shows an add-entry CTA; entry today shows a logged pill
  • New entries use a slide-up sheet instead of a full-page create flow
  • A FAB sits above the bottom tab bar for quick adds

Part 4 Complete!​

You have built a full-featured web application — with an optional flourish on top. Here is everything across Part 4:

FeatureChapter
Mobile-first app shell with header and tab navigationChapter 4
CRUD for text and photo entries with Firestore and image compressionChapter 5
User authentication with Firebase AuthChapter 6
Polish: skeleton loading, empty states, toasts, onboardingChapter 7
Streak counter, fire animation, calendar modal, and profile statsChapter 8
(Bonus) Home tree, Feed rename, slide-up entry, FABChapter 9

Your web app is feature-complete (and a little delightful). In Part 5, we wrap it in Capacitor for the iOS Simulator.

𝕏

Follow @parvsondhi for build threads, tips, and updates on this tutorial.

Next: Chapter 10 — Capacitor Setup →