Vibe Code an Attendance Tracker

Build a browser-based attendance tracker using AI prompts in Windsurf.

Introduction

30 Second Summary

What if you could build a working app just by describing what you want in plain English? That is the idea behind vibe coding.

In this project, you will use Windsurf's AI agent to build a browser-based attendance tracker from scratch. Every line of code will be generated from your plain English prompts.

What You'll Build

You will build an attendance tracker web app using HTML, CSS, and JavaScript, entirely generated by Windsurf's Cascade AI agent.

By the end of this project, you'll have:

A working attendance tracker web app running locally in your browser.
Hands-on experience using Windsurf's Cascade agent to build software from natural language prompts.
A repeatable vibe coding workflow you can apply to any future project idea.
Secret Mission: add a feature to export attendance records as a downloadable CSV file.

Are there any prerequisites?

None. This project is designed for complete beginners with no coding experience. You will install everything you need in Step 1.

Install Windsurf and Set Up Your Project

To start vibe coding, you need an AI-powered code editor. Windsurf is a free code editor built on VS Code with a built-in AI agent called Cascade.

In this step, you'll download Windsurf, create a free account, and set up an empty project folder for your attendance tracker app.

In this step, get ready to:

Install the Windsurf Editor on your Mac.
Create a free Windsurf account and complete the editor setup.
Create an empty project folder and open it in Windsurf.

Download and install Windsurf

Go to the Windsurf download page in your web browser.

Not sure which download to pick?

The download page offers two versions: one for Apple Silicon and one for Intel Macs.

To check which one you have, click the Apple menu in the top left corner of your screen, then click About This Mac. If you see Chip followed by "Apple M1", "M2", "M3", or "M4", download the Apple Silicon version. If you see Processor followed by "Intel", download the Intel version.

Click the download button that matches your Mac type.
Once the download finishes, open the .dmg file from your Downloads folder.
Drag the Windsurf icon into the Applications folder.
Press Cmd+Space to open Spotlight.
Type Windsurf and press Enter to launch it.

Seeing a macOS security warning?

This is normal for apps downloaded outside the App Store. Click Open to confirm and Windsurf will launch.

If you don't see the option to open it, go to System Settings, then Privacy & Security, and click Open Anyway next to the Windsurf message.

Still stuck? Help me get past the macOS security warning when launching Windsurf.

Complete the onboarding flow

When Windsurf first launches, it walks you through a quick setup wizard. This configures the editor to feel familiar if you've used VS Code before.

Windsurf will ask if you want to import settings from VS Code. Select yes. This pulls over your themes and keybindings so the editor feels familiar.
Choose your key bindings. Select Default for VS Code.
Pick a theme you like.
Create a free Windsurf account by signing up with Google or email.

Why do I need an account?

Your Windsurf account activates the Cascade AI agent. Without it, Cascade won't work.

The free tier includes Cascade interactions and unlimited code autocomplete at no cost. You have more than enough free sessions to complete this entire project.

Create your project folder and open it in Windsurf

Windsurf needs a folder to work in. You'll create an empty folder for your attendance tracker, then open it in the editor.

Press Cmd+Space to open Spotlight.
Type Finder and press Enter to open it.
Navigate to your Desktop in the Finder sidebar.
Right-click on an empty area of the Desktop and select New Folder.
Name the folder attendance-tracker.

Now open that folder in Windsurf.

Switch back to Windsurf.
Click File in the top menu bar.
Click Open Folder.
Select the attendance-tracker folder on your Desktop, then click Open.

You should now see the attendance-tracker folder name in the Windsurf sidebar on the left. The sidebar is empty because the folder has no files yet.

Don't see an empty project in the sidebar?

Make sure you selected the attendance-tracker folder itself, not a file inside it or a parent folder like Desktop.

If the sidebar is not visible, click View in the top menu bar and make sure Explorer is checked.

Still stuck? Help me open a folder in Windsurf so I can see it in the sidebar.

