Session #6:

Simon Game - finally coding

Follow these steps to get the multiplayer Simon Says game running locally and deployed to the cloud.

💡 Tip: Hover over any gray code block to see the copy button, or triple-click inside to select all text.

Text

📋 Prerequisites

Before starting, make sure you have:

• ✅ Cursor IDE installed → Download here
• ✅ Node.js 18+ installed → Download here
• ✅ Git installed → Download here
• ✅ GitHub account → Sign up
• ✅ Render.com account (free tier) → Sign up

Step 1: Clone and Open in Cursor

1.1 Open Terminal

• Mac: Press Cmd + Space, type "Terminal", press Enter
• Windows: Press Win + R, type "cmd", press Enter

1.2 Clone the Code

Copy and paste this command:

1.3 Open in Cursor

1. Open Cursor IDE
2. Click File → Open Folder
3. Navigate to the simon-game-app-cday folder
4. Click Open

Step 2: Setup and Run

In Cursor, open the terminal: Press Ctrl + ` (backtick key)

Run this command:

Step 2: Setup and Run

This will install everything and start the app. You should see:

🎉 The game is running (locally)!

Step 3: Test the Game Locally

1. Click "Create Game"
2. Enter your name, pick an avatar
3. Click "Create Game"
4. Click "Start Solo Game"
5. Play! 🎮

Step 4: Deploy to Render

Now let's put your game online so anyone can play!

4.1 Create Your Own GitHub Repository

First, you need the code in YOUR GitHub account (not the workshop account).

Run this command:

This will:

1. ✅ Create a new repository in your GitHub account
2. ✅ Push all the code to it

When done, you'll see your repository URL: https://github.com/YOUR_USERNAME/simon-game-app

Step 4: Deploy to Render

⚠️ First time? If you see "GitHub CLI not installed", ask Cursor:

4.2 Deploy on Render (Using Cursor)

In Cursor chat (Cmd+L or Ctrl+L), copy and paste:

Cursor will:

1. ✅ Create the backend service on Render
2. ✅ Create the frontend static site on Render
3. ✅ Configure the build commands
4. ✅ Give you the URLs when done

⏳ Wait 5-10 minutes for the first deployment to complete.

4.2 Alternative: Deploy Manually

If Cursor can't deploy, do it manually:

1. Go to dashboard.render.com
2. Click New → Blueprint
3. Connect your GitHub account (if prompted)
4. Select your simon-game-app repository
5. Click Apply

4.3 Configure Environment Variables

In Cursor chat, copy and paste:

Cursor will:

1. ✅ Find your services on Render
2. ✅ Get the URLs automatically
3. ✅ Configure all environment variables
4. ✅ Trigger a redeploy

⏳ Wait for redeploy to complete (1-2 minutes).

4.3 Alternative: Configure Manually

If Cursor can't configure, do it manually:

1. Go to dashboard.render.com
2. Click simon-game-backend → Environment
   • Set FRONTEND_URL = your frontend URL (e.g., https://simon-game-frontend-xxx.onrender.com)
   • Click Save Changes
3. Click simon-game-frontend → Environment
   • Set VITE_API_URL = your backend URL
   • Set VITE_SOCKET_URL = your backend URL
   • Click Save Changes

4.4 Save Your Deployment Configuration

Let's save your deployment details so you can reference them later.

In Cursor chat, copy and paste:

Cursor will create a file with your deployment details like:

• Backend URL
• Frontend URL
• Environment variables
• Service IDs

This is useful if you need to update or redeploy later!

4.5 Test Online

1. Open your frontend URL in browser
2. Create a game
3. Share the link with a friend
4. Play together! 🎉

🎉 Congratulations!

You've successfully:

• ✅ Set up a full-stack TypeScript project
• ✅ Run a React + WebSocket app locally
• ✅ Deployed to the cloud

Your game is live! Share the link with friends and family.

🛠️ Troubleshooting

❓ Need Help?

Ask Cursor! Open chat (Cmd+L) and describe your problem:

Happy coding! 🚀