You’ll create a small project that:

  • Uses Git, GitHub, branches, and pull requests
  • Uses README.md with proper Markdown
  • Uses npm, installs dependencies, and sets up scripts
  • Uses eslint and prettier with config files
  • (Optional) Uses .env variables via Vite
  • (Optional) Uses GitHub Actions to deploy

What You’ll Build

A simple “API Fetch Demo” that:

Note on Vite
If you’re feeling confident, try using Vite to set up your project. Vite gives you access to environment variables and modern tooling.
If you’re not comfortable with Vite — that’s fine. Use regular HTML/JS and skip all .env parts of this task.

Tasks

GitHub and Git

  • Create a new repository on GitHub
  • Clone it to your computer
  • Create a dev branch
  • Commit regularly

Folder and File Structure

  • Create an index.html
  • Create at least one .js file
  • Create a README.md

npm Setup

  • Run npm init -y
  • (Optional) Set up with Vite: npm create vite@latest → Choose Vanilla + JavaScript
  • Install eslint, prettier
  • Create an eslint.config.mjs file
  • Create a .prettierrc file

API Setup and .env (Vite only)

Skip this section if you are not using Vite.

  • Create a .env file and add a variable like:
VITE_API_URL=https://jsonplaceholder.typicode.com/posts
  • In your app, use import.meta.env.VITE_API_URL to fetch data
  • Log or display the result in the browser

Linting and Formatting

  • Add a Prettier config with at least two rules
  • Add ESLint with plugin:js/recommended or similar
  • Create a lint script in package.json
  • Run npm run lint or npx eslint .

README.md

  • Add a heading and short description
  • Add npm install, npm run dev, npm run test, etc. in fenced code blocks
  • Add a list of available npm scripts
  • Include any .env setup (if using)
  • Add technologies used
  • Add author name or GitHub username

GitHub Actions

  • Add a .github/workflows/deploy.yml file
  • Use the deploy workflow from Lesson 4
  • Enable GitHub Pages in repo settings (set to Actions)
  • Push to trigger the deployment
  • Confirm your site is live

Pull Request

  • Push your branch
  • Open a pull request from your branch to main
  • Add a description
  • Review your own code or ask a classmate
  • Merge the pull request

What to Focus On

  • Clear commits and pull requests
  • Working lint/format config
  • Using README.md properly
  • Bonus: Automating deployment with GitHub Actions
Tags: