77 77. Step 4 - Optional: Preview the Frontend

As of Oct 22, 2026 · Official docs: Next.js

If you want to see the frontend before connecting the backend, you can go back to an early commit of the project that has only the frontend. Run the terminal commands below in your project folder (task-app).

Go to the commits page of your repository on GitHub (https://github.com/YOUR-USERNAME/task-app/commits). The newest commits are at the top.
Scroll to the bottom (you may need to go to the next page of commits) and find the commit labeled “feat: [0] Frontend Boilerplate”. It is the second-oldest commit (the oldest one is “first commit”).
Copy the commit hash. Instead of steps 1 to 3, you can also find the hash in the terminal: this command shows the commit, starting with the short form of its hash (for example c8d9866):
```
git log --oneline --grep="Frontend Boilerplate"
```
Check out that specific commit:
- Type git --version to see your Git version.
- Run ONE of the following commands, depending on your Git version:
  - Git 2.23 and later: git switch --detach COMMIT_HASH
  - older versions of Git: git checkout COMMIT_HASH
  Replace COMMIT_HASH with the hash you copied.
Run the development server:
```
npm run dev
```
Then open http://localhost:3000 in your browser (if that port is busy, use the address that npm run dev prints). This version has placeholder backend logic, allowing you to explore the UI without full functionality. When you are done, stop the server: click in the terminal where it is running and press Ctrl+C.
To get back to the latest version of the code, run ONE of the following commands, depending on your Git version:
- Git 2.23 and later:
  - git switch - or
  - git switch BRANCH_NAME (where BRANCH_NAME is the name of your branch, such as main or master)
- older versions of Git:
  - git checkout - or
  - git checkout BRANCH_NAME (where BRANCH_NAME is the name of your branch, such as main or master)

Practice Questions

Easy

Question 1 · Short answer

What is the point of this optional step? What will you be able to do, and what won’t work?

Suggested answer

It lets you see the app’s frontend before any backend is connected. The “feat: [0] Frontend Boilerplate” commit uses placeholder backend logic, so you can click around and explore the user interface (UI), but nothing really works: the app isn’t connected to Supabase or any of the other services yet.

Question 2 · Short answer

What is a commit hash, and where do you find the one you need for this step?

Suggested answer

A commit hash is the unique ID of a commit (a saved snapshot of the project): a long string of letters and numbers. You find it on the repository’s commits page on GitHub: scroll down to the bottom, where the oldest commits are, find the “feat: [0] Frontend Boilerplate” commit and copy its hash. (You can also find it in the terminal with git log --oneline --grep="Frontend Boilerplate".)

Question 3 · Write the command

Which command starts the development server so that you can see the app?

Suggested answer

npm run dev

Run it from the project’s top-level folder. It starts a local version of the site and prints a local address, usually http://localhost:3000, that you open in your browser. To stop the server, press Ctrl+C in the terminal where it is running.

Medium

Question 4 · Multiple choice

You have Git version 2.43. Which command takes your project back to the commit whose hash starts with abc1234?

git switch --detach abc1234
git clone abc1234
npm run abc1234
git commit abc1234

Suggested answer

a. On Git 2.23 or later, git switch --detach followed by the hash checks out that commit (the older git checkout abc1234 also still works). git clone (b) copies a whole repository from a URL, npm run (c) runs a script from package.json, and git commit (d) saves a new snapshot.

Question 5 · Ordering

Put these steps in order:

Run npm run dev
Stop the server with Ctrl+C
Copy the commit hash
Open the repository’s commits page on GitHub
Run git switch - to go back to the latest code
Check out the commit with git switch --detach <hash>
Click around and explore the UI

Suggested answer

Open the repository’s commits page on GitHub
Copy the commit hash
Check out the commit with git switch --detach <hash>
Run npm run dev
Click around and explore the UI
Stop the server with Ctrl+C
Run git switch - to go back to the latest code

Question 6 · Matching

Match each task with the right command.

Task		Command
1. Go to an old commit (Git 2.23 or later)		A. `git checkout main`
2. Go to an old commit (older Git)		B. `git switch --detach <hash>`
3. Go back to the `main` branch (Git 2.23 or later)		C. `git checkout <hash>`
4. Go back to the `main` branch (older Git)		D. `git switch main`

Suggested answer

1 → B, 2 → C, 3 → D, 4 → A.

Question 7 · True or false

In the Frontend Boilerplate version, creating a task saves it in your Supabase database.

Suggested answer

False. That version has only placeholder backend logic. You can click around the UI, but it isn’t connected to Supabase or any other service, so nothing is really saved.

Hard

Question 8 · Short answer

Why does the page give different commands depending on your Git version?

Suggested answer

git switch was added in Git 2.23 (2019). Older versions only have git checkout, which does several jobs, including switching branches and checking out old commits. Newer versions understand both commands; git switch is clearer because its name says what it does.

Question 9 · Scenario

Maria previewed the boilerplate and forgot to switch back. She carries on with the next tutorial steps, but even after she connects the backend, the app still doesn’t really do anything. What happened, and how can she fix it?

Suggested answer

She is still on the old Frontend Boilerplate commit, which only has placeholder backend logic, so the code she is running doesn’t use the backend she set up. Fix: stop the development server (Ctrl+C), run git switch - or git switch main (on older Git: git checkout - or git checkout main), and start the server again with npm run dev.

Question 10 · Short answer

To get back to the latest code, you can run git switch - or git switch BRANCH_NAME. What does the - mean, and when is naming the branch the safer choice?

Suggested answer

- means “go back to where I was just before”, like cd - for folders. Naming the branch (for example git switch main) is safer when you aren’t sure what you did last: if you switched more than once, - takes you back only one step, which may not be your main branch. In this repository the main branch is called main (other projects may use master); git branch lists your branches.