Client Side App Project

Your project this week is to build an interactive game-like thing using React.

Spike

Now that you’re using a framework there is a bit more initial environment setup involved before you can start writing code. Make sure you get this setup done and deployed to Netlify at the beginning.

Acceptance Criteria

• Accept at least 2 kinds of user input
• Persistent state and interactivity, e.g. countdown timer, score tracker, previous guesses

Stretch criteria

• State saved to localstorage so you can leave the page and come back later
• Make it look great

Example projects

“Interactive game-like thing” is a bit vague, so here are some apps built previously:

• GIT FIGHTER II
• Let’s Go Pokémon Battle
• Oli’s Tamagotchi
• Zooey’s Drake thing

If you’re struggling for inspiration consider adapting a simple board/card/arcade game that you like.

Setup

We’ll be using Vite to handle bundling our app and providing a local dev server. You can quickly scaffold a new app using their CLI:

1. npm create vite myapp -- --template react
2. cd myapp
3. npm install to install the dependencies
4. npm run dev start the dev server

Open the project in your editor—you should see an example app. Feel free to delete the logo/CSS files that you won’t be using.

Static assets

Vite supports importing static assets (like images or CSS). For example:

import imgUrl from "./test.png";
import "./App.css";

function App() {
  return <img src={imgUrl} alt="" />;
}

CSS files will automatically be copied to the final built site and included on the page. Images and other assets will provide the URL of the final asset to use in your components.

Linting

We strongly recommend you configure ESLint. This will help catch mistakes as you’re coding and save you time debugging problems caused by simple typos.

You can use Oli’s minimal React config (follow the instructions in the readme to install).

Deployment

We’ll be deploying our apps to Netlify.

1. Create your repo and push it to GitHub
2. Go to https://app.netlify.com and login with Github
3. Click the “New site from Git” button
4. Choose “Github” as your provider (and authorize it)
5. Choose the repo you want to deploy
6. Choose “Deploy site” (the build settings should be pre-filled)

Now every time you push to the main branch your site will redeploy.

API secrets

That said, if you have a token you want to keep off GitHub, but don’t mind people potentially finding using dev tools (i.e. not a token attached to your credit card!) you can use a .env.local file.

Vite will automatically read any environment variables prefixed with VITE_ and make them available to your code on import.meta.env. E.g. if you have a .env.local file like this:

VITE_APP_API_KEY='123'

You can access that using import.meta.env.VITE_APP_API_KEY.

Vite also generates a .gitignore that stops .local files from ending up on GitHub.

You will also need to configure Netlify to inject this value when it deploys your site too (just like Heroku). You can do this under “Site settings” > “Build & deploy” > “Environment” > “Environment variables”.