codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

---

🎯 Model Reference

See a working example of a clicker game here: Code.org Clicker Game

Your React version will have similar gameplay mechanics but with your own creative twist!

---

Level 1: Project Setup & Planning

Goal: Set up your development environment with Vite and React.

User Story: As a developer, I want to create a new React project so that I can start building my Apple Clicker game.

---

📋 Before You Start

Complete the Activity Guide first! Work through Steps 1-4 of the Activity Guide to:

• Play the model game
• Plan your variables and functions
• Map out your game logic
• Understand the project requirements

This planning will help you build your game more efficiently!

---

What You’ll Do

Create a new React project using Vite and set up all the necessary files to get started.

Instructions

• Create a new Vite + React project using the command: npm create vite@latest
• Navigate to the project folder: cd clicker-game
• Install dependencies: npm install
• Start the development server to verify setup: npm run dev
• Open the project in your code editor

💡 Code Hints

Need help with Vite setup? Check out these snippets:

Creating a Vite project:

npm create vite@latest
cd clicker-game
npm install

Starting the development server:

npm run dev

✅ Check

1. Run npm run dev to start your development server
2. Open your browser to http://localhost:5173
3. You should see the default Vite + React welcome page
4. If you see errors, ensure Node.js is installed and you’re in the correct directory
5. Open your project folder in VS Code and verify you can see these files:
   • src/App.jsx
   • src/main.jsx
   • package.json
   • vite.config.js

---

Attribution: This project guide was created with assistance from Claude AI (Anthropic).