Your editor is set up and your project folder is ready. Next up, you'll open Cascade and write your very first prompt to build the attendance tracker app.

Build the Basic Attendance App with Your First Prompt

Your Windsurf environment is set up and your empty project folder is waiting. Now comes the exciting part: building a complete web app without writing a single line of code yourself.

You will describe what you want in plain English, and Windsurf's AI agent will generate all the code for you. By the end of this step, you will have a working attendance tracker running in your browser.

In this step, get ready to:

Open Cascade and write your first prompt to build the attendance tracker.
Review and accept the AI-generated code changes.
Test the app in your browser to make sure everything works.

Open Cascade and write your first prompt

Cascade is Windsurf's built-in AI coding agent. It reads your instructions in plain English and generates working code.

What are Cascade's modes?

Cascade has two modes you will use in this project.

Write mode (also called Code mode) creates and edits files in your project.
Chat mode answers questions without making any changes to your files.

For building the app, you need Write mode.

Press Cmd+L (macOS) or Ctrl+L (Windows) to open the Cascade panel on the right side of the editor.
Check that you are in Write mode. The mode selector is at the top of the Cascade panel.

Copy the following prompt into the Cascade input field and press Enter:

Create a simple attendance tracker web app using only vanilla HTML, CSS, and JavaScript. Create three files in the project root: index.html, styles.css, and script.js. The app should let users add students by name to a list, mark each student as present or absent for today's date, display a list of all students with their attendance status, and persist everything to localStorage so data survives page refreshes. Use a clean, modern design with a blue color scheme. Don't use any external libraries or CDNs.

What does this prompt ask for?

A complete attendance tracker using only HTML, CSS, and JavaScript with no external libraries.
The ability to add students by name, mark them present or absent, and display the full student list.
localStorage to save all data so it survives page refreshes.
A clean, modern design with a blue color scheme.

Cascade will work for a few moments, then present a set of proposed file changes. Each file appears with a diff view highlighting the new code.

Cascade not responding?

Make sure you are in Write mode, not Chat mode. Check the mode selector at the top of the Cascade panel.
Check your internet connection. Cascade needs to communicate with Windsurf's servers to generate code.
If you have hit the free tier limit for today, you can continue tomorrow. The free tier includes a limited number of Cascade interactions per day.
Help me figure out why Cascade isn't responding to my prompt.

Review and accept the generated code

Cascade shows you a diff view of every change it wants to make. You can see exactly what code it wrote before it touches your project.

Scroll through the changes Cascade proposes. You will see three new files: index.html, styles.css, and script.js.
Click Accept All to apply all the changes to your project.

What are these three files?

index.html is the structure of your app. It defines what elements appear on the page, like the input field, buttons, and student list.
styles.css controls how everything looks. Colors, spacing, fonts, and the blue color scheme all live here.
script.js makes the app interactive. It handles adding students, marking attendance, and saving data to localStorage.

Check the Windsurf sidebar on the left. You should see index.html, styles.css, and script.js listed in your attendance-tracker folder.

Don't see three files in the sidebar?

Make sure you clicked Accept All, not just scrolled through the proposed changes.
If Cascade only created one or two files, type a follow-up message asking it to create the missing ones. Cascade remembers the conversation context.
Help me figure out why Cascade didn't create all three files.

Test your app in the browser

Since this is a plain HTML project, you can open it directly in your browser. No server or build step needed.

In the Windsurf sidebar, right-click on index.html.
Select Reveal in Finder (macOS) or Reveal in File Explorer (Windows).
Double-click the index.html file. It opens in your default web browser.

Type a student name into the input field and click the button to add them.
Add two or three more students.
Mark each student as present or absent.
Press Cmd+R (macOS) or Ctrl+R (Windows) to refresh the page.

Your students and their attendance statuses should still be there after the refresh. The data persists because the app saves everything to localStorage.

Why does the data survive a refresh?

Your prompt asked Cascade to use localStorage. This is a built-in browser feature that saves data directly on your computer.

