🚀 How to sideprosjekt

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"]
 }

.github/workflows/build.yaml

@@ -0,0 +1,33 @@
+name: 🚀 Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🔍 Checkout
+        uses: actions/checkout@v4
+
+      - name: ⚙️ Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: 🚚 Install dependencies
+        run: npm install
+
+      - name: 🩺 Lint
+        run: npm run lint
+
+      - name: 💅🏻 Check format
+        run: npm run format:check
+
+      - name: 🏗️ Build
+        run: npm run build

.nvmrc

@@ -0,0 +1,2 @@
+v18.19.1
+

README.md

@@ -4,12 +4,10 @@ Velkommen til "How to sideprosjekt"!
 
 Dette repoet tilhører en workshop/arrangement som handler om å lage sitt eget sideprosjekt. Du behøver ikke å ha deltatt for å bruke dette git-repoet.
 
-## Innholdsfortegnelse
-
 - [How to sideprosjekt](#how-to-sideprosjekt)
-  - [Innholdsfortegnelse](#innholdsfortegnelse)
   - [Forutsetninger](#forutsetninger)
   - [Hvordan starte?](#hvordan-starte)
+  - [Nyttige lenker](#nyttige-lenker)
   - [Oppgaver](#oppgaver)
 
 ## Forutsetninger
@@ -22,15 +20,15 @@ Vi forventer at du har `node` og `npm` installert. For å laste ned til ditt opp
 
 ## Hvordan starte?
 
-Du kan enten starte ved å klone dette repoet og hoppe til steg 3, eller du kan følge stegene under.
+Du kan enten starte ved å forke dette repoet og hoppe til steg 3, eller du kan følge stegene under.
 
 1. Lag et nytt Next.js-prosjekt ved å kjøre `npx create-next-app@latest` i terminalen.
 
 ```bash
 npx create-next-app@latest
 ```
 
-2. Følg deretter den interaktive installasjonen. Vi anbefaler å velge TypeScript som språk, bruke ESLint og Tailwind CSS, samt også å bruke "App Router".
+2. Følg deretter den interaktive installasjonen. Vi anbefaler å velge TypeScript som språk, bruke ESLint og Tailwind CSS, samt også å velge "App Router".
 
 3. Når prosjektet er ferdig installert, må du først navigere til prosjektmappen, og deretter installere avhengigheter.
 
@@ -45,11 +43,26 @@ npm install
 npm run dev
 ```
 
-Dette vil starte en lokal server på `http://localhost:3000`. Når du endrer filer, vil serveren automatisk oppdatere seg selv.
+Dette vil starte en lokal server på `http://localhost:3000`. Når du endrer filer, vil nettsiden automatisk oppdatere seg selv.
+
+## Nyttige lenker
+
+- [Next.js sin dokumentasjon](https://nextjs.org/docs)
+- [React sin dokumentasjon](https://react.dev)
+- [Tailwind CSS sin dokumentasjon](https://tailwindcss.com/docs)
+- [ChatGPT](https://chat.openai.com) eller [Chat UiB](https://chat.uib.no) (her får man og GPT-4)
+
+Om du bruker VSCode anbefaler vi å laste ned [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
 
 ## Oppgaver
 
-Vi har laget noen oppgaver for deg som du kan prøve å løse. Disse oppgavene er laget for å gi deg en forståelse av hvordan du kan lage ditt eget sideprosjekt.
+_(Valgfritt! Gjerne lag noe eget.):_
+
+Vi har laget noen oppgaver for deg som du kan prøve å løse. Disse oppgavene kommer til å ta deg gjennom grunnleggende React og Next.js. Målet kommer til å være å lage en enkel portefølje/blogg-side.
+
+Det kommer til å være noen eksempler til kode på hvordan du kan "løse" oppgavene, men de er ikke nødvendigvis en fasit. Om du har lyst til å gjøre noe annerledes, er det bare å kjøre på! Oppgavene er laget for å gi deg en pekepinn på hva du kan gjøre.
+
+Før du starter på oppgavene anbefaler vi å forke dette repoet til din egen GitHub-konto. Om du gjør det kan du også følge [how-to-deploy](./oppgaver/how-to-deploy.md) for å lære hvordan du kan deploye prosjektet ditt til Vercel.
 
 1. [Oppgave 1](./oppgaver/oppgave-1.md)
 2. [Oppgave 2](./oppgaver/oppgave-2.md)

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

oppgaver/how-to-deploy.md

@@ -0,0 +1,7 @@
+# Hvordan deploye med Vercel
+
+1. Gå til [Vercel](https://vercel.com) og logg inn med GitHub-kontoen din.
+2. Trykk på "Add New..." og velg "Project".
+3. Finn prosjektet ditt i listen og trykk "Import".
+4. I "Configure Project" kan du bruke standardinnstillingene og trykke "Deploy".
+5. Etter noen sekunder vil prosjektet ditt være deployet og du vil få en URL som du kan dele med andre.

oppgaver/oppgave-1.md

@@ -1 +1,88 @@
 # Oppgave 1
+
+Vi starter med å få en enkel oversikt over hvordan man kan legge til nye elementer på en nettside. Gå til [src/app/page.tsx](../src/app/page.tsx), slett all i `return` i funksjonen `Home` og erstatt det med en liten introduksjon av deg selv. Her skriver du noe som heter for JSX, som er veldig likt HTML.
+
+Det som er i `return` vil bli vist på nettsiden. Om du vil legge til en overskrift, kan du bruke `<h1>`, for en paragraf kan du bruke `<p>`. Om du vil legge til en liste, kan du bruke `<ul>` og `<li>`.
+
+Vær kreativ! Legg til så mye du vil. Jo mer du legger til, jo mer lærer du. Om du har vært borti HTML før, merker du sikkert at dette ser veldig likt ut. De mest grunnlegende og mest brukte elementene er:
+
+- `<div>`: En "container" for andre elementer.
+- `<h1>`, `<h2>`, ..., `<h6>`: Overskrifter. `h1` er den største, `h6` er den minste.
+- `<p>`: En paragraf.
+
+[En mer detaljert oversikt over HTML-elementer finner du her](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
+
+<details>
+<summary>💡 Hint</summary>
+
+```tsx
+export default function Home() {
+  return (
+    <div>
+      <h1>Hei, jeg heter [ditt navn]!</h1>
+      <p>Jeg studerer [studie] på Universitetet i Bergen.</p>
+    </div>
+  );
+}
+```
+
+</details>
+
+Siden vi bruker Tailwind CSS kommer alt av default styling av elementer være fjernet. Derfor må vi style de selv. Man kan for eksempel legge til `className="text-2xl"` på en `<h1>` for å gjøre teksten større. Om du vil ha en overskrift som er enda større, kan du bruke `text-3xl`, `text-4xl`, osv. Du kan også legge til `className="text-center"` i den ytterste `<div>` for å sentrere alt innholdet.
+
+<details>
+<summary>💡 Hint</summary>
+
+```tsx
+export default function Home() {
+  return (
+    <div className="text-center">
+      <h1 className="text-2xl">Hei, jeg heter [ditt navn]!</h1>
+      <p>Jeg studerer [studie] på Universitetet i Bergen.</p>
+    </div>
+  );
+}
+```
+
+</details>
+
+Du kan lese mer om [Tailwind CSS her](https://tailwindcss.com/docs/utility-first).
+
+<details>
+
+<summary>💡 Her en et eksempel på hvordan det kan se ut:</summary>
+
+```tsx
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-300 px-4">
+      <div className="max-w-screen-sm mx-auto text-lg flex flex-col gap-6 py-24">
+        <h1 className="text-4xl font-bold text-gray-100">
+          👋🏻 Hei, jeg heter Ole Magnus!
+        </h1>
+        <p>
+          Jeg studerer Datateknologi på Universitetet i Bergen, og har en stor
+          interesse for webutvikling.
+        </p>
+
+        <p>🚀 Akkurat nå holder jeg på å lære meg:</p>
+
+        <ul className="pl-4 list-disc">
+          <li>Next.js</li>
+          <li>Typescript</li>
+          <li>TailwindCSS</li>
+          <li>Vercel</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+```
+
+</details>
+
+Om mye er nytt for deg ikke vær redd for å søke opp dokumentasjon på nettet, spørre ChatGPT eller spørre oss.
+
+Lykke til!
+
+[Trykk her for å gå til oppgave 2](./oppgave-2.md)

oppgaver/oppgave-2.md

@@ -1 +1,144 @@
 # Oppgave 2
+
+## Litt om komponenter i React
+
+React er biblioteket som brukes i Next.js for å lage modulære komponenter. Man kan tenke på komponenter som funksjoner som outputter UI.
+
+For eksempel:
+
+```tsx
+function MyComponent() {
+  return <h1>Jeg elsker Webkom!</h1>;
+}
+```
+
+Denne funksjonen kan man bruke i andre komponenter slik:
+
+```tsx
+function App() {
+  return (
+    <div>
+      <MyComponent />
+      <p>Koding er gøy!</p>
+    </div>
+  );
+}
+```
+
+De har også mulighet til å ta inn parametere, som gjør dem mer gjenbrukbare:
+
+```tsx
+// `interface` er en måte å definere et objekt/type i TypeScript
+// Her tar vi inn et objekt med en variabel `name` som er en streng
+interface GreetingProps {
+  name: string;
+}
+
+function Greeting({ name }: GreetingProps) {
+  return <h1>Hei, {name}!</h1>;
+}
+```
+
+```tsx
+function App() {
+  return (
+    <div>
+      <Greeting name="Andreas" />
+      <Greeting name="Bo" />
+    </div>
+  );
+}
+```
+
+Som vil gi:
+
+```html
+<div>
+  <h1>Hei, Andreas!</h1>
+  <h1>Hei, Bo!</h1>
+</div>
+```
+
+For å gjøre komponentene tilgjengelige i andre filer, bruker man `export`-nøkkelordet foran funksjonen. For eksempel:
+
+```tsx
+export function MyComponent() {
+  return <h1>Jeg elsker Webkom!</h1>;
+}
+```
+
+Da kan man importere komponenten i andre filer:
+
+```tsx
+import { MyComponent } from "./my-component";
+```
+
+Dette er eksempel på en "named export". Det finnes også "default exports", som er en måte å eksportere en enkelt ting fra en fil. For eksempel:
+
+```tsx
+export default function MyComponent() {
+  return <h1>Jeg elsker Webkom!</h1>;
+}
+```
+
+```tsx
+import MyComponent from "./my-component";
+```
+
+Merk: Med "default exports" trenger man ikke å bruke "{}" rundt navnet på komponenten når man importerer den. Det kan også bare være én "default export" per fil.
+
+[Les mer om komponenter i React her](https://react.dev/learn/your-first-component).
+
+## Lage en prosjektliste (Oppgave)
+
+I denne oppgaven skal du lage en ny komponent som viser en liste av prosjekter. Hvert prosjekt skal ha en tittel og en beskrivelse.
+
+Du kan lage en ny fil i `src/components`-mappen med navnet `project-list.tsx`. Lag deretter en komponent som viser en liste av prosjekter. Hvert prosjekt skal ha en tittel og en beskrivelse.
+
+Bygg videre på denne koden:
+
+```tsx
+export function ProjectList() {
+return (
+  // Din kode her
+)
+}
+```
+
+<details>
+
+<summary>💡 Hint</summary>
+
+```tsx
+function ProjectList() {
+  return (
+    <div>
+      <h2 className="text-2xl mb-4">Prosjekter</h2>
+      <ul className="pl-4 list-disc space-y-4">
+        <li>
+          <h3 className="text-lg">Tetris</h3>
+          <p className="text-sm">Semesteroppgave jeg hadde i INF101</p>
+        </li>
+        <li>
+          <h3 className="text-lg">Egen hjemmeside</h3>
+          <p className="text-sm">
+            En nettside jeg laget på workshop med echo Webkom
+          </p>
+        </li>
+      </ul>
+    </div>
+  );
+}
+```
+
+</details>
+
+Ikke glem å legge til litt styling med Tailwind CSS!
+
+Videre må du inkludere denne komponenten i `src/app/page.tsx`-filen. Sånn at den vises på siden.
+
+Fremover anbefaler vi også å lage komponenter når du føler at det er nødvendig. Det er veldig vanlig ha å masse komponenter i React-prosjekter, og det er en god praksis for å holde koden oversiktlig og gjenbrukbar.
+
+[Tilbake til oppgave 1](./oppgave-1.md)
+
+[Trykk her for å gå til oppgave 3](./oppgave-3.md)