Individual - Profiles App with GitHub Actions.md

Individual - Profiles App with GitHub Actions

This assignment gets you from a clean dev container to a deployed GitHub Pages site using GitHub Actions, and introduces components, props, states and .map().

Reminder, Nov 7th lecture is extended workshop ( join in for atleast an hour via zoom with Kuri to work on this lab)

Due Date : Before next lab

• Parts 0,1,2 => Should take you about an hour,
• Parts 3,4,5 => Due before next lab.

part0.md

Part 0 - Dev Container & Repo Setup

0.1 Create a new dev container with Node.js + JavaScript

Create a new "NodeJS" Dev Container. You should know how to do this from last week's lecture. But if not, here is a tutorial: https://code.visualstudio.com/docs/devcontainers/tutorial

If you had issues setting this up during the lecture on Oct 31, Feel free to just use locally installed node.js However, Please copy the error on KF6's React Discussion Page have these resolved next week with prof.C's office hours

0.2 Publish to GitHub

Inside the dev container window, under the "Source Control Tab", You should see a button to publish the repo to GitHub. If not, use the Command Palette (F1 or Ctrl+Shift+P) and select Publish to GitHub. Make sure you choose a "Public" repo and name it profiles-app.

Checkpoint

• Dev container with Node.js is running.
• Repo profiles-app created and published to GitHub. Make sure it is public and visible online.

0.3 Enable Github Pages

In your repo on GitHub, go to Settings → Pages. Under Build and deployment, set the Source to GitHub Actions. This will allow the GitHub Actions workflow we create later to publish the site.

part1.md

Part 1 — Vite + React + React‑Bootstrap

1.1 Initialize with Vite + React

As we are working inside a dev container, the folder is empty. Initialize a new Vite + React project (except for the .devcontainer files!!):

npm create vite@latest .
# Choose : "Ignore files and continue"
# Choose : React + JavaScript

Note: You can stop the running process with Ctrl+C.

1.2 Run the dev server

Modify package.json's dev server to listen on all interfaces (for dev container compatibility):

"scripts": {
  "dev": "vite --host",
  ...
}

Run the dev server

npm run dev

Open the shown URL (usually http://localhost:5173).

Checkpoint

• Local dev runs at http://localhost:5173.
• Make a commit and push, and the same is visible on GitHub Online.

1.2 Install React‑Bootstrap and Bootstrap

npm i react-bootstrap bootstrap

Import Bootstrap CSS once, at the very top of src/main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

1.3 Replace <App/> content with “Hello React” using React‑Bootstrap

src/App.jsx

import Container from 'react-bootstrap/Container';
import Alert from 'react-bootstrap/Alert';

export default function App() {
  return (
    <Container className="py-5">
      <Alert variant="primary" className="text-center mb-0">
        Hello React
      </Alert>
    </Container>
  );
}

Deliverables

• README with a small description of what this app is. Feel free to write anything.
• Link to commit that introduced React-Bootstrap and “Hello React”.
• Screenshot of the page (attach to submission).

part2.md

Part 2 - Deploy to GitHub Pages with GitHub Actions (CI)

We’ll use a single workflow that builds the Vite app and publishes dist/ to GitHub Pages.

2.1 Set the correct base path for a project site

For a project site hosted at https://<username>.github.io/<repo>/, Vite must know the base path:

vite.config.js (or vite.config.ts)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/profiles-app/' // <-- set to '/<repo-name>/'
})

If you later rename the repo, update this value.

2.2 Add the Pages workflow

Create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

2.3 Check Pages → “GitHub Actions”

You have already done this in Step 0.3:

verify that pages are enabled! Settings → Pages → Build and deployment → Source: GitHub Actions.

Push your commit and Wait for the workflow to finish. It will publish your site to GitHub Pages automatically.

Your URL: https://<username>.github.io/profiles-app/

Checkout the "Actions" tab to see the workflow progress and the deployment status. It should show your site's address once done.

Optional status badge (add to README):