When the page loads, the JavaScript checks localStorage and restores your saved students and attendance records. No server or database required.

App not loading or looking broken?

Make sure you opened index.html, not styles.css or script.js. Only the HTML file renders as a web page.
If the page is blank, right-click the page and select Inspect. Check the Console tab for red error messages. Copy any error and paste it into Cascade for help.
If data disappears on refresh, your browser may have localStorage disabled. Check your browser's privacy settings.
Help me debug my attendance tracker app.

Your attendance tracker is up and running. Next, you will add attendance history tracking and summary statistics to make the app even more useful.

Add Attendance History and Summary Statistics

Your basic attendance tracker is up and running. Students can be added, marked present or absent, and the data sticks around after a page refresh.

Right now, the app only shows today's attendance. A real attendance tracker needs a record of past days and a way to see how each student is doing overall. In this step, you will prompt Cascade twice to add both of those features.

In this step, get ready to:

Add an attendance history table that shows past records grouped by date.
Add per-student summary statistics showing days present, days absent, and attendance percentage.
Test both new features in your browser.

Prompt Cascade to add attendance history

An attendance tracker that only shows today is like a calendar with a single page. You need a history section so past attendance records are visible at a glance.

Open the Cascade panel by pressing Cmd+L (macOS) or Ctrl+L (Windows).
Make sure you are in Write mode (the mode indicator is at the top of the Cascade panel). Write mode lets Cascade create and edit files.
Type this prompt into Cascade and press Enter:

Add an attendance history feature. When I mark attendance for students, save the date along with each student's status. Add a new section below the main attendance area that shows a table of past attendance records grouped by date. Each row should show the date and each student's status (present or absent) for that day.

What does this prompt ask Cascade to do?

This prompt asks Cascade to change how attendance data is stored. Instead of just tracking today's status, it will save the date alongside each record.

It also asks for a brand new section in the UI. The history table groups records by date so you can scroll through and see who was present or absent on any past day.

Cascade reads your existing files, understands the current code, and proposes updates across multiple files. Each file appears with a diff view showing exactly what changed.

Scroll through the diffs to see what Cascade changed. You do not need to understand every line. Just notice that it updated index.html, styles.css, and script.js to add the history feature.
Click Accept All to apply every change to your project.

You should see the updated files in the Windsurf sidebar. The history section is now part of your code, ready to test after the next prompt.

Cascade not generating changes?

Make sure you are in Write mode, not Chat mode. Chat mode answers questions without editing files. Check the mode indicator at the top of the Cascade panel.

If Cascade seems stuck, try pressing Enter again or click the send button. Why isn't Cascade generating code from my prompt?

Ask Cascade to add summary statistics

History tells you what happened on each day. Summary statistics tell you the bigger picture for each student. Next, you will ask Cascade to calculate attendance percentages.

In the Cascade panel, type this follow-up prompt and press Enter:

Add attendance summary statistics for each student. Show the total number of days present, total days absent, and attendance percentage next to each student's name in the student list.

Why a follow-up prompt works so well here

Cascade remembers everything from your previous prompts in the same session. It already knows about the history feature you just added, so it can build statistics on top of that data structure without you needing to explain it again.

Review the diffs Cascade proposes. You should see changes to script.js (new calculation logic) and possibly index.html and styles.css (new display elements and styling).
Click Accept All to apply the changes.

Refresh your browser and test everything

Both features are now in your code. Time to see them in action.

Switch to your browser and refresh the page by pressing Cmd+R (macOS) or Ctrl+R (Windows).
Add two or three students by name.
Mark attendance for today. Mark some students as present and others as absent.
Change the date (if your app has a date picker) or wait until a different session, then mark attendance again so you have records for multiple days.
Check that the history table below the main attendance area shows past records grouped by date.
Check that each student's name now shows their total days present, total days absent, and attendance percentage.

What should I see?

Your app now has two new sections. The student list shows statistics next to each name (for example, "Present: 2 | Absent: 1 | 67%"). Below the main attendance area, a history table displays rows grouped by date with each student's status for that day.

