Module 5: Building Real Things

Guided Build: Functionality & Data

Lesson 5.4 1 activity

From Static to Dynamic

In Session 1, you built the core screen of your project. It looks like something — but it doesn't DO much yet. Today, you're making it functional. By the end of this session, users will be able to interact with your project and their actions will be saved.

This is the hardest session. Adding real functionality is where most bugs happen. That's normal. You have your Bug Report Template (PDF) and your AI troubleshooting skills from Lesson 5.3. You'll use both today.

Before You Start

  • Your Session 1 Repl is open and the live preview still works
  • Your data plan from Module 4 is open or in mind
  • Bug Report Template (PDF) is nearby (you'll probably need it)
  • A parent or older sibling reachable while you work — this is the bug-heavy session

Find this and all other downloadable resources on the Dashboard Resources page.

Stuck? Use the Module 5 Starters

This is the bug-heavy session. If your project breaks badly and AI can't unstick it after a few tries, the Module 5 Starters page walks you through two safety nets:

  • A starter prompt for your track — paste it into a fresh Repl's AI panel and you'll get a working baseline.
  • A working starter project you can either (a) study as a reference and describe specific features to AI, or (b) view the source and copy it into a fresh Repl as your foundation. Step-by-step instructions for both options are here.

Better to start fresh from a working baseline than spend an hour untangling.

Two Replit notes before you keep going

  • You don't need to "paste your code" into AI. Replit's AI panel can already see every file in your Repl. When the prompts in this lesson say "here's my current code: [paste]," that's leftover language from working outside Replit. Just delete that part of the prompt — AI already has the context.
  • You don't need to save backups. Replit auto-saves and keeps history. If a change breaks your project badly, you can ask AI: "Undo the last change you made." Or use Replit's built-in version history (look for a clock or History icon).

Track 1: Personal Productivity Tool — Session 2

Only follow this step if you're on Track 1. If you're on Track 2 or 3, click "Next" to find your track.

What you're adding today: User input (add new items), data persistence (saves between sessions), and progress calculation.

Step 1: Add the ability to create new items. Right now your list shows hardcoded items. Let's make users able to add their own:

Add an "Add Habit" feature to my app. Include: (1) an input field where the user types a habit name, (2) an "Add" button, (3) when clicked, the new habit appears in the list with a checkbox, (4) the input field clears after adding. Add this feature without breaking the existing layout.

Expected result: Your app should now let you type a habit name, click Add, and see it appear in the list. The existing habits should still be there.

Step 2: Make checkboxes actually work. Clicking a checkbox should mark a habit as complete for today and update the progress display:

Make the checkboxes functional. When a user checks a habit: (1) it should visually change (strikethrough text, green check, or dimmed appearance), (2) the progress counter at the top should update (for example: "3/5 habits completed today"), (3) unchecking should reverse both changes.

Step 3: Add data persistence with localStorage. Right now, if you close the browser tab, your data disappears. localStorage is a small built-in storage area inside the browser that lets a webpage remember things across visits — perfect for a personal tracker. Let's wire it up:

Add localStorage to my habit tracker so data persists between browser sessions. Save: (1) the list of habits (names and whether each is checked today), (2) the date of the last visit so we can reset checkmarks each new day, (3) streak counts (how many days in a row each habit was completed). Load saved data when the page opens. If it's a new day, reset today's checkmarks but keep the habit list and streaks.

Expected result: Refresh your Replit preview. Your habits should still be there. Check a few habits, refresh again — checked status should persist. (To test the "new day" reset, you can ask AI to add a "simulate next day" test button you can use, then remove it later.)

Step 4: Add a delete option. Users need to be able to remove habits they no longer want to track:

Add a delete button (a small "×" icon) to each habit. When clicked, show a confirmation ("Delete this habit?") and if confirmed, remove it from the list and from localStorage.

Track 1 Checkpoint — End of Session 2

Your app should now:

  • Let users add new habits via input field
  • Let users check/uncheck habits with visual feedback
  • Show a progress indicator (X/Y completed today)
  • Save data between browser sessions (localStorage)
  • Let users delete habits
  • Reset checkmarks daily while preserving habit list and streaks

Replit auto-saves and tracks history — no manual backup needed. If something breaks, ask AI to undo the last change, or use Replit's history view to roll back.

Track 2: Creative Portfolio or Community Site — Session 2

Only follow this step if you're on Track 2. If you're on a different track, click "Next" to continue.

What you're adding today: Real content pages, interactive features (filtering, search, or recommendations), and polish.

Step 1: Build out your primary content page. Your homepage has a preview grid. Now build the full page that it links to (Gallery, Recommendations, Opportunities, etc.):

Build the full [Gallery / Recommendations / Opportunities] page for my site. Include: (1) a grid of items with placeholder images (colored rectangles are fine), titles, and short descriptions, (2) a category tag on each item, (3) a filter bar at the top where users can click category buttons to filter the displayed items, (4) smooth animations when items filter in or out. Use the same header and footer as my homepage. I have [8–12] items to display. Here are their titles, descriptions, and categories: [list them, one per line — e.g., "The Hobbit, fantasy adventure that started it all, Fantasy"]

Expected result: A content page with your items displayed in a grid, category tags visible, and filter buttons that actually work — clicking "Fantasy" shows only fantasy books, etc.

Step 2: Build your About/Contact page.

Create an About page for my site, using the same header and footer as my homepage. Include: (1) a brief bio or site description (2–3 paragraphs), (2) the story of why I made this site, (3) a simple contact form with Name, Email, and Message fields — it doesn't need to actually send email; just show a "Message sent!" confirmation when submitted. Here's my info to use: [write 2–3 sentences about yourself or your project here]

Step 3: Add an interactive feature. A portfolio or community site becomes memorable when it has something interactive. Choose ONE: a search bar, a recommendation quiz ("Answer 3 questions and I'll recommend..."), a dark/light mode toggle, or sort options (newest, oldest, highest rated).

Add a [search bar / recommendation quiz / dark mode toggle / sort dropdown] to my [content page]. Make sure it works smoothly with the filtering system that's already there.

Track 2 Checkpoint — End of Session 2

Your site should now have:

  • A homepage with working navigation to all pages
  • A content page with your real items, category filters that work
  • An About/Contact page with your real information
  • At least one interactive feature (search, quiz, dark mode, or sorting)
  • Consistent design across all pages (same nav, footer, colors, fonts)

Replit auto-saves and tracks history — no manual backup needed.

Track 3: Data Explorer Dashboard — Session 2

Only follow this step if you're on Track 3. If you're on a different track, click "Next" to continue.

What you're adding today: User input for new data, interactive filters, and dynamic chart updates.

Step 1: Add data entry. Users need to be able to add new data points to your dashboard:

Add a data entry form to my dashboard. Include fields for: [list your data fields — for example: Date, Category, Amount, Description]. When the user clicks "Add Entry," the new row should: (1) appear in the data table, (2) update both charts automatically, (3) recalculate the summary metrics at the top, (4) save to localStorage (the browser's built-in storage) so the data persists when the page is reloaded.

Expected result: A form appears on your dashboard. When you add an entry, the table updates, the charts redraw with the new data, and the summary numbers change. Close and reopen — your added data is still there.

Step 2: Add filters.

Add filter controls to my dashboard: (1) a date range selector with options for This Week, This Month, This Year, and All Time, (2) a category dropdown to filter by [your categories — e.g., Food, Transport, Entertainment]. When a filter is selected, update the charts, table, and summary metrics to show only matching data.

Step 3: Add a third visualization. A good dashboard tells a story with multiple views. Add one more chart:

Add a [line chart showing trends over time / doughnut chart showing proportions / horizontal bar chart comparing categories] to my dashboard. It should respond to the same filters as the other charts. Place it in a logical position in the layout.

Track 3 Checkpoint — End of Session 2

Your dashboard should now:

  • Let users add new data entries via a form
  • Save data between sessions (localStorage)
  • Have at least 3 different charts/visualizations
  • Have working filters (date range and/or category)
  • Update all charts and metrics when data changes or filters are applied

Replit auto-saves and tracks history — no manual backup needed. If something breaks, ask AI to undo the last change, or use Replit's history view to roll back.

Session 2 Troubleshooting

This session has more things that can break. Here are fixes for the most common problems:

Data isn't saving between sessions:

My localStorage isn't working. When I refresh the Replit preview, my data disappears. Find the bug and fix it. Then explain in plain English what was wrong, so I learn what to watch for next time.

Charts don't update when data changes: Chart.js charts need to be explicitly updated. If you add data and the chart doesn't change:

My Chart.js chart doesn't update when I add new data. I'm adding the entry, the data table updates, but the chart stays the same. Find the bug and fix it.

New features broke existing ones: This happens when new code conflicts with old code. Don't panic:

After you added [new feature], my [existing feature] stopped working. It was working before that change. Find what the new code broke and fix it without removing the new feature.

KEY CONCEPTS

KEY CONCEPTS — LESSON 5.4

1. Session 2 transforms your static screen into a working project: user input, data persistence, and dynamic updates.

2. localStorage saves data between browser sessions so users don't lose their work. Always test that it actually persists by closing and reopening.

3. This session has the most bugs — that's expected. Use the bug report pattern: what you expected, what happened, what you tried, relevant code.

4. Always save a backup before each session. If something breaks badly, you can revert instead of starting over.

5. By the end of this session, your project should handle real user input and save data between visits.

Level Up: Coming Next

Lesson 5.5 — Guided Build: Test, Fix, Polish. Now it's time to systematically test your project, fix bugs, and polish it until it's ready to share.

Continue to Lesson 5.5 →