![Deploy](https://github.com/<username>/profiles-app/actions/workflows/deploy.yml/badge.svg)

Tip: For React Router or other client-side routing, enable Vite's SPA fallback by placing a _redirects file if you use another host. GitHub Pages serves static files; with the base set, typical Vite SPA works for direct links to routes within the project path.

Checkpoint

• Site loads at your Pages URL !

Deliverables

• Add the live link to your README.

---

part3.md

Part 3 - Components, Props, and .map() (DOK‑1)

Goal: Render a list of profiles via components.

3.1 Starter data

Create src/data/profiles.js:

export const profiles = [
  { id: 1, name: 'Ada Lovelace', likes: 0 },
  { id: 2, name: 'Alan Turing', likes: 0 },
];

3.2 Create a ProfileCard component

src/components/ProfileCard.jsx

import Card from 'react-bootstrap/Card';

export default function ProfileCard({ name, likes }) {
  return (
    <Card className="mb-3 shadow-sm">
      <Card.Body>
        <Card.Title className="h5 mb-1">{name}</Card.Title>
        <Card.Text className="mb-0">Likes: {likes}</Card.Text>
      </Card.Body>
    </Card>
  );
}

3.3 Render with .map() in App.jsx

src/App.jsx

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProfileCard from './components/ProfileCard.jsx';
import { profiles } from './data/profiles.js';

export default function App() {
  return (
    <Container className="py-4">
      <h1 className="mb-4 text-center">Profiles</h1>
      <Row xs={1} md={2} lg={3}>
        {profiles.map(p => (
          <Col key={p.id}>
            <ProfileCard name={p.name} likes={p.likes} />
          </Col>
        ))}
      </Row>
    </Container>
  );
}

Checkpoint

• Page renders 2+ cards.
• Each card shows name + likes count (read‑only).

Deliverables

• Screenshot of rendered cards.
• Link to commit diff that introduced components and .map().

---

README Template (can be added to your repo's README.md)

# Profiles App (Lab 1)

## Dev Container

> Talk about the image you are using here.!
For eg, if i were to use the Node.js dev container, I would write:
- Node.js dev container (image: `mcr.microsoft.com/devcontainers/javascript-node:20`)
- `corepack enable` to use npm/yarn/pnpm reliably

## Getting Started
\ ```bash
npm install
npm run dev
# open the shown URL (e.g., http://localhost:5173)
\ ```

## Build

\ ```bash
npm run build
\ ```

## Deploy (GitHub Pages via Actions)
- Ensure `base: '/profiles-app/'` in `vite.config.js`
- Push to `main`; the CI workflow will build and deploy automatically.
- Settings → Pages → Source: **GitHub Actions**

**Live URL:** https://<username>.github.io/profiles-app/

## Notes
- Uses React + React-Bootstrap.
- We use components, props, and `.map()`.

part4.md

Part 4 - Stateful UI & Like Button (DOK‑1→2)

Goal: useState and event handling.

Tasks

• In App.jsx, store profiles in state:

const [people, setPeople] = useState(profiles);

• Add a Like button on each card.

• On click, increment that profile’s likes in state (immutably).

setPeople(ps => ps.map(p => p.id===id? { ...p, likes: p.likes+1 } : p));

Checkpoint

• Likes increase without page refresh.
• State change visible immediately.

part5.md

Part 5 - Forms & Validation (DOK‑2)

Goal: Add new profiles via a controlled form with validation.

Tasks

• Add <form> with Name input and Add button.
• Controlled input with useState.
• Validation rules:
  • Name required (non‑empty, trimmed).
  • Name must be unique among existing profiles.
• On submit: push new {id, name, likes: 0} to state.
• Show inline feedback (invalid styling) if rules fail.

Hint Snippets

const [name, setName] = useState('');
const trimmed = name.trim();
const exists = people.some(p => p.name.toLowerCase()===trimmed.toLowerCase());

Deliverables

• GIF (or multiple screenshots) adding a new profile and error case.

part6.md

Part 6 - (optional) Profile Editing & Deletion: Allow users to modify or delete profiles.

In case you are bored! DOK Level 3/4: Strategic Thinking (Integrations)

Since there is no Authentication: We assume all actors are trusted and will only modify profiles that they should.

Table view with Sorting & Filtering:

Listing all profiles is an important feature of a directory! A Table view is a good way to visualize data.

• Integrate any of the popular Data-table libraries to your web application to show the profiles as a list.

• G-Grid, MUI, datatables.net, or TanStack-shadcn / TanStack-Docs

• Advanced state management, localStorage, dark mode, Friend Request system ( to maintain a graph of friends on your platform)