The exact layout depends on what Cascade generated. As long as you can see past records and statistics updating, everything is working.

Something not working as expected?

If the history table is empty, make sure you marked attendance at least once after accepting the changes. Records created before you added the history feature may not have date information stored.

If statistics show zero or NaN, try clearing your localStorage data by opening your browser's developer console (Cmd+Option+J on macOS or Ctrl+Shift+J on Windows), typing localStorage.clear(), pressing Enter, and refreshing the page. Then add students and mark attendance fresh.

Do not worry if things look slightly off. The next step teaches you how to describe issues to Cascade and get them fixed. My attendance tracker history or statistics are not displaying correctly after accepting Cascade's changes.

Your attendance tracker now has real depth. It tracks history, crunches numbers, and keeps everything stored in the browser. Next up, you will learn how to talk to Cascade in a whole new way to understand, debug, and improve your app.

Iterate and Fix Issues Like a Vibe Coder

Your attendance tracker now has student management, attendance marking, a history table, and summary statistics. All built from just two prompts in Cascade.

Building the first version is just the beginning. In this step, you will learn the most important part of vibe coding: how to iterate on what you have built.

In this step, get ready to:

Use Cascade's Chat mode to understand how your code works.
Fix bugs or add improvements using Write mode.
Practice the vibe coding loop with a prompt of your own.

Use Chat mode to understand your code

Your app stores all its data in localStorage, but how exactly does that work? Cascade's Chat mode lets you ask questions about your code without changing any files.

Press Cmd+L to open the Cascade panel if it is not already open.
Click the mode selector at the top of the Cascade panel and switch from Write to Chat.
Type this prompt into Cascade to ask how your app stores and retrieves data:

Explain how the attendance data is stored in localStorage. Walk me through what happens when I click the "Mark Attendance" button.

Press Enter and read through Cascade's explanation.

Cascade walks you through how your attendance data is saved, retrieved, and updated. This understanding helps you write better prompts when you start making changes next.

What is Chat mode?

Chat mode (sometimes called Read mode) answers questions about your project without creating or editing any files. It is one of the fastest ways to understand AI-generated code without reading every line yourself.

Write mode (sometimes called Code mode) is the opposite. It creates files, edits code, and runs terminal commands. You will switch back to Write mode in the next substep.

Not seeing a response?

Make sure you are signed into your Windsurf account. The free tier includes a limited number of Cascade interactions per day. If you have used them all, you can continue the next day.

If the response is not helpful, try rephrasing your question to be more specific. Help me get a useful explanation from Cascade Chat mode about how my attendance tracker stores data in localStorage.

Fix any bugs or make improvements

Now that you understand how the code works, it is time to improve it. Switch back to Write mode and describe what you want to change in plain English.

Click the mode selector at the top of the Cascade panel and switch back to Write.
Pick one of the prompts below based on your experience testing the app so far.

✔️ Everything works great

If your app is working as expected, ask Cascade to add a new feature. This prompt adds a delete button for removing students.

Type this prompt into Cascade:

Add a button to delete a student from the list. When clicked, it should remove the student and all their attendance records. Ask for confirmation before deleting.

Press Enter and wait for Cascade to generate the changes.

ⓧ Something looks off

If you noticed an issue while testing, describe it to Cascade in plain English. For example, if dates are displaying as raw strings instead of readable text, try this prompt.

Type this prompt into Cascade:

The attendance history table doesn't show dates in a readable format. Change the date format to show "May 4, 2026" instead of the raw date string.

Press Enter and wait for Cascade to generate the fix.

Describe, don't diagnose

You do not need to know what caused the bug. Just describe what you see and what you expected to see. Cascade reads your existing code to figure out the fix.

Scroll through the diff view to see what Cascade changed.
Click Accept All to apply the changes to your project.
Switch to your browser and refresh the page with Cmd+R (macOS) or Ctrl+R (Windows).
Test the new feature or fix by interacting with your app.

If you added the delete button, try deleting a student and confirming the dialog. If you fixed the date format, check that the history table shows dates like May 4, 2026.

Changes not showing up?

Make sure you clicked Accept All in the Cascade panel before refreshing your browser. Without accepting, the changes only exist in the diff preview.

If the feature does not work as expected, describe the problem to Cascade in a follow-up prompt. Cascade remembers the full conversation context, so you do not need to re-explain everything.

My improvement prompt didn't produce the right result. Help me figure out what to tell Cascade next.

Practice the vibe coding loop

You have now completed the core vibe coding workflow multiple times: prompt, review, accept, test, repeat. It is time to try it on your own with a feature you actually want.

✔️ I'll give it a go!

Think of one thing you wish your attendance tracker could do. Describe it to Cascade in Write mode, accept the changes, and test it in your browser.

ⓧ Maybe a little help...

Here are a few ideas you can describe to Cascade. Pick one that sounds interesting and type it into the Cascade panel in Write mode.

A search box that filters students by name as you type.
A way to edit attendance after it has been submitted for a past date.
Color-coded attendance percentages (green for good attendance, red for poor attendance).

After typing your prompt, press Enter, review the diffs, click Accept All, and refresh your browser to test.

Why is this loop so powerful?

Every prompt you send teaches Cascade more about what you want. It tracks your edits, terminal commands, and conversation history in real time.

This means each follow-up prompt builds on everything that came before. The more you iterate, the better Cascade understands your project.

There is no wrong answer here. This step is about building your confidence with the workflow you will use for every future project.

Secret mission

Export Attendance as CSV

Your attendance tracker works great in the browser. But what if you need to share attendance data with someone who does not use your app? In this secret mission, you will add a CSV export feature so users can download their records and open them in any spreadsheet app.

Clean Up Your Resources

This project runs entirely locally in your browser, so there are no ongoing costs. Decide whether to keep your resources as they are, pause by clearing browser data, or delete everything entirely.

Resources you used:

Windsurf Editor (installed application).
Windsurf account (free tier).
The attendance-tracker folder on your Desktop (containing index.html, styles.css, and script.js).
localStorage data saved in your browser.

Keep everything running

No action needed. Choose this if you want to keep using the attendance tracker or continue experimenting with new prompts in Windsurf.

Your attendance-tracker folder stays on your Desktop.
Your attendance data stays in localStorage until you clear your browser data.
Windsurf remains installed and ready to use for your next project.

Pause - I'll come back to this later

Free up browser storage while keeping your project files intact. You can pick up right where you left off.

Clear your browser's localStorage for the attendance tracker page. Open the app in your browser, press Cmd+Option+J (macOS) or Ctrl+Shift+J (Windows) to open the console, then type localStorage.clear() and press Enter.
Keep the attendance-tracker folder on your Desktop. Your project files are ready to reopen any time.
Leave Windsurf installed so you can jump back in without reinstalling.

Delete - I don't want to use this again

Remove all project files and optionally uninstall Windsurf to start completely fresh.

Delete the attendance-tracker folder from your Desktop by dragging it to the Trash.
Clear your browser's localStorage for the attendance tracker page. Open the app in your browser, press Cmd+Option+J (macOS) or Ctrl+Shift+J (Windows) to open the console, then type localStorage.clear() and press Enter.
To uninstall Windsurf on macOS, open Finder, go to Applications, and drag Windsurf to the Trash.
If you no longer need your Windsurf account, you can delete it from your account settings at windsurf.com.

Nice Work!

You just built a complete attendance tracker app without writing a single line of code by hand. That is vibe coding in action.

You've learned how to:

Used Windsurf's Cascade agent to generate a full web app from natural language prompts.
Practiced the prompt-review-accept-test workflow to iterate on your app by describing improvements and fixes in plain English.
Used Chat mode to understand what AI-generated code does without reading it line by line.
Added CSV export functionality to make attendance data portable and compatible with spreadsheet apps.

Ready to quiz yourself?